Sleamhnú go príomh-ábhar

Comhtháthaigh an Breathnóir Doiciméad

Is eilimint ghréasáin é an Document Viewer a ligeann do úsáideoirí teimpléid a chur in eagar agus doiciméid a ullmhú le síniú — díreach laistigh d’fheidhmchlár agat. Taispeánann 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 a leanas:

  1. Déan fíordheimhniú — faigh ticéad don breathnóir
  2. Uaslódáil teimpléad — tríd an API GraphQL
  3. Léiriú an bhreathnóra — pasáiste an ID teimpléid agus an ticéad
  4. Gabh imeachtaí — scaoileann an breathnóir imeachtaí update agus validate agus an úsáideoir ag obair
  5. Seol an doiciméad — glaoigh ar an mutation send leis na sonraí faighteora agus ról ón mbreathnóir

Fíordheimhniú​

Tá ticéad bailí ag teastáil ón mbreathnóir a chaithfear a chur ar fáil don tréith token. Féach ar Authenticate with the API sula nascfaidh tú an breathnóir isteach i do fheidhmchlár.

Mód Cumadóireachta — Seol Doiciméad Réamhthógtha​

Is mód é an mód cumadóireachta do shreabhadh oibre ina bhfuil a fhios ag do chóras cheana féin cé hiad na faighteoirí. Ní gá don úsáideoir ach réimsí sínithe a chur agus a sheoladh.

1. Léiriú an bhreathnóra​

<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ú fíordheimhniú agus IDanna ról​

De réir mar a chuireann an t-úsáideoir réimsí leis, scaoileann an breathnóir imeachtaí. Tá dhá rud uait ó na himeachtaí seo:

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

Tá an roleId óna imeacht update ina mheaitseáil idir gach faighteoir agus a réimsí ar an teimpléad. Cuimsigh é nuair is gá an léargas sin i do chúrsa seolta.

3. Seol an doiciméad​

Nuair a chliceálann an t-úsáideoir seol, glaoigh ar an mutation send leis na sonraí faighteora agus IDanna ról a ghabhadh ón mbreathnóir:

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

Fillfidh an mutation send ID tasc. Déan an fiosrúchán task a pholláil agus monatóir 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óireachta — Cruthú Teimpléid​

Cuireann an mód eagarthóireachta ar chumas úsáideoirí an taithí iomlán eagarthóireachta teimpléid a fháil — róil a chur leis, réimsí a chur isteach, roghanna a chumrú. Bain úsáid as seo nuair atá tú ag iarraidh ar úsáideoirí teimpléid athúsáidte a thógáil.

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

Sa mhód eagarthóireachta, scaoileann an imeacht update gach uair a athraíonn an teimpléad. Is féidir leat é seo a úsáid chun staid an teimpléid a rianú nó taispeáint innéacs 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álann an breathnóir athruithe teimpléid go huathoibríoch — níl ort glaoch a dhéanamh ar aon mutation GraphQL chun eagarthóireachtaí a stóráil.

Comhtháthú React​

Cuireann an iarmhéid React an fheidhmiúlacht chéanna ar fáil le láimhseáil imeachtaí ar 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 leis do sínitheoir, socraigh roleType: "WITNESS" agus bain úsáid as signerIndex a bhfuil luach innéacs an tsínitheora tuismitheora + 100 aige. Mar shampla, tá signerIndex: 102 ag fianaiseoir do shí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 Príomha​

Coincheap sa BreathnóirCineál GraphQLCur síos
tréith templateidTemplateAn teimpléad atá á chur in eagar nó á chumadh
tréith recipientsRecipientInputFaighteoirí a thógtar isteach i mód cumadóireachta
roleId ón imeacht updateRoleNascann faighteoir lena réimsí ar an teimpléad
imeacht validate—An bhfuil na réimsí riachtanacha ar fad san teimpléad
mutation sendsendSeolann an doiciméad tar éis cumadóireachta
tréith token—Ticéad ó fíordheimhniú
mode="compose"—Mód sínteán chun réimsí a chur agus a sheoladh
mode="editor"—Mód iomlán eagarthóireachta teimpléid
experience sa ionchur seoltaExperienceRialáil branda, ríomhphoist, agus leathanach sínithe — féach Experiences explained

Export This Article

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