For our web-components library we are using Lit framework, but recently we have discovered the bug that whenever our custom web components are included into the form, they are getting ignored by form reset(). Do you know how to force custom web components to be included into form.reset()?
<form>
<custom-input-field
id="title"
name="title"
value="Check out our library"
></custom-input-field>
<input type="reset">
</form>
You might want to take a look at form-associated custom elements.
This'll allow custom elements to participate in forms and let you implement a formResetCallback() to reset your custom element to its default state on form reset.
As of writing (Aug 2022), form-associated custom elements via ElementInternals are available for Chrome and Firefox, and just got implemented for Safari.
Related
I'm making an ASP.Net Core web app and in it I have a checkbox toggle that has some Bootstrap 4 styling and is hooked up to Vue using v-on:change:
<input v-on:change="changeCurrency()" type="checkbox" data-toggle="toggle" data-on="SEK" data-off="EUR" data-onstyle="light" data-size="sm">
However, the v-on:change method doesn't fire if the element is decorated with:
data-toggle="toggle"
Does anyone know any other way of perhaps making a similar toggle and having it work with Vue? I looked into perhaps creating a Vue toggle, but didn't find much information on how to implement that into an ASP.NET Core application.
I am working on a visualforce page using an inputField on custom object with a date field and looks something like this:
<apex:page id="myVisualForcePage" showheader="false" controller="myController">
<apex:composition template="myTemplate">
<apex:define name="body">
<apex:outputpanel id="fullPage">
<div class="form-group">
!A bunch of other stuff!
<label class="col-xs-4">My Date</label>
<div class="col-xs-8">
<apex:inputfield id="myDate" styleClass="form-control" value="{!myControllerObject.MyCustomDateField__c}"/>
</div>
</div>
</apex:outputpanel>
</apex:define>
<apex:composition>
</apex:page>
For some reason the datePicker is not being formatted correctly on page load until an actionFunction is called.
This appears to be because the some of the standard salesforce css styling classes do not load on page load until the call is made.
When the page is loaded, we can see that the datePicker does not have the standard elements.css class associated with it and there is no link to the style class:
Datepicker Element
Datepicker Element Styling
CSS links before callout
Following a call to the action function, we can see below that all of salesforce's standard css styling classes are loaded and that the datepicker now has styling elements from element.css which was loaded:
Newly loaded css styling links
New element styles for date picker
If anyone has any information about why this may be happening and how to ensure the resources are loaded on page load I would really appreciate it!
As an update, if I load the following resource resource explicitly then it will work correctly:
<link href="/sCSS/41.0/sprites/1516644206000/Theme3/default/gc/elements.css" type="text/css" class="user" rel="stylesheet"/>
However, I do not need to do this on other pages and I am wondering why? Could this be a difference in API's?
By specifying showHeader=false you're declaring you don't want any SF "overhead" on your page, including stylesheets.
Check <apex:page> and consider explicitly adding standardStylesheets="true"... In theory it's a default but looks like you uncovered some funny behavio(u)r.
standardStylesheets: A Boolean value that specifies whether the standard Salesforce stylesheets are added to the generated page header
if the showHeader attribute is set to false. If set to true, the
standard stylesheets are added to the generated page header. If not
specified, this value defaults to true. By setting this to false,
components that require Salesforce.com CSS may not display correctly,
and their styling may change between releases.
For anyone who has this issue, try changing your visualforce page's API version. I find that v39 works fine but I had a page on v41 and v44 that both had this problem.
I have a template that has a some text updated reactively once every second.
I also have a button, that when clicked, gets it's style changed to display a disabled button - this works fine but as soon as the template re-renders due to the condition above then the button reverts back to it's original style. It is almost as if the entire template is rendering from scratch (template.render is fired every second).
Is this normal? do I need to control the style via a reactive {{btnstyle}} type mechanism?
Yes, the typical way to do this is to set the style via a class that is set by a template helper function. For disabling button/input elements, you can just use the disabled attribute instead of class:
<button type="button" {{#if buttonDisabled}}disabled{{/if}}>Button Text</button>
or
<input type="button" value="Button Text" {{#if buttonDisabled}}disabled{{/if}} />
and then do:
Template.yourFormTemplate.buttonDisabled = function() {
// return true or false depending on if the button should be disabled
};
The problem is that when Meteor re-renders your template, the element which you set the style of is actually getting replaced with a new one. Note that the Meteor team is currently working on a new templating engine that works on a more fine-grained level, so that elements don't necessarily get replaced like that. You can try your current code with the preview release of the new templating engine with this command:
meteor --release shark-1-29-2014-e
or
mrt --release shark-1-29-2014-e
However, it is still generally recommended to style elements via the class attribute, set with a template helper. This is a more declarative, template-driven approach that just fits better with the "Meteor way" to do things, rather than the imperative approach of setting the style directly from your JavaScript. It also helps with separating concerns, by allowing your CSS to control the actual style.
Is this possible to achieve without javascript/jQuery?
I currently have a login template with the input fields as:
<input id="username" type="text" name"username" placeholder="username" autofocus>
I was wondering if there was a way when the user clicked their mouse on the field to type the placeholder text would disappear without using javascript if possible? Before this i was just using value and echoing the variables out into the fields but currently experimenting with HTML 5 and CSS3.
Thanks.
New browsers have a native way to do this. And if supported, you don't have to do anything.
With older browsers you do need to use javascript.
Edit: When using new features on old browsers its called Pollyfills. Here is a nice list with a lot of pollyfills that can be used together with Modernizer, that in turn can detect this features.
Can anyone direct me on how to use SiteEdit specific syntax or tags in the Razor template in DD4T code? I have seen Site Edit related classes in it, but could not understand how to use SiteEdit tags in the view where there were some syntax similar to Dreamweaver for example RenderComponentField or tcdl:ComponentField which we used in Dreamweaver. I am very new to DD4T and am using SiteEdit 2009 SP3 and SDL Tridon 2011 SP1.
Thanks in advance.
Update: We have tried the implementation mentioned in the answer but unfortunately we are getting an error when we are accessing the page in proxy stating "Invalid template -The HTML is invalid, probably because your template code produces invalid HTML, such as a p tag inside another p tag. Check your HTML using a validator such as the W3C Markup Validation Service, correct your template, and republish."
I guess this is because Xml content is being pushed into html page due to the use of Dynamic Page and Component TBBs which we used in our Component and Page Templates.
Let us kow how to continue further.
The SiteEdit markup is not generated like it is done in a Dreamweaver Template, you are responsible yourself to place the markup for your editable fields in the Razor view. Good thing for this is that it works for similar for SiteEdit 2009 SP3 and UI 2012. Downside for UI 2012 is that it is not listening (yet) to the Enable Inline Editing which you can set on the Component or Page Templates (something we should consider for a future DD4T version).
Everything is based on the DD4T SiteEditHelper class. You start in your page view (before the </body> tag) by placing the following call:
#Html.SiteEditPage(Model)
This will write out the page markup, and if you set the style to "SiteEdit2012" in your SiteEdit_config.xml it will also write out the bootstrap script required for UI 2012.
Then for every Component Presentation and every editable Component Field you will also need to add the appropriate markup. For a Component presentation you can use:
#{var ComponentPresentation = ViewBag.ComponentPresentation as IComponentPresentation;}
<div>
#Html.SiteEditComponentPresentation(ComponentPresentation)
</div>
Make sure you write this out inside a DIV or some other element that can mark the boundary of your Component Presentation. For Component Fields a similar story, you can use:
<div>
#Html.SiteEditField(Model, Model.Fields["FieldName"])
#Model.Fields["FieldName"].Value
</div>
Apart from the changes to your views, as Bart has described, you also need to put a configuration file in the root of your web application, called SiteEdit_config.xml. It should look like this:
<?xml version="1.0" encoding="utf-8" ?>
<siteEdit enabled="true" tridionHostUrl="http://tridion.my.com">
<contextPublications>
<contextPublication id="10" componentPublication="3" pagePublication="9" publishPublication="10" />
<contextPublication id="11" componentPublication="3" pagePublication="9" publishPublication="11" />
</contextPublications>
</siteEdit>
You must list all your active publications here. DD4T tries to match your current page to the correct context publication (based on the 'id' attribute). If it cannot find it, SiteEdit will be disabled. The other attributes allow you to control the behaviour of SiteEdit.
componentPublication: new components will be created here
pagePublication: new pages will be created here (not used in Tridion UI 2012)
publishPublication: pages and components will be republished from this context (usually coincides with the id)
DD4T can also easily be configured for use with Tridion UI 2012. Just change the first element in the configuration as follows:
<?xml version="1.0" encoding="utf-8" ?>
<siteEdit enabled="true" style="SiteEdit2012" tridionHostUrl="http://tridion.my.com">
...
</siteEdit>