Cuir an luchd-nochd sgrìobhainn an sàs

Is e Document Viewer eileamaid-lìn a tha seo a leigeas le luchd-cleachdaidh teamplaidean a dheasachadh agus sgrìobhainnean ullachadh airson ainm-sgrìobhaidh — gu dìreach taobh a-staigh do thagraidh. Tha an stiùireadh seo a’ sealltainn mar a cheanglas tu e ris an API GraphQL gus sruth-obrach dànachd làn a thogail.

Sealladh-coitcheann

Tha amalachadh àbhaisteach a’ leantainn na ceumannan seo:

Dearbhaich — faigh tiocaid airson an luchd-nochd
Luchdaich suas teamplaid — tro API GraphQL
Dèan an luchd-nochd — cuir seachad an ID teamplaid agus an tiocaid
Greim air tachartasan — tha an luchd-nochd a’ cur a-mach tachartasan update agus validate fhad ‘s a tha an neach-cleachdaidh ag obair
**Cuir am faidhle uil' — gairm an send mutation leis an dàta com-pàirtiche agus dreuchd bhon luchd-nochd

Dearbhadh

Feumaidh an luchd-nochd tiocaid dligheach a gheibhear tron fheart token. Faodaidh do chùl-raon tiocaid SRP JWT no tiocaid goirid-beathaiche eileamaid fhaighinn bho generateComponentToken. Faic Widget Authorization mus ceangail thu an luchd-nochd ris an tagradh agad.

Modh Sgrìobhaidh — Cuir a-steach Sgrìobhainn Deiseil

Tha Modh Sgrìobhaidh freagarrach airson sruth-obrach far a bheil fios agad mu thràth cò na com-pàirtichean. Cha bhith an neach-cleachdaidh ach a’ cur raointean ainm-sgrìobhaidh agus a’ cur am faidhle air adhart.

1. Dèan an luchd-nochd

<ls-document-viewer
  id="viewer"
  templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
  token="YOUR_ACCESS_TOKEN"
  mode="compose"
  recipients='[
    {"email": "jane@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 1},
    {"email": "john@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 2}
  ]'
  filtertoolbox="signature|initials|date|text"
>
  <span slot="right-button">
    <button id="send-btn" disabled>Send</button>
  </span>
</ls-document-viewer>

2. Lean air adhart le dearbhadh agus IDan dreuchd

Fhad ‘s a bhios an neach-cleachdaidh a’ cur raointean ris, tha an luchd-nochd a’ cur a-mach tachartasan. Feumaidh tu dà rud bhon tachartasan sin:

validate — innse dhut a bheil na raointean uile a dhìth anns an teamplaid (co-dhiù aon ainm-sgrìobhainn gach com-pàirtiche)
update — a’ toirt seachad suidheachadh gnàthach an teamplaid, a’ gabhail a-steach roleId airson gach neach-phàirt nuair a tha feum agad air mapaidh dreuchd teamplaid

const viewer = document.getElementById('viewer');
const sendBtn = document.getElementById('send-btn');

let isValid = false;
const recipientRoles = {};

viewer.addEventListener('validate', (e) => {
  isValid = e.detail.valid;
  sendBtn.disabled = !isValid;
});

viewer.addEventListener('update', (e) => {
  const roles = e.detail.template.roles;
  roles.forEach((role) => {
    recipientRoles[role.signerIndex] = role.id;
  });
});

Tha an roleId bhon tachartas update a’ ceangal gach neach-ainm ris na raointean aca anns an teamplaid. Cuir ris nuair a tha do shruth cuiridh feum air an ceangal sin.

3. Cuir am faidhle air adhart

Nuair a bheir an neach-cleachdaidh briogadh air cuir air adhart, gairm an mutation send leis an dàta com-pàirtiche agus na IDan dreuchd a chaidh a ghlacadh bhon luchd-nochd:

sendBtn.addEventListener('click', async () => {
  const token = '<token-from-authentication-guide>';

  const recipients = [
    {
      firstName: 'Jane',
      lastName: 'Smith',
      email: 'jane@example.com',
      role: 'Signer',
      roleId: recipientRoles[1],
      signerIndex: 1,
      order: 1,
    },
    {
      firstName: 'John',
      lastName: 'Doe',
      email: 'john@example.com',
      role: 'Signer',
      roleId: recipientRoles[2],
      signerIndex: 2,
      order: 2,
    },
  ];

  const response = await fetch('https://graphql.uk.legalesign.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify({
      query: `mutation SendDocument {
        send(input: {
          groupId: "YOUR_GROUP_ID"
          templateId: "dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
          title: "Contract - Jane Smith & John Doe"
          recipients: ${JSON.stringify(recipients).replace(/"(\w+)":/g, '$1:')}
          sequentialSigning: true
        })
      }`,
    }),
  });

  const result = await response.json();
  const taskId = result.data.send;

  // Poll for completion
  console.log('Task started:', taskId);
});

Tha am mutation send a’ tilleadh ID gnìomh. Dèan sgrùdadh le bhith a’ cleachdadh an sgrùdadh task agus a’ toirt sùil air task.report.status gus an ruig e COMPLETED no FAILED airson dearbhadh gu bheil crìoch air cruthachadh an sgrìobhainn.

Modh Deasaiche — Cruthachadh Teamplaid

Tha Modh Deasaiche a’ toirt cothrom do luchd-cleachdaidh an eòlas deasachaidh teamplaid gu h-iomlan — a’ cur ris na dreuchdan, a’ cur raointean, a’ rèiteachadh roghainnean. Cleachd seo nuair a tha thu ag iarraidh gum buil luchd-cleachdaidh teamplaidean ath-chleachdaidh.

