Leum gu prìomh susbaint

Cuir Amuigh Lorgaire Sgrìobhainnean Legalesign air an Làrach-lìn agad

comhairle

Faodaidh tu faicinn an t-susbaint seo ann an gnìomh mar Quick Send ann an Console.

Is e com-pàirteach lìn neo-eisimeileach bho àrd-ùrlar a th’ ann am Lorgaire Sgrìobhainnean Legalesign a leigeas leat clàran-amais a dheasachadh, a shealltainn ro-làimh agus a ghnàthachadh airson soidhnichean sgrìobhainnean. Air a thogail le StencilJS, bidh e ag obrachadh gun chrìoch le JavaScript vanilla, React, Vue, Angular, no gin de na frèam-obrach lìn sam bith.

Tha am plugaidh seo furasta a chleachdadh air a dhealbhadh gus na prìomh àiteachan de chruthachadh sgrìobhainnean a chur a-steach gu siostaman-stèidhichte agad fhèin, mar eisimpleir CRM no tagradh gnìomhachais. Cho fad ‘s as urrainn do shiostam agad com-pàirtean HTML a riochdachadh agus taic a thoirt dhaibh, faodaidh tu an Lorgaire Sgrìobhainnean a chleachdadh. Ma dh’fheumas tu cuideachadh a bharrachd gus am Lorgaire Sgrìobhainnean a chur a-steach dhan t-siostam theicnigeach agad, cuir fios chun deasg taic againn. Faodaidh tu na h-innealan mòra seo a chleachdadh còmhla ri amalachadh API REST/GraphQL gus pròiseasan soidhnidh sgrìobhainnean gun chrathadh a thoirt do luchd-obrach agus luchd-ceannach.

Stàladh​

Stàladh NPM​

npm install legalesign-document-viewer

Airson Pròiseactan React​

npm install legalesign-document-viewer-react

Amalachadh Bun-sgoile​

HTML/JavaScript Vanilla​

Faodar dreach an HTML/Javascript den cho-phàirt seo a chleachdadh le gin de na stac leasachaidh, leithid PHP, ASP .Net msaa. Faodaidh tu ceangal a dhèanamh ris a’ cho-phàirt gu dìreach bho npm mura leig an àrainneachd agad leis a chuir a-steach. Faodaidh tu peilear sealladh-taisbeanaidh a dh’fheuchainn bhon eisimpleir stòraidh seo an seo [https://github.com/legalesign/ls-viewer-demo].

Cuir na sgriobtaichean co-phàirtean ris an HTML agad:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="node_modules/legalesign-document-viewer/dist/ls-document-viewer/ls-document-viewer.css" />
    <script type="module" src="node_modules/legalesign-document-viewer/dist/ls-document-viewer/ls-document-viewer.esm.js"></script>
    <script nomodule src="node_modules/legalesign-document-viewer/dist/ls-document-viewer/ls-document-viewer.js"></script>
  </head>
  <body>
    <ls-document-viewer
      id="my-editor"
      templateid="YOUR_TEMPLATE_ID"
      token="YOUR_AUTH_TOKEN"
    ></ls-document-viewer>
  </body>
</html>

Feumaidh tu còd air an fhreastalaiche fhaighinn airson YOUR_AUTH_TOKEN. Faodaidh am beagan comharra a bhith na SRP JWT no comharra goirid-ùine den cho-phàirt air a chruthachadh le generateComponentToken. Faic Ùghdarras Widget.

Amalachadh React​

Tha sinn cuideachd air dreach den cho-phàirt a thoirt gu buil a tha a’ dol dìreach an sàs le frèam-obrach React.

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

function App() {
  return (
    <LsDocumentViewer
      templateid="YOUR_TEMPLATE_ID"
      token="YOUR_AUTH_TOKEN"
      mode="compose"
    />
  );
}

Feartan Riatanach​

token​

An comharra tèarainteachd agad airson dearbhadh. Tha seo a’ dearbhadh do chomharraachd agus ruigsinneachd air an teamplaid. Cleachd còd air an fhreastalaiche gus comharra SRP JWT no comharra goirid-ùine den cho-phàirt a thoirt seachad. Faic Ùghdarras Widget airson sruth comharra tèarainte.

token="eyJraWQiOiJBTkJIeT..."

templateid​

ID API na teamplaid a tha thu ag iarraidh a thaisbeanadh don luchd-cleachdaidh. Faodaidh tu seo a lorg gu furasta le coimhead san URL nuair a tha thu a’ deasachadh an teamplaid anns an aplacaid Console.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Modhan Widget​

Modh Deasaiche​

Cruthachadh is deasachadh teamplaid làn-fheartan le a h-uile inneal ri fhaighinn ann. Tha seo airson sreathan obrach far a bheil teamplaid ath-chleachdadh àrd aig a bheil dreuchdan feumail. Mura h-eil thu airson ach an sgrìobhainn agad a chleachdadh aon turas (eisimpleir: ma tha an siostam gineadh sgrìobhainneachd agad mu thràth air na fiosrachaidhean teachdaiche a lìonadh a-steach) dh’fhaodadh tu beachdachadh air compose mar as fheàrr.

<ls-document-viewer mode="editor" ...></ls-document-viewer>

Modh Compose​

Modh sìmplidh airson bogsaichean soidhnidh a chur gu luath ris na teamplaidean a chaidh a chruthachadh ro-làimh. Freagarrach do luchd-ceannach a chaidh am measgachadh mar a chaidh an comharrachadh mar luchd-fàgail.

Is e an sreath-obrach àbhaisteach:

  1. Bidh do aplacaid a’ gineadh PDF
  2. Cuir suas e tro API gus teamplaid a chruthachadh:
const response = await fetch('https://graphql.uk.legalesign.com/graphql', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query: `
      mutation CreateTemplate {
        createTemplate(input: {
          groupId: "${groupId}"
          title: "${documentTitle}"
        })
      }
    `
  })
});
const { data } = await response.json();
const templateId = data.createTemplate;
  1. Luchdaich suas am faidhle PDF gu S3 a’ cleachdadh an ID teamplaid
  2. Cuir am broinn an lorgair ann am modh compose le fiosrachadh luchd-fàgail
  3. Bidh an neach-cleachdaidh agad a’ cur raointean soidhnidh ris agus a’ cur air adhart

