salesforce零基础学习(九十五)lightning out

随着salesforce对lightning的推进,越来越多的项目基于lightning开发,导致很多小伙伴可能都并不了解classic或者认为不需要用到classic直接就开始了lightning的开发。其实有精力了解classic的使用还是很有必要的,因为lightning还在不断的优化中,可能有一部分还需要使用classic的功能来实现或者来协助实现,比如list view的list button目前只能使用visualforce page搭配lightning component。那么vf 如何去引用已经弄好的lightning component呢,我们接下来使用一个demo去简单了解一下。

需求:在lightning环境下的contact list view定义一个自定义的list button,实现使用pop up方式弹出所勾选的数据列表( lwc + aura实现)。

 实现步骤:

1.构建LwC component画UI;

2. 构建aura component包含lwc component;

3. 创建aura single APP继承ltng:outApp(包含SLDS样式库)/ltng:outAppUnstyled(不包含SLDS样式库),使用aura:dependency标签的resource属性引入2步骤中的aura component;

4. 创建vf page,使用$Lightning.use引入上面的aura single APP,然后动态创建component显示即可。

Talk is cheap,show me the code.下面根据上面的需求进行开发。

1. ContactListController.cls:根据选择的contact id list进行搜索数据,因为前端使用wire装载方式,所以方法声明必须使用cacheable=true

public with sharing class ContactListController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> fetchContactListByIDs(List<String> idList){
        return [SELECT Id,Name
                FROM Contact
                WHERE Id IN :idList];
    }
}

2. contactListForLwc.html:用来展示一个popup modal,modal中展示一个table数据

<template>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <!-- modal header start -->
            <header class="slds-modal__header">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                <lightning-icon icon-name="utility:close"
                    alternative-text="close"
                    variant="inverse"
                    size="small" ></lightning-icon>
                <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Selected Contact List</h2>

            </header>
            <!-- modal body start -->
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th class="" scope="col">
                                <div class="slds-truncate">Contact Id</div>
                            </th>
                            <th class="" scope="col">
                                <div class="slds-truncate">Contact Name</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <template if:true={contactList.data}>
                            <template for:each={contactList.data} for:item="contact">
                                <tr key={contact.Id}>
                                    <td>{contact.Id}</td>
                                    <td> {contact.Name}</td>
                                </tr>
                            </template>
                        </template>
                        <template if:false={contactList.data}>
                            <tr>
                                <td colspan="2">List View is not contains any data</td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</template>

contactListForLwc.js:调用后台获取列表

import { LightningElement, api, wire } from ‘lwc‘;
import fetchContactListByIDs from ‘@salesforce/apex/ContactListController.fetchContactListByIDs‘;
export default class ContactListForLwc extends LightningElement {
    @api contactIdList;

    @wire(fetchContactListByIDs,{idList:‘$contactIdList‘})
    contactList;

}

3. ContactListForAura.cmp:用于包一层lwc,用来在single app中使用,因为目前的动态创建component只能aura,所以lwc需要套一层。

<aura:component>
    <aura:attribute name="selectedIds" type="List" default="" />
    <c:contactListForLwc contactIdList="{!v.selectedIds}"/>
</aura:component>    

4. ContactListApp.app:创建single app,设置access 为GLOBAL,因为需要使用SLDS的样式,这里extends为ltng:outApp,然后通过aura:dependency引入想要渲染的子component

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:ContactListForAura"/>
</aura:application>    

5. ContactListPage.page:用于声明contact list类型,然后使用$Lightning.user实现lightning out的功能。这里需要有几点小小的注意:

  • 需要设置recordSetVar,这样才可以使用到list view的list button中;
  • 需要引入apex:includeLightning,最好放在引入的第一行;
  • javascript中使用GETRECORDIDS函数来获取列表中选择的数据选项,在vf page中需要使用{!selected}来获取,因为在js中如果使用‘‘方式扩上他返回的是string类型,不扩上直接在list引用会报错,所以这里使用apex:repeat方式将其迭代在一个list中;
  • 使用$lightning.use引入一个single app,然后在动态创建里面的auraDependency的component,$lightning.use可以多次使用,但是需要多次引入不同的single app,详细的使用自行查看文档。
<apex:page standardController="Contact" recordSetVar="Contacts" showHeader="false">
    <apex:includeLightning/>

    <div id="lightning" />
    <script>
        var selectedList = [];
    </script>
    <apex:repeat value="{!selected}" var="selectedItem">
        <script>
            selectedList.push(‘{!selectedItem}‘);
        </script>
    </apex:repeat>
    <script>
        if(selectedList.length == 0) {
            window.location.href = ‘/003‘;

        } else {
            $Lightning.use("c:ContactListApp", function() {
            $Lightning.createComponent("c:ContactListForAura",
                {selectedIds : selectedList},
                ‘lightning‘,
                function(cmp) {
                    console.log("component created");
                }
                );
            });
        }

    </script>
</apex:page>

6. 创建contact的list button,然后类型选择 list button,选择指定的vf page,然后在search layout中的list view中将定义的拖拽即可。

效果展示:

1.Contact列表勾选了两条数据,然后点击按钮

