•  

    Build Dynamic Paths Using Picklist Values Lightning Web Components Salesforce

    Hi All,

    In this article we will learn how to get   object information such as record type and based on that without writing even a single line of apex get the picklist values, and in turn demonstrate how to chain wire services using reactive properties.

    <!--
    
      @File Name          : DYNAMICPATH.html
    
      @Description        :
    
      @Author             : Somnath Sharma
    
      @Group              : 
    
      @Last Modified By   : Somnath Sharma
    
      @Last Modified On   : 10/24/2019, 12:10:50 PM
    
      @Modification Log   : 
    
      Ver       Date            Author              Modification
    
      1.0    10/11/2019   Somnath Sharma     Initial Version
    
    -->
    
    <template>
    
        <template if:true={pickListArrayIsPopulated}>
    
          <div class="slds-grid">
    
            <div class="slds-tabs--path" role="application">
    
              <ul class="slds-tabs--path__nav" role="tablist" style="background-color: #3dcd58;">
    
                <template for:each={objectPicklist.Stages} for:item="steps" for:index="index">
    
                  <li class="slds-tabs--path__item " role="presentation" key={steps}>
    
                    <p class="slds-tabs--path__link" aria-controls="content-path-1" aria-selected="false" tabindex="-1"
    
                      role="tab" aria-live="assertive">
    
                      <span class="slds-tabs--path__title" style="color: white;
    
                      font-weight: bolder;">{steps}</span>
    
                    </p>
    
                  </li>
    
                </template>
    
              </ul>
    
            </div>
    
          </div>
    
        </template>
    
      </template>
    
    
    /**
    
     * @File Name          : DYNAMICPATH.js
    
     * @Description        : 
    
     * @Author             : Somnath Sharma
    
     * @Group              : 
    
     * @Last Modified By   : Somnath Sharma
    
     * @Last Modified On   : 10/23/2019, 4:46:41 PM
    
     * @Modification Log   : 
    
     * Ver       Date            Author             Modification
    
     * 1.0    10/15/2019   Somnath Sharma     Initial Version
    
     **/
    
    import {
    
        LightningElement,
    
        track,
    
        wire,
    
        api
    
      } from 'lwc';
    
      import {
    
        getObjectInfo
    
      } from 'lightning/uiObjectInfoApi';
    
    
      import {
    
        getPicklistValues
    
      } from 'lightning/uiObjectInfoApi';
    
      import objectApiName from '@salesforce/schema/Account';
    
      import PICKLIST_FIELD from '@salesforce/schema/Account.Stages__c';
    
      export default class CjmVisualComponent extends LightningElement {
    
        recType;
    
        @api recordId;
    
        @wire(getObjectInfo, {
    
          objectApiName: objectApiName
    
        })
    
        getObjectInfo({
    
          data,
    
          error
    
        }) {
    
          if (data) {
    
            this.processData(data);
    
          } else if (error) {
    
            this.error = error;
    
          }
    
        }
    
        //get recordtype to pass so as to get picklist values based on recordtype Info
    
        processData(objectInfoData) {
    
          // const recId = this.recordId;
    
          const rtis = objectInfoData.recordTypeInfos;
    
          this.recType = Object.keys(rtis).find(rti => rtis[rti].name === 'Test Invoice');
    
        }
    
    
        @track objectPicklist = {
    
          Stages: []
    
        }; //master object for all operations
    
    
        @wire(getPicklistValues, {
    
          recordTypeId: '$recType',//provision request only when recordTypeId is availble --reactive Properties
    
          fieldApiName: PICKLIST_FIELD
    
        })
    
        getPicklistInfo({
    
          data,
    
          error
    
        }) {
    
          if (data) {
    
            this.processPickListLabels(data.values);
    
          } else if (error) {
    
            this.error = error;
    
          }
    
        }
    
        //controlling field values
    
        processPickListLabels(picklistArray) {
    
          picklistArray.forEach(item => {
    
            this.objectPicklist.Stages.push(item.label);
    
            window.console.log('this.objectPicklist.Stages', JSON.stringify(this.objectPicklist.Stages));
    
          });
    
        }
    
        //if picklist values came then render DOM
    
        get pickListArrayIsPopulated() {
    
          let hasData = false;
    
          if ( this.objectPicklist.Stages.length > 0) {
    
            hasData = true;
    
          }
    
          return hasData;
    
        }
    
      }
    <?xml version="1.0" encoding="UTF-8"?>
    
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="dynamicPaths">
    
        <apiVersion>47.0</apiVersion>
    
        <isExposed>true</isExposed>
    
        <targets>
    
            <target>lightning__RecordPage</target>
    
            <target>lightning__AppPage</target>
    
            <target>lightning__HomePage</target>
    
        </targets>
    
    </LightningComponentBundle>

     

     

Comments

  • (no comments)

Post Comments