Sleamhnú go príomh-ábhar

Comhtháthú an Amharála Doiciméad

Is comhéadan gréasáin é an Amharála Doiciméad a ligeann d’úsáideoirí scripteacha a chur in eagar agus doiciméid a ullmhú le síniú — díreach laistigh de do fheidhmchlár. Léireoidh an treoir seo conas é a nascadh leis an API GraphQL chun sreabhadh oibre sínithe iomlán a thógáil.

Forbhreathnú​

Leanann comhtháthú tipiciúil na céimeanna seo:

  1. Dheimhnigh — faigh ticéad don amharálaí
  2. Uaslódáil teimpléad — trína API GraphQL
  3. Rindreáil an amharálaí — pasáil ID an teimpléid agus an ticéid
  4. Glac ócáidí — astaíonn an t-amharálaí ócáidí update agus validate agus an t-úsáideoir ag obair
  5. Seol an doiciméad — glao ar an athrú staidrimh send leis na sonraí faighteora agus róil ón amharálaí

Dheimhniú​

Caithfidh ticéad bailí a bheith á chur isteach san airíonna token den amharálaí. Is féidir leis an gcúlra tacú le JWT SRP nó ticéad cuid ghearrbhána ó generateComponentToken. Féach ar Údarású Widget sula gcuirtear an t-amharálaí i bhfeidhm i do fheidhmchlár.

Mód Comhdhlúthaigh — Seol Doiciméad Réamhthógtha​

Tá mód comhdhlúthaigh don sreafa oibre ina bhfuil a fhios ag do chóras cé na faighteoirí atá ann cheana. Cuirtear réimsí síniú isteach agus déantar an seoladh.

1. Rindreáil an t-amharálaí​

<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. Rianú bailíochtúcháin agus IDanna róil​

De réir mar a chuireann an t-úsáideoir réimsí leis, astaíonn an t-amharálaí ócáidí. Tá dhá rud uait ó na himeachtaí seo:

  • validate — insíonn sé duit an bhfuil na réimsí riachtanacha go léir san teimpléad (ar a laghad, ceann amháin do gach faighteoir)
  • update — soláthraíonn sé staid reatha an teimpléid, lena n-áirítear roleId do gach rannpháirtí nuair is gá léiriú róil teimpléid a dhéanamh
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;
  });
});

Cumasaíonn an roleId ón ócáid update faighteoirí a nascadh lena gcuid réimsí ar an teimpléad. Cuir isteach é nuair a theastaíonn an léiriú seo le linn do shrutha seolta.

3. Seol an doiciméad​

Nuair a chliceálann an t-úsáideoir seol, déan glao ar an athrú staidrimh send leis na sonraí faighteora agus na IDanna róil a grabadh ón amharálaí:

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);
});

Filltear ID tasc ón athrú send. Déan fiosrúchán ar an gceist task agus déan monatóireacht ar task.report.status go dtí go sroicheann sé COMPLETED nó FAILED chun a dhearbhú go bhfuil cruthú an doiciméid críochnaithe.

Mód Eagarthóra — Cruthú Teimpléid​

Tabhraíonn mód eagarthóra taithí iomlán eagarthóireachta teimpléid d’úsáideoirí — róil a chur leis, réimsí a chur, roghanna a chumrú. Úsáid é seo nuair atá tú ag iarraidh go dtógfaidh úsáideoirí teimpléid inathúsáidte.

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

I mód eagarthóra, lasann an ócáid update gach uair a athraíonn an teimpléad. Is féidir leat é a úsáid chun staid an teimpléid a rianú nó taispeáint eolais sábhála:

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);
});

Sábháiltear athruithe teimpléid go huathoibríoch ag an amharálaí — níl ort glaoch a dhéanamh ar aon athrú GraphQL chun na heagarthóireachtaí a chothabháil.

Comhtháthú React​

Cuireann an timfhilleadh React an fheidhmiúlacht chéanna ar fáil le láimhseáil ócáidí i stíl 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>
  );
};

Fianaiseoirí​

Chun fianaiseoir a chur le sínitheoir, socraigh roleType: "WITNESS" agus úsáid signerIndex nach lú ná innéacs an phríomhshínitheora + 100. Mar shampla, tá signerIndex: 102 ag fianaiseoir don sínitheoir 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>

Coincheapa lárnacha​

Coincheap AmharálaíCineál GraphQLCur Síos
Airíonna templateidTemplateAn teimpléad a bhfuil an eagarthóireacht nó an comhdhlúthiú á dhéanamh air
Airíonna recipientsRecipientInputFaighteoirí a chuirtear isteach i mód comhdhlúthaigh
roleId ón ócáid updateRoleNascann faighteoir lena réimsí ar an teimpléad
Ócáid validate—An bhfuil na réimsí riachtanacha go léir san teimpléad
Athrú staidrimh sendsendSeolann sé an doiciméad tar éis an chomhdhlúthaigh
Airíonna token—Ticéad ó dheimhniú
mode="compose"—Mód sruthlínithe le haghaidh réimsí a chur isteach agus seolta
mode="editor"—Mód iomlán eagarthóireachta teimpléid
experience san ionchur seoltaExperienceRialáil brandaíochta, ríomhphoist, agus leathanach sínithe — féach ar Mínithe ar Taithí

Export This Article

Save a copy of this page as PDF or plain text.