<ls-document-viewer
  id="editor"
  templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
  token="YOUR_ACCESS_TOKEN"
  mode="editor"
></ls-document-viewer>

Ann am Modh Deasaiche, bidh tachartas update a’ spreadhadh uair sam bith a bhios an teamplaid ag atharrachadh. Faodaidh tu seo a chleachdadh airson cumail sùil air staid an teamplaid no comharra sàbhalaidh a shealltainn:

const editor = document.getElementById('editor');

editor.addEventListener('update', (e) => {
  console.log('Template updated:', e.detail);
});

editor.addEventListener('validate', (e) => {
  console.log('Template valid:', e.detail.valid);
});

Tha atharrachaidhean air an teamplaid air an sàbhaladh gu fèin-obrachail leis an luchd-nochd — chan fheum thu gairm a dhèanamh air gin de na mutations GraphQL gus atharrachaidhean a shàbhaladh.

Amalachadh React

Tha an ròn React a’ toirt na h-aon ghnìomhan le làimhseachadh tachartasan stoidhle React:

import { useState } from 'react';
import { LsDocumentViewer } from 'legalesign-document-viewer-react';

const DocumentCompose = ({ templateId, recipients, token }) => {
  const [isValid, setIsValid] = useState(false);
  const [roleMap, setRoleMap] = useState({});

  const handleValidate = (e) => {
    setIsValid(e.detail.valid);
  };

  const handleUpdate = (e) => {
    const roles = e.detail.template.roles;
    const map = {};
    roles.forEach((role) => {
      map[role.signerIndex] = role.id;
    });
    setRoleMap(map);
  };

  const handleSend = async () => {
    const mappedRecipients = recipients.map((r, i) => ({
      ...r,
      roleId: roleMap[r.signerIndex],
      order: i + 1,
    }));

    const response = await fetch('https://graphql.uk.legalesign.com/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({
        query: `mutation SendDocument {
          send(input: {
            groupId: "YOUR_GROUP_ID"
            templateId: "${templateId}"
            title: "Document"
            recipients: ${JSON.stringify(mappedRecipients).replace(/"(\w+)":/g, '$1:')}
          })
        }`,
      }),
    });

    const result = await response.json();
    console.log('Task ID:', result.data.send);
  };

  if (!token) return null;

  return (
    <LsDocumentViewer
      templateid={templateId}
      token={token}
      mode="compose"
      recipients={JSON.stringify(recipients)}
      onValidate={handleValidate}
      onUpdate={handleUpdate}
    >
      <div slot="right-button">
        <button onClick={handleSend} disabled={!isValid}>
          Send
        </button>
      </div>
    </LsDocumentViewer>
  );
};

Fianais

Gus fianais a chur ri neach-ainm-sgrìobhaidh, seata roleType: "WITNESS" agus cleachd signerIndex aig clàr an neach-ainm-sgrìobhaidh pàrant + 100. Mar eisimpleir, tha signerIndex: 102 aig fianais airson neach-ainmsgrìobhaidh 2:

<ls-document-viewer
  mode="compose"
  recipients='[
    {"email": "signer@example.com", "firstname": "Alice", "lastname": "Jones", "signerIndex": 1},
    {"email": "signer2@example.com", "firstname": "Bob", "lastname": "Brown", "signerIndex": 2},
    {"email": "witness@example.com", "firstname": "Carol", "lastname": "White", "signerIndex": 102, "roleType": "WITNESS"}
  ]'
  ...
></ls-document-viewer>

Prìomh Bhun-bheachdan

Bun-bheachd luchd-nochd	Seòrsa GraphQL	Tuairisgeul
Feart `templateid`	`Template`	An teamplaid a tha ri dheasachadh no a’ cur ri chèile
Feart `recipients`	`RecipientInput`	Com-pàirtichean air an toirt gu modh sgrìobhaidh
`roleId` bhon tachartas `update`	`Role`	Ceanglaichean com-pàirtiche ri na raointean aige anns an teamplaid
Tachartas `validate`	—	A bheil na raointean uile a dhìth anns an teamplaid
Mutation `send`	`send`	A’ cur a-mach an sgrìobhainn às dèidh co-chruinneachadh
Feart `token`	—	Tiocaid bho dearbhadh
`mode="compose"`	—	Modh sìmplidh airson raointean a chuir agus cuir a-mach
`mode="editor"`	—	Modh deasaiche teamplaid gu tur
`experience` ann an cuir a-steach send	`Experience`	A’ cumail smachd air branndadh, post-d, agus duilleag ainm-sgrìobhaidh — faic Experiences explained

Document Viewer reference — iomradh làn air feartan agus tachartasan
send mutation — cuir faidhle uil
DocumentSendSettingsInput — structar slàn airson cuir a-steach send
Sending methods explained — cuir an gnìomh vs sendBatch vs sendBulk
Luchdaich suas faidhle mar theamplaid — luchdaich suas teamplaidean tro API
Dearbhadh — tagh modh dearbhaidh

Sealladh-coitcheann​

Dearbhadh​

Modh Sgrìobhaidh — Cuir a-steach Sgrìobhainn Deiseil​

1. Dèan an luchd-nochd​

2. Lean air adhart le dearbhadh agus IDan dreuchd​

3. Cuir am faidhle air adhart​

Modh Deasaiche — Cruthachadh Teamplaid​

Amalachadh React​

Fianais​

Prìomh Bhun-bheachdan​

Co-cheangailte​

Export This Article