•  

    Chain Wire Services in LWC

    We always have a requirement where we need to pass data from one function to be consumed by another function.The question here is how do we do it using wire services in LWC.We all know wire services are reactive.We call the wire service reactive in part because it supports reactive variables, which are prefixed with $. If a reactive variable changes, the wire service provisions new data. We say “provisions” instead of “requests” or “fetches” because if the data exists in the client cache, a network request may not be involved.The solution to the problem that I am trying to address lies in the use of reactive properties.

     In the below example i have chained two wire adapters .In the below example I have chained getObjectInfo and getPicklistValues wire services in a manner in which I leverage the data from getObjectInfo into getPicklistValues.
     
     In the wire adapter’s configuration object, prefix a value with $ to reference a property of the component instance. The $ prefix tells the wire service to treat it as a property of the class and evaluate it as this.propertyName. The property is reactive. If the property’s value changes, new data is provisioned and the component rerenders.
     
     In this example ,$objectapiname,$defaultRecordTypeId and $picklistfield is dynamic and reactive.Once we have the object info ,we have the default record type id which is passed to getPicklistValues  to fetch the picklist values dynamically.

    Author:Somnath Sharma

    <!--
    
      @File Name          : containerLWCTabComponent.html
    
      @Description        : 
    
      @Author             : Somnath Sharma
    
      @Group              : 
    
      @Last Modified By   : Somnath Sharma
    
      @Last Modified On   : 2/25/2020, 10:08:34 PM
    
      @Modification Log   : 
    
      Ver       Date            Author                  Modification
    
      1.0    2/25/2020   Somnath Sharma     Initial Version
    
    -->
    
    <template>
    
        <div class="slds-page-header">
    
            <div class="slds-page-header__row">
    
                <div class="slds-page-header__col-title slds-text-heading_large slds-text-align_center ">
    
                    {pageHeader}
    
                </div>
    
            </div>
    
        </div>
    
        <div class="slds-box slds-text-align_center slds-p-top_xx-small slds-m-top_xx-small">
    
            <c-poc-picklist-filters objectapiname="Account" picklistfield="Account.Industry"></c-poc-picklist-filters>
    
        </div>
    
    </template>
    
    /**
    
     * @File Name          : containerTabComponent.js
    
     * @Description        : 
    
     * @Author             : Somnath Sharma
    
     * @Group              : 
    
     * @Last Modified By   : Somnath Sharma
    
     * @Last Modified On   : 2/25/2020, 9:49:22 PM
    
     * @Modification Log   : 
    
     * Ver       Date            Author                 Modification
    
     * 1.0    2/25/2020   Somnath Sharma     Initial Version
    
     **/
    
    import {
    
        LightningElement
    
    } from 'lwc';
    
    
    export default class ContainerTabComponent extends LightningElement {
    
        pageHeader = 'Container LWC Tab Component';  
    
    }
    
    <!--
    
      @File Name          : pocPicklistFilters.html
    
      @Description        : 
    
      @Author             : Somnath Sharma
    
      @Group              : 
    
      @Last Modified By   : Somnath Sharma
    
      @Last Modified On   : 2/25/2020, 11:09:21 AM
    
      @Modification Log   : 
    
      Ver       Date            Author              Modification
    
      1.0    24/2/2020   Somnath Sharma     Initial Version
    
    -->
    
    <template>
    
      <div class="slds-page-header slds-page-header__col-title" style="font-size: large;
    
        font-weight: bold;font-style: italic;">Chaining Wire Services Example</div>
    
      <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
    
        <lightning-combobox placeholder='Select An Option' options={options} onchange={handleChange}>
    
        </lightning-combobox>
    
      </div>
    
    </template>
    
    /**
    
     * @File Name          : pocPicklistFilters.js
    
     * @Description        : 
    
     * @Author             : Somnath Sharma
    
     * @Group              : 
    
     * @Last Modified By   : Somnath Sharma
    
     * @Last Modified On   : 2/26/2020, 9:40:09 AM
    
     * @Modification Log   : 
    
     * Ver       Date            Author                 Modification
    
     * 1.0    24/2/2020   Somnath Sharma     Initial Version
    
     **/
    
    import {
    
        LightningElement,
    
        api,
    
        wire,
    
        track
    
    } from 'lwc';
    
    import {
    
        getObjectInfo
    
    } from 'lightning/uiObjectInfoApi';
    
    import {
    
        getPicklistValues
    
    } from 'lightning/uiObjectInfoApi';
    
    
    export default class PocPicklistFilters extends LightningElement {
    
    
        // to be passed from calling component
    
        @api objectapiname;
    
        @api picklistfield;
    
        defaultRecordTypeId; //Master  Record Type Id
    
        @track options = [];
    
    
        @wire(getObjectInfo, {
    
            objectApiName: '$objectapiname'
    
        })
    
        wiredObjectInfo({
    
            error,
    
            data
    
        }) {
    
            if (data) {
    
                console.log('ObjectInfo' + JSON.stringify(data));
    
                this.record = data.recordTypeInfos;
    
                this.defaultRecordTypeId = data.defaultRecordTypeId;
    
                this.error = undefined;
    
            } else if (error) {
    
                this.error = error;
    
                this.record = undefined;
    
            }
    
        }
    
    
        @wire(getPicklistValues, {
    
            recordTypeId: '$defaultRecordTypeId',
    
            fieldApiName: '$picklistfield'
    
        })
    
        wiredPicklistInfo({
    
            error,
    
            data
    
        }) {
    
            if (data) {
    
                console.log('picklist' + JSON.stringify(data.values));
    
                this.processPicklistRawJSON(data.values);
    
            } else if (error) {
    
                console.log(JSON.stringify(error));
    
            }
    
        }
    
    
        processPicklistRawJSON(_rawData) {
    
            this.options = _rawData.map(row => {
    
                return {
    
                    label: row.label,
    
                    value: row.value
    
                };
    
            });
    
            console.log('picklistprocessed' + JSON.stringify(this.options));
    
        }
    
    }
    

Comments

  • (no comments)

Post Comments