Lightning

LWC: lightning-input-address custom validation

It is common practice to use lightning-input-address tag to fetch address information from user. However, sometimes we much show validation to one field or we must show a custom validation message. To achieve this functionality, we use the code below.

 <lightning-input-address 
    address-label="" 
    show-address-lookup="true"
    street-label="Street" 
    city-label="City" 
    country-label="Country" 
    province-label="State/Province" 
    postal-code-label="Postal Code" 
    country-options={getCountryOptions_For_Contact}
    province-options={getProvinceOptions_For_Contact}
    onchange={handle_Check_Validation} 
    address-lookup-placeholder="Search address...">
</lightning-input-address>

the above code also has global search lookup feature.

To handle to validation functionality and to display error message on specific field. we user below code. as part of example I will just show you one field. validation and similar can be implemented for rest of the fields.

As part of example I will show validation on country field. Let us say that country is always required even if user does not enter full address, atleast country should be selected.

handle_Check_Validation(event) {
	const address = this.template.querySelector('lightning-input-address');
	//Country Field Validation
	var country = address.country;
	if (!country) {
		address.setCustomValidityForField("Complete this field.", "country");
	} else {
		address.setCustomValidityForField("", "country"); //Reset previously set message
	}
    address.reportValidity();
}

Here there are 2 piece of code that we need to consider.
1)setCustomValidityForField()
2)reportValidity()

setCustomValidityForField()
Sets a custom error message to be displayed for the specified fieldName when the input address value is submitted.
This method takes 2 parameters namely Message and FieldName
Message – The string that describes the error. If message is an empty string, the error message is reset.
FieldName – Name of the field, which must be one of the following: street, city, province, postalCode, country.

reportValidity()
Displays the error messages and returns false if the input is invalid. If the input is valid, reportValidity() clears displayed error messages and returns true.

Note:

  1. reportValidity() is important, if that is missed then validation message is not alerted to end user.
  2. You can use this code in onsubmit method as well.

Output:

Reference

Salesforce: lightning-input-address

Lightning · Salesforce Basic

AURA: Updated URL Parameter Value in JS File

I was working on a page in Aura component and the page is loaded on click of a button from a related list(It can also load from a quick Action button). AURA components have a behavior that a component loads with value in cache memory. Which means, AURA component can sometimes load the previously clicked value from URL. Behavior is unpredictable. Which means, Component can load updated value or it can also load previous URL parameter value. For which user may have to click refresh button to load new info.

Continue reading “AURA: Updated URL Parameter Value in JS File”
Lightning

LWC: Lightning-Combobox required field validation on submit button

When working with custom Lightning-combobox in LWC most of the time you will face problems making combo box a required field. When using a Lightning-record-edit-form, you usually use lightning-input-field tag and it takes care of all the FLS (Field Level Security) and irrespective of field type it handles every type of field. However, there will be scenarios where lightning-input-field may not be suitable and end up using a custom tag. For instance, a custom lookup field or multi select custom lookup field or a custom record type selection combo box. You end up using a custom solution for these.

Continue reading “LWC: Lightning-Combobox required field validation on submit button”
Lightning

AURA: Clear cache while loading a Lightning Component.

Usually because of cachable=true in apex class, you see results in lightning Aura component same as previous one, Event thought the records are updates, you do not see any updated values. To prevent Lightning aura component from loading component with same results we need to clear cached value.

To clear cache, you have to fire refreshview on component as shown below.

Continue reading “AURA: Clear cache while loading a Lightning Component.”
Lightning

Displaying HTML tags from a text field in lightning component

There will be occasions when you need to display some HTML tags like images or icons based on some condition and you end up using a formula text field to create a dynamic tag and save it as text field. It can also be a Rich-Text-Area field which will be saved as a HTML tag in backend.

Continue reading “Displaying HTML tags from a text field in lightning component”