Apex Code Development You need to sign in to do that
Don't have an account?
sksfdc221 Enable component based on selection in lwc
I have a requirement to enable a component based on selection in the page. Below is the screenshot of my page
From the above image, when a radio button is clicked, below lookup box should be enabled and when these two selections are made, next button should be enabled.
As of now, they are not dependent on any selections.
Below is my LWC code:
LookupController apex class:
LookupController LWC HTML:
JS Code:
Is there any way I can enable the components based on other component selections. Please suggest
As of now, they are not dependent on any selections.
Below is my LWC code:
LookupController apex class:
public with sharing class LookupController {
public LookupController() {
}
@AuraEnabled(cacheable=true)
public static List<SObJectResult> getResults(String ObjectName, String fieldName, String value) {
List<SObJectResult> sObjectResultList = new List<SObJectResult>();
system.debug(fieldName+'-------------'+ObjectName+'---++----------'+value);
if(String.isNotEmpty(value))
for(sObject so : Database.Query('Select '+fieldName+' FROM '+ObjectName+' WHERE '+fieldName+' LIKE \'%' + value + '%\'')) {
String fieldvalue = (String)so.get(fieldName);
sObjectResultList.add(new SObjectResult(fieldvalue, so.Id));
}
return sObjectResultList;
}
public class SObJectResult {
@AuraEnabled
public String recName;
@AuraEnabled
public Id recId;
public SObJectResult(String recNameTemp, Id recIdTemp) {
recName = recNameTemp;
recId = recIdTemp;
}
}
}
LookupController LWC HTML:
<template>
<br>
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Operation</legend>
<div class="slds-form-element__control">
<span class="slds-radio">
<input type="radio" id="radio-43" value="radio-43" name="default" checked="" />
<label class="slds-radio__label" for="radio-43">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Insert</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-44" value="radio-44" name="default" />
<label class="slds-radio__label" for="radio-44">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Update</span>
</label>
</span>
</div>
</fieldset>
<br><br>
<lightning-card>
<h3 slot="title">
<lightning-icon icon-name="utility:search" size="small"></lightning-icon>
Search Objects below
</h3>
<div slot="footer">
</div>
<div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class={txtclassname} data-id="resultBox" aria-expanded="False" aria-haspopup="listbox" role="combobox">
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon slds-input-has-icon_left-right" role="none">
<div>
<span class="slds-icon_container slds-icon-utility-search slds-input__icon iconheight">
<lightning-icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" icon-name={iconName} size="x-small" alternative-text="icon" ></lightning-icon>
</span>
</div>
<lightning-input required={required} read-only={inputReadOnly} data-id="userinput" label={Label} name="searchText" onchange={searchField} value={selectRecordName} class="leftspace"></lightning-input>
<div if:true={iconFlag}>
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right iconheight">
<lightning-icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" icon-name="utility:search" size="x-small" alternative-text="icon" ></lightning-icon>
</span>
</div>
<div if:true={clearIconFlag}>
<button class="slds-input__icon slds-input__icon_right slds-button slds-button_icon iconheight" onclick={resetData}>
<lightning-icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" icon-name="utility:clear" size="x-small" alternative-text="icon" ></lightning-icon>
<span class="slds-assistive-text">Clear</span></button>
</div>
</div>
<!-- Second part display result -->
<div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<template for:each={searchRecords} for:item="serecord">
<li role="presentation" class="slds-listbox__item" key={serecord.recId}>
<div data-id={serecord.recId} data-name={serecord.recName} onclick={setSelectedRecord} class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account">
<lightning-icon icon-name={iconName} class="slds-icon slds-icon slds-icon_small slds-icon-text-default" size="x-small"></lightning-icon>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">{serecord.recName}</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">{objectName} • {serecord.recName}</span>
</span>
</div>
</li>
</template>
</ul>
</div>
<div if:true={messageFlag}>
No result found.
</div>
<div if:true={LoadingText}>
Loading...
</div>
</div>
</div>
</div>
</div>
</div>
</lightning-card>
<br> <br>
<a class="slds-button slds-button_brand" href="javascript:void(0);">Next</a>
</template>
JS Code:
import { LightningElement,wire,api,track } from 'lwc';
import getResults from '@salesforce/apex/LookupController.getResults';
export default class LwcCustomLookup extends LightningElement {
@api objectName = 'EntityDefinition';
@api fieldName = 'QualifiedApiName';
@api selectRecordId = '';
@api selectRecordName;
@api Label;
@api searchRecords = [];
@api required = false;
// @api iconName = 'standard:event'
@api LoadingText = false;
@track txtclassname = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click';
@track messageFlag = false;
@track iconFlag = true;
@track clearIconFlag = false;
@track inputReadOnly = false;
searchField(event) {
var currentText = event.target.value;
this.LoadingText = true;
getResults({ ObjectName: this.objectName, fieldName: this.fieldName, value: currentText })
.then(result => {
this.searchRecords= result;
this.LoadingText = false;
this.txtclassname = result.length > 0 ? 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open' : 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click';
if(currentText.length > 0 && result.length == 0) {
this.messageFlag = true;
}
else {
this.messageFlag = false;
}
if(this.selectRecordId != null && this.selectRecordId.length > 0) {
this.iconFlag = false;
this.clearIconFlag = true;
}
else {
this.iconFlag = true;
this.clearIconFlag = false;
}
})
.catch(error => {
console.log('-------error-------------'+error);
console.log(error);
});
}
setSelectedRecord(event) {
var currentRecId = event.currentTarget.dataset.id;
var selectName = event.currentTarget.dataset.name;
this.txtclassname = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click';
this.iconFlag = false;
this.clearIconFlag = true;
this.selectRecordName = event.currentTarget.dataset.name;
this.selectRecordId = currentRecId;
this.inputReadOnly = true;
const selectedEvent = new CustomEvent('selected', { detail: {selectName, currentRecId}, });
// Dispatches the event.
this.dispatchEvent(selectedEvent);
}
resetData(event) {
this.selectRecordName = "";
this.selectRecordId = "";
this.inputReadOnly = false;
this.iconFlag = true;
this.clearIconFlag = false;
}
}
Is there any way I can enable the components based on other component selections. Please suggest
<lightning-input disabled={isDisabled} required={required} read-only={inputReadOnly} data-id="userinput" label={Label} name="searchText" onchange={searchField} value={selectRecordName} class="leftspace"></lightning-input>
<input type="radio" onclick={handleClick} id="radio-43" value="radio-43" name="default" checked="" />
<input type="radio" onclick={handleClick} id="radio-44" value="radio-44" name="default" />
In Js....
@track isDisabled=true; //set initial value to false
handleClick(){ //Once the radio button is checked enable the input field
this.isDisabled=false;
}
Same can be done for next button.
Thanks
Yogesh
yogeshRao is right about "disabled" attribute. I would prefer to use a getter more than a flag.
radioSelectedValue radioValueChanged (cmp, event) { this.radioSelectedValue = event.getParam("value") } get isDisabled () { return !this.radioSelectedValue }Also you should use a radioGroup component (https://developer.salesforce.com/docs/component-library/bundle/lightning:radioGroup/example).
Best regards,
Barthélemy