我正在尝试从 LWC 在 Salesforce Experience Cloud 站点内构建嵌入式签名体验,并且我尝试按照文档构建可以执行相同操作的 LWC。这是相关的 LWC 代码 -
import { LightningElement } from 'lwc';
import sendEnvelope from '@salesforce/apex/DocusignEmbeddedSigningController.sendEnvelope';
import getEmbeddedSigningUrl from '@salesforce/apex/DocusignEmbeddedSigningController.getEmbeddedSigningUrl';
import docusignjs from "@salesforce/resourceUrl/docusignjs";
import { loadScript } from "lightning/platformResourceLoader";
export default class DocusignEmbeddedSigning extends LightningElement {
template = '2d749f04-1bdb-4b70-9cef-64ab148c6ba0';
description = 'Embedded Signing';
renderedCallbackExecuted = false;
async renderedCallback() {
if (this.renderedCallbackExecuted) {
return;
}
this.renderedCallbackExecuted = true;
await Promise.all([
loadScript(this, docusignjs)
]);
let envelopeId = await sendEnvelope({template: this.template, description: this.description});
let signingUrl = await getEmbeddedSigningUrl({envId: envelopeId, url: window.location.href});
let docuSignObj = await window.DocuSign.loadDocuSign();
const signing = docuSignObj.signing({
url: signingUrl,
displayFormat: 'focused',
style: {
/** High-level variables that mirror our existing branding APIs. Reusing the branding name here for familiarity. */
branding: {
primaryButton: {
/** Background color of primary button */
backgroundColor: '#333',
/** Text color of primary button */
color: '#fff',
}
},
/** High-level components we allow specific overrides for */
signingNavigationButton: {
finishText: 'You have finished the document! Hooray!',
position: 'bottom-center'
}
}
});
signing.on('ready', (event) => {
console.log('UI is rendered');
});
signing.on('sessionEnd', (event) => {
/** The event here denotes what caused the sessionEnd to trigger, such as signing_complete, ttl_expired etc../ **/
console.log('sessionend', event);
});
signing.mount(this.template.querySelector('.docusign-agreement-container'));
}
}
问题出在
sigining.mount()
方法上。根据文档(https://www.docusign.com/blog/developers/15-minutes-to-better-ux-enhancing-embedded-signing-focused-view和https://developers.docusign。 com/docs/esign-rest-api/how-to/request-signature-focused-view/),此方法应该接收基于 Id 的选择器。
但不幸的是,LWC 框架不允许开发人员在 HTML 元素的 ID 属性中提供他们的值,并将用动态生成的值覆盖它们(这就是为什么我尝试使用
this.template.querySelector
来使用基于 CSS 的选择器)
使用上述方法会出现以下错误 -
[n.template.querySelector is not a function]
然后我尝试了这个 -
signing.mount('.docusign-agreement-container');
,现在我在浏览器控制台中得到的错误是这个 - [DocuSign JS] Container element not found: ".docusign-agreement-container"
问题 - mount() 方法是否可以接收 Id 属性以外的不同参数? 否则,使用 DocuSignJS 库在 Salesforce Experience Cloud 中嵌入签名体验是不可能的(或极其困难)。
mount()
方法是嵌入式签名特定方法的一部分,我们称之为聚焦视图(您可以在博客文章中找到)。
此方法要求您知道元素的 ID,因为 Docusign 将需要该 ID 才能设置聚焦视图嵌入式签名的独特 UI。
还有另一种进行嵌入式签名的方法,Docusign 只为您提供一个 URL,您可以随意使用该 URL。您可以只使用一个带有后端代码的按钮来生成此 URL,然后将用户发送到该网站(稍后它将重定向回您的网站)。
请注意,您还可以使用 Apex Toolkit,但它尚不支持 Focused View,因此,您再次需要使用“常规”嵌入式签名,而不是使用 Docusign.Js 库。