本篇可参看:

Salesforce LWC学习(六) @salesforce & lightning/ui*Api Reference

salesforce零基础学习(八十七)Apex 中Picklist类型通过Control 字段值获取Dependent List 值

拥有dependence的picklist在项目中经常出现,我们在项目中需要展示级联的picklist展示。Salesforce lwc中可以通过wire adapter + combobox来实现级联,步骤和代码如下。

1. 在Account中声明两个字段,Controlling_Picklist__c以及Master_Picklist__c两个picklist字段,其中Master_Picklist作为主

2. 通过getObjectInfo的wire adapter获取record type等信息,然后通过getPicklistValuesByRecordType可以获取表中所有的picklist的metadata信息。

这里先可以看一下picklist metadata信息如下。我们在第二个链接中可以看到dependence picklist通过valid for进行了关联,所以我们成功的关键也是通过valid for进行了关联。

{
"picklistFieldValues": {
"Controlling_Picklist__c": {
"controllerValues": {
"M2": 1,
"M3": 2,
"M1": 0
},
"values": [
{
"validFor": [
0
],
"label": "M1->D1",
"value": "M1->D1",
"attributes": null
},
{
"validFor": [
0
],
"label": "M1->D2",
"value": "M1->D2",
"attributes": null
},
{
"validFor": [
1
],
"label": "M2->D1",
"value": "M2->D1",
"attributes": null
},
{
"validFor": [
1
],
"label": "M2->D2",
"value": "M2->D2",
"attributes": null
}
],
"defaultValue": null,
"url": "/services/data/v47.0/ui-api/object-info/Account/picklist-values/0120I000000OaFoQAK/Controlling_Picklist__c"
},
"Master_Picklist__c": {
"controllerValues": {},
"values": [
{
"validFor": [],
"label": "M1",
"value": "M1",
"attributes": null
},
{
"validFor": [],
"label": "M2",
"value": "M2",
"attributes": null
},
{
"validFor": [],
"label": "M3",
"value": "M3",
"attributes": null
}
],
"defaultValue": null,
"url": "/services/data/v47.0/ui-api/object-info/Account/picklist-values/0120I000000OaFoQAK/Master_Picklist__c"
}
}
}

代码实现如下:

dependentPicklistInLWC.html:使用combobox展示两个下拉列表,设置相关的事件处理

<template>
<lightning-card title="Custom Dependent Picklist using Lightning Web Components"><br/>
<lightning-layout>
<lightning-layout-item padding="around-small" flexibility='auto' size='6'>
<lightning-combobox label="master picklist"
name="master"
onchange={handleMasterPicklistChange}
options={masterValues}
placeholder="--None--"
value={selectedMasterValue}></lightning-combobox>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility='auto' size='6'>
<lightning-combobox label="controlling picklist"
name="controlling"
onchange={handleControllingPicklistChange}
options={controllingValues}
placeholder="--None--"
value={selectedControllingValue}
></lightning-combobox>
</lightning-layout-item> </lightning-layout>
</lightning-card>
</template>

dependentPicklistInLWC.js:使用getObjectInfo以及getPicklistValuesByRecordType去进行Picklist的select option的构造,这里的关键就是理解好valid for

/* eslint-disable no-console */
import { LightningElement, wire, track } from 'lwc';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account'; export default class DependentPickListInLWC extends LightningElement { //存储controlling picklist的所有的值
@track masterValues = [];
//存储dependent picklist的所有的值
@track controllingValues = [];
//选择的controlling picklist 的值
@track selectedMasterValue;
//选择的dependent picklist的值
@track selectedControllingValue; @track error;
//用来记录master picklist中的 value -> valid for的列表集合
master2ValidForValues;
//用来记录controlling picklist的value以及valid for等信息的列表集合
controllingValuesWithValidFor = []; // 获取account 的schema info
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
objectInfo; // 获取 control picklist的值并且组装dependent picklist
@wire(getPicklistValuesByRecordType, { objectApiName: ACCOUNT_OBJECT, recordTypeId: '$objectInfo.data.defaultRecordTypeId'})
countryPicklistValues({error, data}) {
if(data) {
this.error = null;
let masterOptions = []; data.picklistFieldValues.Master_Picklist__c.values.forEach(key => {
masterOptions.push({
label : key.label,
value: key.value
})
}); this.masterValues = masterOptions; let controllingOptions = []; this.master2ValidForValues = data.picklistFieldValues.Controlling_Picklist__c.controllerValues;
//用来记录controlling picklist的value以及valid for等信息的列表集合 Picklist values
this.controllingValuesWithValidFor = data.picklistFieldValues.Controlling_Picklist__c.values;
this.controllingValuesWithValidFor.forEach(key => {
controllingOptions.push({
label : key.label,
value: key.value
})
}); this.controllingValues = controllingOptions;
}
else if(error) {
this.error = JSON.stringify(error);
}
} handleMasterPicklistChange(event) {
//set selected master Value
this.selectedMasterValue = event.target.value;
this.selectedControllingValue = '';
let controllingList = []; if(this.selectedMasterValue) {
//通过valid for进行mapping,匹配的放进controlling list中
this.controllingValuesWithValidFor.forEach(conValues => {
if(conValues.validFor.some(item => item === this.master2ValidForValues[this.selectedMasterValue])) {
controllingList.push({
label: conValues.label,
value: conValues.value
})
}
}) this.controllingValues = controllingList;
}
} handleControllingPicklistChange(event) {
this.selectedControllingValue = event.target.value;
}
}

