Sleamhnú go príomh-ábhar

Comhtháthú Léitheoir Doiciméad Legalesign i do Láithreán Gréasáin

leide

Is féidir leat an comhpháirt seo a fheiceáil i mbun oibre mar Seoladh Tapa i Console.

Is comhpháirt gréasáin atá neamhspleách ar ardán é an Léitheoir Doiciméad Legalesign a ligeann duit téamaí do shíniú doiciméad a chur in eagar, réamhamharc a dhéanamh orthu agus a shaincheapadh. Tógtha le StencilJS, oibríonn sé go réidh le vanilla JavaScript, React, Vue, Angular, nó aon fhráma oibre gréasáin.

Tá an comhpháirt plug and play seo deartha ionas gur féidir leat codanna tábhachtacha den chruthú doiciméid a chomhtháthú i do chórais inmheánacha, mar CRM nó iarratas líne gnó. Má fhéadann do chóras comhlacht HTML a léiriú agus a thacú, is féidir leat an Léitheoir Doiciméad a úsáid. Más gá cúnamh breise duit an Léitheoir Doiciméad a chomhtháthú i do shraith theicniúil, déan teagmháil le haghaidh tacaíochta. Is féidir leat na widgets móra seo a úsáid le comhtháthuithe REST/GraphQL API chun próisis shíniú doiciméad gan uaim a sholáthar do do fhoireann agus do chustaiméirí.

Suiteáil​

Suiteáil NPM​

npm install legalesign-document-viewer

Do Thionscadail React​

npm install legalesign-document-viewer-react

Comhtháthú Bunúsach​

Vanilla HTML/JavaScript​

