Interceptor Beispiel: Signaturen speichern

Embedded Documents for enaio® und yuuvis®
1

Hier ein kleines Beispiel zum speichern und laden der Signaturen in den LocalStore des Browsers.

Über diesen Weg können mit Hilfe der DMS API die Signaturen auch aus dem System geladen und gespeichert werden falls dies gewünscht ist.

var signatureInterceptor = {
    // Beim starten der Editor Instanz
    initEditorConfiguration(instance) {
        const { documentViewer } = instance.Core;

        // Signatur Tool holen
        const signatureTool = documentViewer.getTool('AnnotationCreateSignature');

        // Methode zum speichern der Signaturen definieren
        const saveSignature = async () => {
            const signatures = await signatureTool.exportSignatures();
            window.localStorage.setItem("signatures", JSON.stringify(signatures));
        };

        // Immer speichern wenn eine Signatur erstellt oder gelöscht wird
        signatureTool.on("signatureSaved", saveSignature);
        signatureTool.on("signatureDeleted", saveSignature);
    },

    // Beim laden jedes Dokuments
    async updateEditorConfiguration(instance, info, config) {
        const { documentViewer } = instance.Core;

        // Signatur Tool holen
        const signatureTool = documentViewer.getTool('AnnotationCreateSignature');

        // Holen der aktuellen Signaturen
        const existingSignatures = await signatureTool.exportSignatures();
        
        // Nur die gespeicherten Signaturen laden, wenn aktuell keine vorhanden sind
        if(existingSignatures.length == 0){
            // Laden der Signaturen aus dem LocalStore
            const signatures = window.localStorage.getItem("signatures");
            // Falls Signaturen gespeichert wurden
            if (signatures) {
                // Import der Signaturen in embedded documents
                const result = await signatureTool.importSignatures(JSON.parse(signatures));
            }
        }
    }
}

// Registrierung des Interceptors
window.ed.registerInterceptor(signatureInterceptor);

Weitere Details zu den Interceptors kann im Wiki unter Interceptor-Aufbau finden.

2 „Gefällt mir“
2

Ich habe auf Basis einer Anfrage eines Kunden eine Variante erstellt, welche die Unterschriften per Custom Settings (AppConnector) benutzerspezifisch speichert und lädt. Diese Unterschriften sind dann Client unabhängig verfügbar.

signatureInterceptorAppConnector.js


/*
Signature Interceptor welcher die Signaturen in den Custom Settings des Benutzers speichert und lädt.
Details hierzu finden Sie in der AppConnector API unter https://help.optimal-systems.com/enaio_develop/pages/viewpage.action?pageId=1867869#SessionService(/session)-/osrest/api/session/settings/custom/load
*/

var signatureInterceptorAppConnector = {
  // Beim starten der Editor Instanz
  initEditorConfiguration(instance) {
    const { documentViewer } = instance.Core;

    // Signatur Tool holen
    const signatureTool = documentViewer.getTool('AnnotationCreateSignature');

    // Methode zum speichern der Signaturen definieren
    const saveSignature = async () => {
      const signatures = await signatureTool.exportSignatures();

      const data = {
        type: 80,
        name: 'ed-signatures',
        value: JSON.stringify(signatures),
      };

      const response = await fetch(`/osrest/api/session/settings/custom/save`, {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json',
        },
      });
      // Prüfen ob die Signature gespeichert werden konnte
      if (response.status == 204) {
        console.log('Signature saved');
      } else {
        console.error(response);
      }
    };
    // Methode zum laden der Signaturen definieren
    const loadSignature = async () => {
      const currentSignatures = await signatureTool.exportSignatures();
      if(!currentSignatures?.length > 0){
        const response = await fetch(`/osrest/api/session/settings/custom/load?type=80&name=ed-signatures`);
        // Prüfen ob das laden erfolgreich war
        if (response.status == 200) {
          const signatures = await response.json();
          if (signatures.value) {
            // Import der Signaturen in embedded documents
            const signatureValue = JSON.parse(signatures.value);
            await signatureTool.importSignatures(signatureValue);
            console.log(signatureValue);
            console.log('Signature loaded');
         }
        } else {
            console.error(response);
        }
      } else {
        console.log('Signatures already loaded');
      }
    };

    // Immer speichern wenn eine Signatur erstellt oder gelöscht wird
    signatureTool.addEventListener('signatureSaved', saveSignature);
    signatureTool.addEventListener('signatureDeleted', saveSignature);
    // Nachdem das Dokument geladen wurde, prüfen ob die Signaturen schon importiert wurden. Darf nicht zuvor passieren, da diese ansonsten nicht auftauchen.
    documentViewer.addEventListener("documentLoaded",  loadSignature);
  },
};
3 „Gefällt mir“
3

Danke @Warnower für den Hinweis, im letzten Beispiel fehlt noch unten:

1 „Gefällt mir“
4

Hallo,
bei mir meldet ED bei diesem Skript
/ed/interceptors/SignaturSpeichern.js:41 Uncaught SyntaxError: Unexpected token ‚.‘
Wir haben die Version 2.2.5 im Einsatz

5

Ich nehme an, es geht um diese Stelle im Beispiel-Interceptor?

      if(!currentSignatures?.length > 0){

Optional Chaining, wie hier verwendet, wird lt. developer.mozilla.org ab diesen Browser-Versionen unterstützt:

Optional_chaining
Optional_chaining778×276 22.7 KB

Quelle:

@steschach Um welchen Browser bzw. welche enaio-Client-Version handelt es sich denn in diesem Fall?

6

Mein Beispiel signatureInterceptorAppConnector.js hatte leider einen Bug. Hier habe ich den Typ 1 angegeben, es muss jedoch eine Zahl zwischen 80 und 85 sein.

Details dazu im Server-API Handbuch auf Seite 120.

Ich habe das Beispiel angepasst.

7

Es ist noch der Aufruf in Zeile 42 anzupassen. :slight_smile:

„/osrest/api/session/settings/custom/load?type=80&name=ed-signatures“

Habe es damit gerade getestet, funktioniert wunderbar, danke!

1 „Gefällt mir“
8

Danke für den Hinweis, hab es gerade korrigiert.

9

Vielen Dank für die Hinweise. Leider erhalte ich nach wie vor den Syntax-Fehler bei
if(!currentSignatures?.length > 0){
Liegt es daran, dass der bei der enaio-Version 10.0 installierte embedded Browser (chrome_elf.dll) das Optional Chaining nicht kann? Laut OS gibt es hier keine neuere Version.

10

Hallo Herr Wohlfeil,
beim ersten Skript „signatureInterceptor“ erhalte ich die Fehlermeldung „signatureTool.on is not a function“.
ED Version 2.2.5 mit enaio 10.0.