DocusignJS 库中的 mount() 方法需要 Id 属性，但 Salesforce 中的 LWC 不能有固定的 Id 值

Question

我正在尝试从 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 中嵌入签名体验是不可能的（或极其困难）。

Answer 1

mount()

方法是嵌入式签名特定方法的一部分，我们称之为聚焦视图（您可以在博客文章中找到）。 此方法要求您知道元素的 ID，因为 Docusign 将需要该 ID 才能设置聚焦视图嵌入式签名的独特 UI。 还有另一种进行嵌入式签名的方法，Docusign 只为您提供一个 URL，您可以随意使用该 URL。您可以只使用一个带有后端代码的按钮来生成此 URL，然后将用户发送到该网站（稍后它将重定向回您的网站）。 请注意，您还可以使用 Apex Toolkit，但它尚不支持 Focused View，因此，您再次需要使用“常规”嵌入式签名，而不是使用 Docusign.Js 库。