2. 弹出页面展示选择的两条数据。

总结:篇中通过简单的例子展示了lightning out实现以及list view button关于vf page如何引入lightning component / lightning web component。缺点是使用vf page无法实现类似action的效果在本页pop up,查找了很多资料也没有实现,有好的实现方式欢迎留言。lightning out实际场景不仅仅demo中的使用场景,详细的lightning out知识以及限制自行查看。篇中有错误地方欢迎指出,有不懂地方欢迎留言。

原文地址:https://www.cnblogs.com/zero-zyq/p/12121976.html

时间: 2024-10-13 00:16:57

salesforce零基础学习(九十五)lightning out的相关文章

salesforce 零基础学习(五十二)Trigger使用篇(二)

第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. 十七篇链接:salesforce 零基础学习(十七)Trigger用法 有的时候对于sObject的trigger处理复杂的情况下,比如一个sObject的before update要实现功能1,2.....n功能情况下,Handler中需要在before update写实现功能1--n的代码.然而

salesforce 零基础学习(五十三)多个文件生成一个zip文件(使用git上封装的代码)

此篇参考git代码:https://github.com/pdalcol/Zippex 学习salesforce可以访问一个朋友的网站:https://www.xgeek.net 首先感谢git上提供代码的大神,学到了新的知识.salesforce不像java提供生成Zip文件的类库,通过git上copy的代码可以实现此功能,具体的使用方法以及API可以查看上方git链接. 概述:实例模拟三个上传组件,加上一个下载Zip包按钮,本地选择需要上传的文件,点击按钮后便会下载成一个压缩文件,压缩文件中

salesforce 零基础学习(五十五)java通过SOAP方式定时访问某个文件然后插入到sObject中

项目源码:https://github.com/zhangyueqidlmu/SOAP-Access-SFDC.git 项目背景:salesforce端相关数据需要其他系统提供,其他系统可以提供相关数据的CSV文件.使用SOAP方式java代码定时将文件读取解析并插入到salesforce相关数据表中. 项目实现功能:固定时间访问指定目录下的csv文件,解析csv文件到List中并将records插入到Goods(自定义的sObject)表中,并将此定时任务放到计算机的服务中,防止误操作关闭了命

salesforce零基础学习(八十二)审批邮件获取最终审批人和审批意见

项目中,审批操作无处不在.配置审批流时,我们有时候会用到queue,related user设置当前步骤的审批人,审批人可以一个或者多个.当审批人有多个时,邮件中获取当前记录的审批人和审批意见就不能随便的取一个审批人了,有以下方式针对不同的场景可以获取到当前记录的最终审批人以及审批意见. 邮件内容使用以下几种方式实现: 1.代码里面实现邮件发送 2.email template(text/html/custom) 3.visualforce emailTemplate 对发送邮件方式不清楚的,可

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

注:本篇解决方案内容实现转自:http://mysalesforceescapade.blogspot.com/2015/03/getting-dependent-picklist-values-from.html 群里面有个小伙伴问了一个关于两个有Dependence关系的Picklist字段如何在Apex中通过control字段的值获取到Dependence字段的值,针对Salesforce配置来说,我们很好配置出两个Dependence字段的关系,通过点击设置一下include关系即可.如

salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的使用此标签进行解析附件内容,后台只要声明String类型变量用来存储附件名称,Blob类型变量用来存储附件的内容即可. 但是当我们的项目整体使用第三方的前端框架,例如VUE或者angular等前端框架时,有时使用apex:inputFile反而不是很方便,需要用到html的原生的附件上传的标签<inpu

salesforce零基础学习(九十二)使用Ant Migration Tool 实现Metadata迁移

我们在做项目时经常会使用changeset作为部署工具,但是某些场景使用changeset会比较难操作,比如当我们在sandbox将apex class更改名字想要部署到生产的org或者其他环境的org,使用changeset是没法实现的,这个时候我们需要使用Ant Migration Tool还是更好的. salesforce基于metadata进行管理,Ant Migration Tool 是一个基于 Java/Ant的命令行工具用于将metadata从本地迁移至Sales Org. Mig

salesforce零基础学习(八十五)streaming api 简单使用(接近实时获取你需要跟踪的数据的更新消息状态)

Streaming API参考链接: https://trailhead.salesforce.com/en/modules/api_basics/units/api_basics_streaming https://resources.docs.salesforce.com/210/latest/en-us/sfdc/pdf/api_streaming.pdf 背景:工作中我们有可能会有这样相关的需求:某些数据很重要,需要实时监控是否有变化,或者某些数据在其他的平台有集成.如果有变化,不刷新页

salesforce 零基础学习(二十五)PickList简单联动操作

有的时候,项目需要一些联动的操作,比如省和市之间的联动,不同的省应该显示不同的城市. 操作步骤如下: 1.新建provice字段,并且初始化相关的值 2.新建city字段,并且初始化相关的值 3.在Province的Field Dependencies 处点击New按钮,将其与city字段关联 4.选择字段间的依赖关系,其中Controlling Field为主字段,Dependent Field依赖于主,这里选择城市依赖于省,点击Continue继续 5.按照上述规则将相关省市配置,选择需要的