You need to sign in to do that
Don't have an account?
Devadarsi Devasis 2
Can Anyone please help me in converting my aura component code to lightning web components?
CustomListView.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
access="global"
controller="listViewController">
<!-- call doInit js function on component load to fetch list view details-->
<aura:handler name="init" value="this" action="{!c.doInit}"/>
<!-- aura attributes -->
<aura:attribute name="listViewResult" type="string[]"/>
<aura:attribute name="objectInfo" type="string" default="Case"/>
<aura:attribute name="currentListViewName" type="string" />
<aura:attribute name="bShowListView" type="boolean" default="false"/>
<!-- custom dropdown to display available list view options-->
<div class="slds-form-element">
<lightning:select name="select1" onchange="{!c.onPicklistChange}" label=" " class="customCls">
<aura:iteration items="{!v.listViewResult}" var="listView">
<option value="{!listView.developerName}">{!listView.label}</option>
</aura:iteration>
</lightning:select>
</div>
<!-- lightning List View : https://sforce.co/2Q4sebt-->
<aura:if isTrue="{!v.bShowListView}">
<lightning:listView objectApiName="{!v.objectInfo}"
listName="{!v.currentListViewName}"
rows="10"
showSearchBar="true"
showActionBar="false"
enableInlineEdit="true"
showRowLevelActions="false"
/>
</aura:if>
</aura:component>
CustomListViewController.js
({
doInit : function(component, event, helper) {
// call apex method to fetch list view dynamically
var action = component.get("c.listValues");
action.setParams({
"objectInfo" : component.get("v.objectInfo")
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var listViewResult = response.getReturnValue();
if(listViewResult.length > 0){
// set listViewResult attribute with response
component.set("v.listViewResult",listViewResult);
// set first value as default value
component.set("v.currentListViewName", listViewResult[0].developerName);
// rendere list view on component
component.set("v.bShowListView", true);
} }
else if (state === "INCOMPLETE") {
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
},
onPicklistChange: function(component, event, helper) {
// unrenders listView
component.set("v.bShowListView", false);
// get current selected listview Name
var lstViewName = event.getSource().get("v.value");
// set new listName for listView
component.set("v.currentListViewName", lstViewName);
// rendere list view again with new listNew
component.set("v.bShowListView", true);
},
})
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
access="global"
controller="listViewController">
<!-- call doInit js function on component load to fetch list view details-->
<aura:handler name="init" value="this" action="{!c.doInit}"/>
<!-- aura attributes -->
<aura:attribute name="listViewResult" type="string[]"/>
<aura:attribute name="objectInfo" type="string" default="Case"/>
<aura:attribute name="currentListViewName" type="string" />
<aura:attribute name="bShowListView" type="boolean" default="false"/>
<!-- custom dropdown to display available list view options-->
<div class="slds-form-element">
<lightning:select name="select1" onchange="{!c.onPicklistChange}" label=" " class="customCls">
<aura:iteration items="{!v.listViewResult}" var="listView">
<option value="{!listView.developerName}">{!listView.label}</option>
</aura:iteration>
</lightning:select>
</div>
<!-- lightning List View : https://sforce.co/2Q4sebt-->
<aura:if isTrue="{!v.bShowListView}">
<lightning:listView objectApiName="{!v.objectInfo}"
listName="{!v.currentListViewName}"
rows="10"
showSearchBar="true"
showActionBar="false"
enableInlineEdit="true"
showRowLevelActions="false"
/>
</aura:if>
</aura:component>
CustomListViewController.js
({
doInit : function(component, event, helper) {
// call apex method to fetch list view dynamically
var action = component.get("c.listValues");
action.setParams({
"objectInfo" : component.get("v.objectInfo")
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var listViewResult = response.getReturnValue();
if(listViewResult.length > 0){
// set listViewResult attribute with response
component.set("v.listViewResult",listViewResult);
// set first value as default value
component.set("v.currentListViewName", listViewResult[0].developerName);
// rendere list view on component
component.set("v.bShowListView", true);
} }
else if (state === "INCOMPLETE") {
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
},
onPicklistChange: function(component, event, helper) {
// unrenders listView
component.set("v.bShowListView", false);
// get current selected listview Name
var lstViewName = event.getSource().get("v.value");
// set new listName for listView
component.set("v.currentListViewName", lstViewName);
// rendere list view again with new listNew
component.set("v.bShowListView", true);
},
})
I have below link that has a developer documentation that could help:
>> https://developer.salesforce.com/docs/component-library/documentation/en/lwc/migrate_introduction
I hope this helps and in case if this comes handy can you please choose this as best answer so that it can be used by others in the future.
Regards,
Anutej