salesforce 如何访问lwc组件

2024-04-30 16:20
文章标签 访问 组件 salesforce lwc

本文主要是介绍salesforce 如何访问lwc组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

访问lwc有哪些途径呢?

    • Action Button
    • Tab
    • Aura use lwc
    • (拓展)如何区分是新建页面还是编辑页面

Action Button

xml文件中要配置tab<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" ><apiVersion>56.0</apiVersion><isExposed>true</isExposed><targets><target>lightning__RecordPage</target><target>lightning__AppPage</target><target>lightning__HomePage</target><target>lightning__Tab</target><target>lightning__RecordAction</target></targets>
</LightningComponentBundle>

在这里插入图片描述

Tab

在这里插入图片描述

xml文件中要配置tab

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" ><apiVersion>56.0</apiVersion><isExposed>true</isExposed><targets><target>lightning__RecordPage</target><target>lightning__AppPage</target><target>lightning__HomePage</target><target>lightning__Tab</target></targets>
</LightningComponentBundle>

Aura use lwc

在正常的lwc文件上,创建一个aura组件
lwc js文件中 @api recordId;

Aura cmp文件:<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,lightning:actionOverride,force:appHostable,lightning:isUrlAddressable,force:lightningQuickActionWithoutHeader,forceCommunity:availableForAllPageTypes,lightning:hasPageReference"><aura:handler name="change" value="{!v.pageReference}" action="{!c.reInit}"/><c:salesOrderConfirmLwc recordId="{!v.recordId}"></c:salesOrderConfirmLwc>
</aura:component>js文件:({init : function(component, event, helper) {//从url取门店的Id字符串,从VF传入var pageRef = component.get("v.pageReference");if(pageRef != undefined && pageRef != "" && pageRef != null){var orderIdStr = component.get("v.pageReference.state.c__recordId");console.log("orderIdStr"+JSON.stringify(orderIdStr));component.set("v.recordId" , orderIdStr);}},reInit : function(component, event, helper) {$A.get('e.force:refreshView').fire();  },
})可通过url带参进aura访问lwc:
/lightning/cmp/c__SalesOrderConfirmCmp?c__recordId={!Order__c.Id} 或者aura直接覆盖标准按钮访问lwc(一个aura可以同时覆盖新建跟编辑)
这个直接拿到recordId

(拓展)如何区分是新建页面还是编辑页面

import { CurrentPageReference, NavigationMixin } from 'lightning/navigation';
import { LightningElement, wire, track, api} from 'lwc';export default class salesOrderCreateLwc extends NavigationMixin(LightningElement) {@api recordId;@wire(CurrentPageReference) pageRef;connectedCallback() {console.log("pageRef->"+ JSON.stringify(this.pageRef));let actionName = this.pageRef.attributes.actionName;this.recordId = this.pageRef.attributes.recordId;console.log("actionName->"+actionName);console.log("recordId->"+this.recordId);if (actionName == 'edit') {}}
}

这篇关于salesforce 如何访问lwc组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/949337

相关文章

JavaWeb 中的 Filter组件详解

《JavaWeb中的Filter组件详解》本文详细介绍了JavaWeb中的Filter组件,包括其基本概念、工作原理、核心接口和类、配置方式以及常见应用示例,Filter可以实现请求预处理、响应后... 目录JavaWeb 中的 Filter 详解1. Filter 基本概念1.1 什么是 Filter1.

2025最新版Android Studio安装及组件配置教程(SDK、JDK、Gradle)

《2025最新版AndroidStudio安装及组件配置教程(SDK、JDK、Gradle)》:本文主要介绍2025最新版AndroidStudio安装及组件配置(SDK、JDK、Gradle... 目录原生 android 简介Android Studio必备组件一、Android Studio安装二、A

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2

linux ssh如何实现增加访问端口

《linuxssh如何实现增加访问端口》Linux中SSH默认使用22端口,为了增强安全性或满足特定需求,可以通过修改SSH配置来增加或更改SSH访问端口,具体步骤包括修改SSH配置文件、增加或修改... 目录1. 修改 SSH 配置文件2. 增加或修改端口3. 保存并退出编辑器4. 更新防火墙规则使用uf

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

通过配置nginx访问服务器静态资源的过程

《通过配置nginx访问服务器静态资源的过程》文章介绍了图片存储路径设置、Nginx服务器配置及通过http://192.168.206.170:8007/a.png访问图片的方法,涵盖图片管理与服务... 目录1.图片存储路径2.nginx配置3.访问图片方式总结1.图片存储路径2.nginx配置

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步:OData实例创建1.1 OData.newInstance() 详细分析1.1.1

WinForm跨线程访问UI及UI卡死的解决方案

《WinForm跨线程访问UI及UI卡死的解决方案》在WinForm开发过程中,跨线程访问UI控件和界面卡死是常见的技术难题,由于Windows窗体应用程序的UI控件默认只能在主线程(UI线程)上操作... 目录前言正文案例1:直接线程操作(无UI访问)案例2:BeginInvoke访问UI(错误用法)案例

MySQL中的InnoDB单表访问过程

《MySQL中的InnoDB单表访问过程》:本文主要介绍MySQL中的InnoDB单表访问过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、环境3、访问类型【1】const【2】ref【3】ref_or_null【4】range【5】index【6】