Sleamhnú go príomh-ábhar

Comhtháthú Amharcóra 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 gnímh mar Quick Send sa Console.

Is comhpháirt gréasáin neamhchlaonte go hardán é Amharcóir Doiciméad Legalesign a ligeann duit teimpléid a chur in eagar, a réamhamharc agus a shaincheapadh le haghaidh sínithe doiciméad. Tógtha le StencilJS, oibríonn sé go réidh le JavaScript íon, 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 gnéithe tábhachtacha de chruthú doiciméid a chomhtháthú i do chórais inmheánaí, cosúil le CRM nó aip líne gnó. Má tá do chóras in ann comhpháirteanna HTML a thaispeáint agus a thacú, is féidir leat an Amharcóir Doiciméad a úsáid. Más gá cabhair bhreise duit chun an Amharcóir Doiciméad a chomhtháthú i do mbonn teicniúil, déan teagmháil le dár ndeasc tacaíochta. Is féidir leat na widgets níos mó seo a úsáid le comhtháthú REST/GraphQL API chun próisis sínithe doiciméad gan uaim a sholáthar do d’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 bhanalár forbartha, mar shampla PHP, ASP .Net srl. Is féidir leat nasc a chruthú leis an gcomhpháirt go díreach ón npm má cheadaíonn do thimpeallacht nach mbeidh sé suiteáilte. Is féidir leat triail a bhaint as leathanach taispeána ón stór samplach anseo [https://github.com/legalesign/ls-viewer-demo].

Cuir na scripteanna comhpháirte isteach i do 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 an fhreastalaí a úsáid chun YOUR_AUTH_TOKEN a fháil. Is féidir leis an dtacaíocht seo a bheith ina JWT SRP nó ina thacaíocht ghearrthéarmach comhpháirte a ghintear leis an generateComponentToken. Féach Údarás Widget.

Comhtháthú React​

Chomh maith leis sin tá leagan den chomhpháirt cruthaithe againn 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"
    />
  );
}

Airíonna Riachtanacha​

token​

Do thacaíocht slándála le haghaidh údaraithe. Fíoraíonn sé do chuid sonraí aitheantais agus rochtain ar an teimpléad. Úsáid cód taobh an fhreastalaí chun JWT SRP nó tacaíocht ghearrthéarmach chomhpháirte a sholáthar. Féach Údarás Widget don sreabhadh tacaíochta slán.

token="eyJraWQiOiJBTkJIeT..."

templateid​

ID an API don teimpléad atá uait a chur i láthair na n-úsáideoirí. Is féidir leat é seo a fháil go héasca trí féachaint ar an URL nuair atá tú ag eagarthóireacht an teimpléid san aip Console.

templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"

Módanna Widget​

Mód Eagarthóra​

Cruthú agus eagarthóireacht teimpléid lánfheidhmiúil le gach uirlis atá ar fáil. Tá sé beartaithe do shruthanna oibre ina bhfuil teimpléad athúsáidte ardleibhéil le róil úsáideach. Má tá sé i gceist agat do dhoiciméad a úsáid ach uair amháin (b'fhéidir go bhfuil do chóras giniúna doiciméad cheana féin líonadh isteach le gach eolas cliant) b’fhéidir gur mhaith leat breithniú a dhéanamh ar an mód comhdhéanamh ina ionad.

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

Mód Comhdhéanamh​

Mód sreangaithe chun boscaí sínte a chur go tapa chuig teimpléid atá réamhghiniúna. Foirfe do chliaint chomhtháite ina bhfuil na faighteoirí sainithe cheana féin.

Is é an sruth oibre gnách ná:

  1. Gineann do aip PDF
  2. Íoslódáil é trí API chun teimpléad 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 úsáid ID an teimpléid
  2. Cuimsigh an amharcóir i mód comhdhéanamh le sonraí faighteora
  3. Cuirtear réimsí sínithe leis agus seolann do úsáideoir

Le haghaidh tuilleadh eolais faoi fhaighteoirí féach Faighteoirí.

<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 an mód comhdhéanamh go huathoibríoch:

  • Faightear faighteoirí réamhghiniúnaithe
  • Cuirtear an seoltóir i bhfolach ón liosta anuas
  • Cuirtear roghanna doiciméad i bhfolach
  • Taispeántar réimsí riachtanacha de réir réamhshocraithe
  • Baintear an seoltóir agus réimsí an tseoltóra as an eagarthóir
  • Spreagtar roghnú tapa na réimsí riachtanacha do gach faighteoir

Mód Réamhamhairc​

Réamhamharc úsáideach doiciméid a thaispeánann an doiciméad le gach réimse reatha agus a ligeann don úsáideoir brabhsáil tríd na leathanaigh.

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

Déanann an mód comhdhéanamh go huathoibríoch:

  • Cuirtear an cnaipe uirlisí i bhfolach
  • Cuirtear roghanna doiciméad i bhfolach
  • Cuirtear bosca uirlisí i bhfolach
  • Déantar rannpháirtithe agus réimsí a dhéanamh léitheoireachta amháin

Cumraíocht Chasta​

Scagaire Bhosca Uirlisí​

Srian éigeantach ar chineálacha réimsí atá ar fáil ag úsáid luachanna teoranta le píopa. Mura gcuirtear luach ar fáil is dócha go mbeidh an bosca uirlisí gan scagadh agus beidh gach rogha ar fáil.

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

endpoint​

Do deireadhphointe API GraphQL, má tugadh deireadhphointe ar leith don chliaint duit.

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

Faighteoirí​

Sainmhínigh faighteoirí doiciméid i bhformáid JSON. Tabhair faoi deara go bhfuil na heilimintí riachtanacha do fhaighteoir firstname, lastname, email agus signerIndex; is féidir leat go roghnach pas a thabhairt ar an róil agus phonenumber do gach faighteora freisin. Má fhágann tú an ról amach ciallóidh sé go mbeifear ag caitheamh leis an lucht faighte mar sínitheoir ar leith, chun é seo a athrú is féidir leat pas a thabhairt ar role: "WITNESS" agus innéacs sínithe speisialta a áireamh chun a thaispeáint cé hé/a a tuismitheoir, mar shampla má theastaíonn uait fhinné a áireamh do shínitheoir 2, bheadh innéacs sínitheora de 102 ag an bhfinné sin.

<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í Saincheaptha le Slóit​

Cuir cnaipí saincheaptha leis an mbarr uirlisí ag úsáid slóit:

<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 teimpléad tar éis é a bheith bailí nó neamhbhailí 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ála Imeachtaí React​

Úsáidtear imeacht i React trí é a réamhshocrú leis an ainm coitianta on<EventName>.

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

Cineálacha Imeachtaí​

imeacht update​

Scaoiltear nuair a athraíonn teimpléad an doiciméid, mar shampla réimsí á gcur leis nó á mbailiú. Soláthraíonn sé ní amháin an imeacht a chuir an athrú i bhfeidhm ach freisin staid nuashonraithe an chomhaid teimpléid mar JSON.

imeacht validate​

Scaoiltear nuair a athraíonn teimpléad an doiciméid, taispeánann an mhaoin valid i sonraí má tá an teimpléad tar éis é a bheith bailí nó neamhbhailí.

imeacht selectFields​

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

imeacht addParticipant​

Scaoiltear nuair a chuirtear ról rannpháirtí leis an teimpléad.

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, déan cinnte go:

Tacaíocht Brabhsálaí​

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

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

Acmhainní​

Ag Faighte Cabhair​

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

Export This Article

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