Hinzufügen von Beschriftungen mit schreibgeschütztem PSPDF Kit-Textformularfeld. Statische PSPDF-Kit-Instanz erstellt.

EnvelopeGenerator.Web/appsettings.json

@@ -15,7 +15,7 @@
     "Default": "Server=SDD-VMP04-SQL17\\DD_DEVELOP01;Database=DD_ECM;User Id=sa;Password=dd;Encrypt=false;TrustServerCertificate=True;"
   },
   "AdminPassword": "dd",
-  "PSPDFKitLicenseKey_SignFlow": "y8VgCpBgUfNlpKJZC-GwjpPs-S-KFBHv4RywfHbqpBAbO0XxRuWDaMGZtIaMrXBDlndlJLk---Ve93xjI_ZR4sbFymf4Ot97yTYUMeDdL2LYXhspkEnSAtkXf9zqepNL1v_0DMibjpqXFQMkVB1y3D5xdnOg-iJuCCZEMhZ780qg04_H_nmx63uSgxjN0GJxC8YvsbnRcUZ2l_idImMvWL0HMqB5B7oEpNenasA0RK0uapFRTa7NIQok0phpTHZYKB4qvj7od2yxlytGB7qBl4-lwT70DSQ9mrLkCWbuzZ9cV9D8fDzdFXr6WoZdOYpkrUadRbsy2bhPq_ukxszDWN4JGhebo0XKUK_YfgvSlS7lFOxHNblHeC9B7gZ8T-VuQ_z1QA2JYRf1dmhSuclnW00diShIg-N0I79PWGsQE4j40XtVpyWcN9uT9hMuiRpL0LzHV4YgsgBrgKgs_moqL7f0L4-MwaS25Dx4Wcz4ttKaerLavwMM4CJHI3DNqTC5UUEG6EViFxBQtrmuAS7kiw2nWjvXO7kUA24NARtsRCphjWE4l6wSMdh7kpqhfbV7_hdb5xXYGALNPkv8En6zPpFIew8DDcOH9dgxfKMI34LLhkEWqovZW_7fXNJTEIHVpR0DSPbZrmyEwkECnbDcNzjyFk2M1fzstJj_dSotyZvS57XJK2DgojbRgXL9pncs",
+  "PSPDFKitLicenseKey": "SXCtGGY9XA-31OGUXQK-r7c6AkdLGPm2ljuyDr1qu0kkhLvydg-Do-fxpNUF4Rq3fS_xAnZRNFRHbXpE6sQ2BMcCSVTcXVJO6tPviexjpiT-HnrDEySlUERJnnvh-tmeOWprxS6BySPnSILkmaVQtUfOIUS-cUbvvEYHTvQBKbSF8di4XHQFyfv49ihr51axm3NVV3AXwh2EiKL5C5XdqBZ4sQ4O7vXBjM2zvxdPxlxdcNYmiU83uAzw7B83O_jubPzya4CdUHh_YH7Nlp2gP56MeG1Sw2JhMtfG3Rj14Sg4ctaeL9p6AEWca5dDjJ2li5tFIV2fQSsw6A_cowLu0gtMm5i8IfJXeIcQbMC2-0wGv1oe9hZYJvFMdzhTM_FiejM0agemxt3lJyzuyP8zbBSOgp7Si6A85krLWPZptyZBTG7pp7IHboUHfPMxCXqi-zMsqewOJtQBE2mjntU-lPryKnssOpMPfswwQX7QSkJYV5EMqNmEhQX6mEkp2wcqFzMC7bJQew1aO4pOpvChUaMvb1vgRek0HxLag0nwQYX2YrYGh7F_xXJs-8HNwJe8H0-eW4x4faayCgM5rB5772CCCsD9ThZcvXFrjNHHLGJ8WuBUFm6LArvSfFQdii_7j-_sqHMpeKZt26NFgivj1A==",
   "UseCSPInDev": false,
   "Content-Security-Policy": [ // The first format parameter {0} will be replaced by the nonce value.
     "default-src 'self'",
@@ -118,6 +118,6 @@
     "SendingProfile": 1,
     "AddedWho": "DDEnvelopGenerator",
     "ReminderTypeId": 202377,
-    "EmailAttmt1" :  ""
+    "EmailAttmt1": ""
   }
 }

EnvelopeGenerator.Web/wwwroot/js/annotation.js