Airson tuilleadh fiosrachaidh mu luchd-fàgail faic Luchd-fàgail.

<ls-document-viewer 
    mode="compose" 
    recipients='[
        {"email": "user@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1},
        {"email": "user2@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 2}
    ]'
    ...></ls-document-viewer>

Gu fèin-obrachail bidh modh compose a:

  • A’ lorg luchd-fàgail a chaidh a chruthachadh ro-làimh
  • A’ falaich an neach-cuiridh bhon liosta-tomhais tuiteam sìos
  • A’ falaich roghainnean sgrìobhainn
  • A’ sealltainn raointean riatanach gu bunaiteach
  • A’ toirt air falbh an neach-cuiridh agus raointean an neach-cuiridh bhon deasaiche
  • A’ brosnachadh taghadh luath nan raointean riatanach airson gach neach-fàgail

Modh Ro-shealladh​

Sealladh sgrìobhainn cuideachail a tha a’ sealltainn an sgrìobhainn leis a h-uile raon a th’ ann an-dràsta agus a leigeas leis an neach-cleachdaidh brobhsadh tro dhuilleagan.

<ls-document-viewer mode="preview" ...></ls-document-viewer>

Gu fèin-obrachail bidh modh compose a:

  • A’ falaich a’ bhàr innealan
  • A’ falaich roghainnean sgrìobhainn
  • A’ falaich bàr innealan-taice
  • A’ dèanamh com-pàirtichean agus raointean leughadh-a-mhàin

Rèiteachadh Adhartach​

Bàr Innealan Fihlealaidh​

Cuir bacadh air seòrsaichean raointean ri fhaighinn a’ cleachdadh luachan air an cuairteachadh le buain-tì. Mura tèid luach sam bith a thoirt seachad tha e air a ghabhail gum bi am bàr innealan gun fhiltreachadh agus gum bi na h-uile roghainnean ri fhaighinn.

<ls-document-viewer
  filtertoolbox="signature|initials|date|text"
  ...
></ls-document-viewer>

endpoint​

Do phuing-ceangail API GraphQL, ma gheibhear puing-ceangail sònraichte airson luchd-ceannach.

endpoint="https://your-api.appsync-api.region.amazonaws.com/graphql"

Luchd-fàgail​

Mìnich luchd-fàgail sgrìobhainn ann an cruth JSON. Thoir fa-near gu bheil na nithean riatanach airson neach-fàgail: firstname, lastname, post-d agus signerIndex; gu roghnach faodaidh tu cuideachd an dreuchd (role) agus àireamh fòn (phonenumber) a chur ris airson gach neach-fàgail. Ma dh’fhalbhas tu dreuchd, bidh an neach-fàgail air a làimhseachadh mar neach-soidhnidh sònraichte, gus seo atharrachadh faodaidh tu dreuchd a chur ris mar "WITNESS" agus clàr miann sònraichte a thoirt seachad airson sealltainn cò th’ ann am pàrant, mar eisimpleir ma tha thu airson a thoirt a-steach gu neach-obrach airson neach-soidhnidh 2, bidh an neach-obrach sin aig ìre signerIndex de 102.

<ls-document-viewer
  recipients='[
    {"email": "user@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1},
    {"email": "user2@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 2}
    {"email": "user3@example.com", "firstname": "Joan", "lastname": "Mitchell", "signerIndex": 102, roleType: "WITNESS"}
  ]'
  ...
></ls-document-viewer>

Putanan Gnàthaichte le Slots​

Cuir putanan gnàthaichte ris a’ bhàr innealan a’ cleachdadh na slotan seo:

<ls-document-viewer ...>
  <style>
    .custom-button {
      padding: 2px 12px;
      border-radius: 1rem;
      background-color: #9df5d4;
      color: #125241;
      font-weight: 500;
    }
  </style>
  <span slot="left-button">
    <button class="custom-button">Cancel</button>
  </span>
  <span slot="right-button">
    <button class="custom-button">Send Document</button>
  </span>
</ls-document-viewer>

Làimhseachadh Tachartasan​

Èist ri tachartasan a’ cho-phàirt gus atharrachaidhean a leantainn:

const editor = document.querySelector('ls-document-viewer');

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

Faodaidh tu sùil a chumail am bheil teamplaid air a dhol dligheach no neo-dligheach a rèir an tachartais validate.

const editor = document.querySelector('ls-document-viewer');

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

Eisimpleir Làimhseachaidh Tachartais React​

Bidh cleachdadh tachartais ann an react ga leasachadh leis an t-eadar-theangachadh cumanta on<EventName>.

<LsDocumentViewer
  onUpdate={(event) => {
    console.log('Template changed:', event.detail);
  }}
  ...
/>

Seòrsachan Tachartasan​

Tachartas update​

Air a chuir dheth nuair a bhios teamplaid an sgrìobhainn air atharrachadh, mar eisimpleir nuair a bhios raointean air an cur ris no air an toirt air falbh. Thathar a’ toirt seachad chan e a-mhàin an tachartas a thug air tachairt ach cuideachd stàit ùraichte a’ ghnìomhaiche teamplaidean mar JSON.

Tachartas validate​

Air a chuir dheth nuair a thèid teamplaid an sgrìobhainn atharrachadh, seallas prìomh-shònraichte valid san fhiosrachadh an dà chuid a bheil an teamplaid dligheach no neo-dligheach.

Tachartas selectFields​

Air a chuir dheth nuair a thèid raon taghte san deasaiche.

Tachartas addParticipant​

Air a chuir dheth nuair a thèid dreuchd com-pàirtiche a chur ris an teamplaid.

Eisimpleir Coileanta​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document Editor</title>
    <link rel="stylesheet" href="https://unpkg.com/legalesign-document-viewer/ls-document-viewer.css" />
    <script type="module" src="https://unpkg.com/legalesign-document-viewer"></script>
  </head>
  <body style="padding: 0; margin: 0">
    <ls-document-viewer
      id="my-editor"
      templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
      token="YOUR_TOKEN_HERE"
      mode="compose"
      recipients='[
        {"email": "signer@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1}
      ]'
      filtertoolbox="signature|initials|date"
    >
      <span slot="left-button">
        <button onclick="handleCancel()">Cancel</button>
      </span>
      <span slot="right-button">
        <button onclick="handleSend()">Send</button>
      </span>
    </ls-document-viewer>

    <script>
      const editor = document.querySelector('ls-document-viewer');
      
      editor.addEventListener('update', (event) => {
        // shows the change event and the template details
        console.log('Document updated:', event.detail);
      });

      function handleCancel() {
        // Implement the cancel logic, e.g. go to a home page
        window.location.href = '/cancelpage';
      }

      function handleSend() {
        // Implement send logic if required.
        console.log('Sending document...');
      }
    </script>
  </body>
</html>

Fhuasgladh Dhuilgheadasan

Ma thachras duilgheadasan leis a’ cho-phàirt, dèan cinnteach gu bheil:

  • cothrom agad no gu bheil thu air liosta geal a dhèanamh den ghnìomh-lìon stòraidh sgrìobhainnean aig https://s3.amazonaws.com/*

Taic Bhrabhsair​

Tha an com-pàirt a’ cleachdadh inbhean lìn ùra agus tha e a’ toirt taic do:

  • Chrome/Edge (as ùire)
  • Firefox (as ùire)
  • Safari (as ùire)
  • Brabhsair gluasadach (iOS Safari, Chrome Mobile)

Goireasan​

Faigh Taic​

Airson taic theicnigeach no ceistean mu amalachadh, cuir fios gu sgioba taic Legalesign no tadhal air an sgrìobhainnean API.

Export This Article

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