Is féidir an leagan HTML/Javascript den chomhpháirt seo a úsáid le haon sraith forbartha, mar PHP, ASP .Net srl. Is féidir leat nascadh leis an gcomhpháirt go díreach ó npm má tá do thimpeallacht neamhcheadaithe í a shuiteáil. Is féidir leat leathanach taispeána a thriail ón stór samplach anseo [https://github.com/legalesign/ls-document-viewer-example].

Cuir na scriptí comhpháirte leis an HTML:

<!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>

Beidh ort cód taobh freastalaí a úsáid chun an token don chuntas atá uait a fháil.

Comhtháthú React​

Tá leagan déanta againn freisin den chomhpháirt a chomhtháthaíonn go díreach le frámaí React.

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

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

Tréithe Riachtanacha​

token​

Do theoiric slándála le haghaidh fíordheimhnithe. Déanann sé seo do rogha agus do rochtain ar an téama a dhaingniú. Féach tuilleadh doiciméadúcháin maidir le conas token a fháil go slán gan do chuid creidmheasanna a nochtadh, féach na samplaí sa treoir fíordheimhnithe.

token="eyJraWQiOiJBTkJIeT..."

templateid​

An ID API den téama a theastaíonn uait a chur i láthair d’úsáideoirí. Is féidir é seo a fháil go héasca tríd an URL a sheiceáil agus tú ag eagarthóireacht an téama san fheidhmchlár Console.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Módanna Widget​

Mód Eagarthóireachta​

Cruthú agus eagarthóireacht téama lánfheidhmiúil leis na huirlisí go léir atá ar fáil. Tá sé beartaithe do shruthanna oibre áit a mbíonn téama athúsáidte ard le rólanna úsáideach. Má tá sé i gceist agat do dhoiciméad a úsáid uair amháin amháin (b’fhéidir go bhfuil do chóras gineadh doiciméad líonta cheana féin le sonraí an chliaint), d’fhéadfá smaoineamh ar mhodh comhshlánúcháin ina ionad.

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

Mód Comhshlánúcháin​

Mód sreabhán le boscaí sínithe a chur go tapa le téamaí réamhghinte. Foirfe do chliaint comhtháite ina bhfuil fáilteoirí sainithe cheana féin.

Is é an sreabhfaidh ginearálta ná:

  1. Gineann do iarratas comhad PDF
  2. Uaslódáil é tríd an API chun téama a chruthú:
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. Uaslódáil an comhad PDF chuig S3 ag baint úsáide as an ID téama
  2. Ionsáigh an léitheoir i mód chomhshlánúcháin le sonraí fáilteora
  3. Cuirtear réimsí sínithe leis agus seolann do úsáideoir é

Le haghaidh tuilleadh eolais ar fáilteoirí féach ar Fáilteoirí.

<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>

Déanann mód chomhshlánúcháin:

  • Fáilteoirí réamhghinte a bhrath go huathoibríoch
  • An seoltóir a cheilt ón roghchlár anuas
  • Roghanna doiciméad a cheilt
  • Réimsí riachtanacha a thaispeáint de réir réamhshocraithe
  • An seoltóir agus réimsí seoltóra a bhaint as an eagarthóir
  • Roghnú tapa ar na réimsí riachtanacha do gach fáilteoir a chur chun cinn

Mód Réamhamhairc​

Réamhamharc ar an doiciméad cabhrach a thaispeánann an doiciméad leis na réimsí uile reatha agus a ligeann don úsáideoir brabhsáil trí leathanaigh.

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

Déanann mód chomhshlánúcháin:

  • An barra uirlisí a cheilt
  • Roghanna doiciméad a cheilt
  • An bosca uirlisí a cheilt
  • Sanntóirí agus réimsí a dhéanamh léamh-aonair

Cumraíocht Chasta​

Scagaire Bosca Uirlisí​

Spreaganna réimsí atá ar fáil a theorannú trí luachanna scartha le píopa. Mura dtugtar luach ar bith is glacadh leis go mbeidh an bosca uirlisí gan scagaire agus go mbeidh gach rogha ar fáil.

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

endpoint​

Do chéadphointe API GraphQL, má tá ceannphointe sonrach do chliaint tugtha duit.

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

Fáilteoirí​

Sonraigh fáilteoirí doiciméid i bhformáid JSON. Tabhair faoi deara go bhfuil an príomhriachtanas do fhaighteoir ná firstname, lastname, email agus signerIndex; roghnach is féidir freisin an ról agus uimhir gutháin a chur leis do gach fáilteoir. Ciallaíonn ról a fhágáil amach go ndéanfar cóiríocht ar an bhfaighteoir mar shíntiús breise, chun é seo a athrú is féidir leat ról: "WITNESS" a rith agus innéacs sínithe speisialta a chur san áireamh chun a thaispeáint cé hé a thuismitheoir, mar shampla má theastaíonn uait fianaise a chur le sínitheoir 2, bheadh an fhianaise sin ag baint úsáide as 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>

Cnaipí Pearsantaithe le Spásanna​

Cuir cnaipí pearsantaithe leis an mbarra uirlisí ag baint úsáide as spásanna:

<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áimhseáil Imeachtaí​

Éist le himeachtaí an chomhpháirte chun athruithe a rianú:

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

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

Is féidir leat a rianú an bhfuil téama tar éis éirí bailí nó neamhbailí ag baint úsáide as an imeacht validate.

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

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

Sampla Láimhseáil Imeachtaí React​

Úsáid imeacht i react le haghaidh ainmne a chur leis an gcoiméad on<EventName> atá eolach.

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

Cineálacha Imeachtaí​

Imeacht update​

Scaoiltear nuair a athraítear an téama doiciméid, mar shampla ag cur nó bhaint réimsí. Tugann sé ní hamháin an imeacht a chuir faoi deara é ach freisin staid nuashonraithe an dócháin téama mar JSON.

Imeacht validate​

Scaoiltear nuair a athraítear an téama doiciméid, léiríonn an mhaoin valid sa mhionsonra an bhfuil an téama tar éis éirí bailí nó neamhbailí.

Imeacht selectFields​

Scaoiltear nuair a roghnaítear réimse san eagarthóir.

Imeacht addParticipant​

Scaoiltear nuair a chuirtear ról rannpháirtí leis an téama.

Sampla Iomlán​

<!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>

Fadhbanna a Réiteach

Má bhíonn fadhbanna agat leis an gcomhpháirt, cinntigh gur féidir leat rochtain a fháil nó an réimse stórála doiciméad a bheith liostaithe bán ag https://s3.amazonaws.com/*

Tacaíocht Brabhsála​

Úsáideann an comhpháirt caighdeáin gréasáin nua-aimseartha agus tacaíonn sé le:

  • Chrome/Edge (is déanaí)
  • Firefox (is déanaí)
  • Safari (is déanaí)
  • Brabhsálaithe soghluaiste (iOS Safari, Chrome Mobile)

Acmhainní​

Ag Faigh Bainteas​

Le haghaidh tacaíochta teicniúla nó ceisteanna maidir le comhtháthú, déan teagmháil le foireann tacaíochta Legalesign nó tabhair cuairt ar an doiciméadíocht API.

Export This Article

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