效果展示:当选择了左侧的master以后,右侧的controlling值便会动态改变。

当然,我们使用这个大前提是当前的object支持getObjectInfo等wire adapter,如果不支持我们需要通过后台schema方式去搞定,比如Task/Event对象并不支持,我们就没法通过前端搞定,那样就只能通过第二个链接中的方式去从后台去构建进行获取。

总结:篇中主要介绍了可以使用wire adapter情况下dependence picklist的实现。篇中有错误地方欢迎指出,有不懂的欢迎留言。

Salesforce LWC学习(十二) Dependence Picklist实现的更多相关文章

  1. Salesforce LWC学习(十五) Async 以及 Picklist 公用方法的实现

    本篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) https://developer.salesfo ...

  2. Salesforce LWC学习(十六) Validity 在form中的使用浅谈

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation h ...

  3. Salesforce LWC学习(十) 前端处理之 list 处理

    本篇参看:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array list是我们经 ...

  4. Salesforce LWC学习(十八) datatable展示 image

    本篇参看: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentati ...

  5. Salesforce LWC学习(十四) Continuation进行异步callout获取数据

    本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.apex_continua ...

  6. Salesforce LWC学习(十九) 针对 lightning-input-field的label值重写

    本篇参考: https://salesforcediaries.com/2020/02/24/how-to-override-lightning-input-field-label-in-lightn ...

  7. Salesforce LWC学习(四十) dynamic interaction 浅入浅出

    本篇参考: Configure a Component for Dynamic Interactions in the Lightning App Builder - Salesforce Light ...

  8. Salesforce LWC学习(三十) lwc superbadge项目实现

    本篇参考:https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist 我们做lwc的学习时 ...

  9. Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...

  10. (转)SpringMVC学习(十二)——SpringMVC中的拦截器

    http://blog.csdn.net/yerenyuan_pku/article/details/72567761 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter, ...

随机推荐

  1. npm config get prefer-offline

    npm config get prefer-offline

  2. 第一课 基本的DOS命令

    常见的DOS命令 1.#切换盘符 F: 2.#查看当前目录下所有文件 dir 3.#切换目录 cd change directory cd ..返回上一级 4.#清理屏幕 cls {clear scr ...

  3. Go的目录及其含义

    运行 go env 找到go的运行目录,可以看到下边有三个文件: bin存放编译后的可执行文件(go install 自动创建),pkg存放编译后的包文件(go install 自动创建),src存放 ...

  4. 03php拉取服务器信息并生成json

    <?php$servername = "服务器";$username = "用户名";$password = "密码";$dbname ...

  5. 【JSON】Python读取JSON文件报错json.decoder.JSONDecodeError的问题

    报错 json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes: line * column * ...

  6. Calendar设定月份时要注意日期

    先看下代码 public static void main(String[] args) { int dataMonth = 4; DateFormat dateFormat = new Simple ...

  7. OO课程第二阶段(实验和期中试题)总结Blog2

    OO课程第二阶段(实验和期中试题)总结Blog2 前言:学习OOP课程的第二阶段已经结束了,在此进行对于知识点,题量,难度的个人看法. 学习OOP课程的第二阶段已经结束了,较第一次阶段学习难度加大,学 ...

  8. WebApi 下载三维zip文件并预览

    // 异步加载 const LoadObj = async (key?: string) => { LoadState.value = true var objStr, mtlStr var i ...

  9. CentOS基本命令手册

    一.磁盘使用情况 两个命令df .du结合比较直观 df -h #查看整台服务器的硬盘使用情况 du -sh * #查看每个文件夹的大小 二.tar 用法 压缩 tar tar -czvf test. ...

  10. Blog作业02

    目录 前言 设计与分析 踩坑心得 改进建议 总结 前言 这三次作业的题目数量虽然增多,但是在题量加大的同时,这三次作业集的难度也相应的下去了,难度降低的同时也保证了作业集题目的质量.这三次的作业的知识 ...