@@ -1,9 +1,9 @@
 class Annotation {
-    static async createAnnotations(document) {
+    static async createAnnotations(document, instance) {
         const signatures = []
 
-        for(var element of document.elements){
+        for (var element of document.elements) {
-            const [annotation, formField, annotation_date, formFieldDate, annotation_postcode, formFieldPostcode, annotation_city, formFieldCity] = await Annotation.createSignature(element)
+            const [annotation, formField, annotation_date, formFieldDate, annotation_postcode, formFieldPostcode, annotation_city, formFieldCity, annotation_date_label, formFieldDateLabel, annotation_postcode_label, formFieldPostcodeLabel, annotation_city_label, formFieldCityLabel] = await Annotation.createSignature(element)
             signatures.push(annotation)
             signatures.push(formField)
             signatures.push(annotation_date)
@@ -12,9 +12,18 @@
             signatures.push(formFieldPostcode)
             signatures.push(annotation_city)
             signatures.push(formFieldCity)
+
+            signatures.push(annotation_date_label)
+            signatures.push(formFieldDateLabel)
+
+            signatures.push(annotation_postcode_label)
+            signatures.push(formFieldPostcodeLabel)
+
+            signatures.push(annotation_city_label)
+            signatures.push(formFieldCityLabel)
         }
 
-        return [...signatures ]
+        await instance.create(signatures)
     }
 
     static async createSignature(element) {
@@ -45,6 +54,10 @@
             annotationIds: PSPDFKit.Immutable.List([annotation.id]),
         })
 
+        /**
+         * Date, post code and place text form part
+         */
+        const date_place_top_shift = 16
         //date
         const id_date = PSPDFKit.generateInstantId()
         const annotation_date = new PSPDFKit.Annotations.WidgetAnnotation({
@@ -56,17 +69,17 @@
             boundingBox: new PSPDFKit.Geometry.Rect({
                 width: width * 0.75,
                 height: height / 2,
-                top: top + height + 25,
+                top: top + height + 25 + date_place_top_shift,
                 left: left - width * .25,
             }),
-            fontSize:8,
+            fontSize: 8,
             additionalActions: {
-              onFormat: new PSPDFKit.Actions.JavaScriptAction({
+                onFormat: new PSPDFKit.Actions.JavaScriptAction({
-                script: `AFDate_FormatEx("dd/mm/yyyy")`,
+                    script: `AFDate_FormatEx("dd/mm/yyyy")`,
-              }),
+                }),
             }
         })
-        
+
         const formFieldDate = new PSPDFKit.FormFields.TextFormField({
             name: id_date,
             annotationIds: PSPDFKit.Immutable.List([annotation_date.id]),
@@ -85,12 +98,12 @@
             boundingBox: new PSPDFKit.Geometry.Rect({
                 width: width * 0.45,
                 height: height / 2,
-                top: top + height + 25,
+                top: top + height + 25 + date_place_top_shift,
                 left: left - width * .25 + width * 0.80,
             }),
-            fontSize:8
+            fontSize: 8
         })
-        
+
         const formFieldPostcode = new PSPDFKit.FormFields.TextFormField({
             name: id_postcode,
             annotationIds: PSPDFKit.Immutable.List([annotation_postcode.id]),
@@ -109,19 +122,104 @@
             boundingBox: new PSPDFKit.Geometry.Rect({
                 width: width * 0.75,
                 height: height / 2,
-                top: top + height + 25,
+                top: top + height + 25 + date_place_top_shift,
                 left: left - width * .25 + width * 1.30,
             }),
-            fontSize:8
+            fontSize: 8
         })
-        
+
         const formFieldCity = new PSPDFKit.FormFields.TextFormField({
             name: id_city,
             annotationIds: PSPDFKit.Immutable.List([annotation_city.id]),
-            value: location.city
+            value: location.city,
         })
 
-        return [annotation, formField, annotation_date, formFieldDate, annotation_postcode, formFieldPostcode, annotation_city, formFieldCity]
+        /**
+         * Date, post code and place label part
+         */
+        const label_top_shift = -15
+
+        //date label
+        const id_date_label = PSPDFKit.generateInstantId()
+        const annotation_date_label = new PSPDFKit.Annotations.WidgetAnnotation({
+            id: id_date_label,
+            pageIndex: page,
+            formFieldName: id_date_label,
+            blendMode: 'multiply',
+            boundingBox: new PSPDFKit.Geometry.Rect({
+                width: width * 0.75,
+                height: height / 2,
+                top: top + height + 25 + label_top_shift + date_place_top_shift,
+                left: left - width * .25,
+            }),
+            fontSize: 8,
+            backgroundColor: PSPDFKit.Color.TRANSPARENT,
+            fontColor: PSPDFKit.Color.Black,
+            isBold: true,
+            required: true
+        })
+
+        const formFieldDateLabel = new PSPDFKit.FormFields.TextFormField({
+            name: id_date_label,
+            annotationIds: PSPDFKit.Immutable.List([annotation_date_label.id]),
+            value: "Date",
+            readOnly: true
+        })
+
+        //postcode label
+        const id_postcode_label = PSPDFKit.generateInstantId()
+        const annotation_postcode_label = new PSPDFKit.Annotations.WidgetAnnotation({
+            id: id_postcode_label,
+            pageIndex: page,
+            formFieldName: id_postcode_label,
+            blendMode: 'multiply',
+            boundingBox: new PSPDFKit.Geometry.Rect({
+                width: width * 0.45,
+                height: height / 2,
+                top: top + height + 25 + label_top_shift + date_place_top_shift,
+                left: left - width * .25 + width * 0.80,
+            }),
+            fontSize: 8,
+            backgroundColor: PSPDFKit.Color.TRANSPARENT,
+            fontColor: PSPDFKit.Color.Black,
+            isBold: true,
+            required: true
+        })
+
+        const formFieldPostcodeLabel = new PSPDFKit.FormFields.TextFormField({
+            name: id_postcode_label,
+            annotationIds: PSPDFKit.Immutable.List([annotation_postcode_label.id]),
+            value: "PLZ",
+            readOnly: true
+        })
+
+        //city label
+        const id_city_label = PSPDFKit.generateInstantId()
+        const annotation_city_label = new PSPDFKit.Annotations.WidgetAnnotation({
+            id: id_city_label,
+            pageIndex: page,
+            formFieldName: id_city_label,
+            blendMode: 'multiply',
+            boundingBox: new PSPDFKit.Geometry.Rect({
+                width: width * 0.75,
+                height: height / 2,
+                top: top + height + 25 + label_top_shift + date_place_top_shift,
+                left: left - width * .25 + width * 1.30,
+            }),
+            fontSize: 8,
+            backgroundColor: PSPDFKit.Color.TRANSPARENT,
+            fontColor: PSPDFKit.Color.Black,
+            isBold: true,
+        })
+
+        const formFieldCityLabel = new PSPDFKit.FormFields.TextFormField({
+            name: id_city_label,
+            annotationIds: PSPDFKit.Immutable.List([annotation_city_label.id]),
+            value: "Ort",
+            readOnly: true
+        })
+
+        return [annotation, formField, annotation_date, formFieldDate, annotation_postcode, formFieldPostcode, annotation_city, formFieldCity, annotation_date_label, formFieldDateLabel, annotation_postcode_label, formFieldPostcodeLabel, annotation_city_label, formFieldCityLabel]
     }
 
     static createTextBox(element) {
@@ -176,7 +274,7 @@
         const pageAnnotations = allAnnotations.filter(Annotation.isSignature)
         //deleting all Annotations
         return await instance.delete(pageAnnotations)
-    }  
+    }
 
     static async validateAnnotations(instance) {
         const allAnnotations = await Annotation.getAnnotations(instance)
@@ -211,7 +309,7 @@
         const canvas = document.createElement('canvas')
         const scale = 4
         const fontSize = 10
-        
+
         canvas.width = width * scale
         canvas.height = height * scale
 

EnvelopeGenerator.Web/wwwroot/js/app.js

@@ -70,8 +70,7 @@ class App {
         // Load annotations into PSPDFKit
         try {
             this.signatureCount = this.currentDocument.elements.length
-            const annotations = await Annotation.createAnnotations(this.currentDocument)
+            await Annotation.createAnnotations(this.currentDocument, this.Instance)
-            await this.Instance.create(annotations)
 
             const openResponse = await this.Network.openDocument(this.envelopeKey)
 

EnvelopeGenerator.Web/wwwroot/js/ui.js

@@ -14,8 +14,9 @@
 
   // Load the PSPDFKit UI by setting a target element as the container to render in
   // and a arraybuffer which represents the document that should be displayed.
+  static Instance
   static loadPSPDFKit(arrayBuffer, container, licenseKey, locale) {
-    return PSPDFKit.load({
+    UI.Instance = PSPDFKit.load({
       locale: locale,
       licenseKey: licenseKey,
       styleSheets: ['/css/site.css'],
@@ -43,6 +44,8 @@
         Annotation: UI.annotationRenderer,
       },
     })
+
+    return UI.Instance;
   }
 
   static configurePSPDFKit(instance, handler) {

EnvelopeGenerator.Web/wwwroot/js/util.js

@@ -52,6 +52,5 @@ function locale_date_dd_mm_yyyy() {
     const day = String(today.getDate()).padStart(2, '0');
     const month = String(today.getMonth() + 1).padStart(2, '0');
     const year = String(today.getFullYear()).slice(-4);
-    console.log(`${day}/${month}/${year}`)
     return `${day}/${month}/${year}`;
 }