Web Forms code example (#143)

* added example

* updates for webforms

* using correct base path

* changing docusign js events

* adding web forms SDK

---------

Co-authored-by: Paige Rossi <paige.rossi@docusign.com>

app/__init__.py

@@ -12,6 +12,7 @@
 from .monitor import views as monitor_views
 from .admin import views as admin_views
 from .connect import views as connect_views
+from .webforms import views as webforms_views
 from .views import core
 
 session_path = "/tmp/python_recipe_sessions"
@@ -113,6 +114,8 @@
 
 app.register_blueprint(connect_views.cneg001)
 
+app.register_blueprint(webforms_views.weg001)
+
 if "DYNO" in os.environ:  # On Heroku?
     import logging
 

app/consts.py

@@ -22,6 +22,10 @@
 # Name of static pdf file
 pdf_file = "World_Wide_Corp_lorem.pdf"
 
+web_form_template_file = "World_Wide_Corp_Form.pdf"
+
+web_form_config_file = "web-form-config.json"
+
 # Base uri for callback function
 base_uri_suffix = "/restapi"
 
@@ -109,5 +113,6 @@
     "CLICK": "Click",
     "ROOMS": "Rooms",
     "ADMIN": "Admin",
-    "CONNECT": "Connect"
+    "CONNECT": "Connect",
+    "WEBFORMS": "WebForms"
 }

app/docusign/ds_client.py

@@ -33,6 +33,10 @@
     "asset_group_account_read", "asset_group_account_clone_write", "asset_group_account_clone_read"
 ]
 
+WEBFORMS_SCOPES = [
+    "signature", "webforms_read", "webforms_instance_read", "webforms_instance_write"
+]
+
 
 class DSClient:
     ds_app = None
@@ -57,6 +61,8 @@ def _auth_code_grant(cls, api):
             use_scopes.extend(CLICK_SCOPES)
         elif api == "Admin":
             use_scopes.extend(ADMIN_SCOPES)
+        elif api == "WebForms":
+            use_scopes.extend(WEBFORMS_SCOPES)
         else:
             use_scopes.extend(SCOPES)
         # remove duplicate scopes
@@ -93,6 +99,8 @@ def _jwt_auth(cls, api):
             use_scopes.extend(CLICK_SCOPES)
         elif api == "Admin":
             use_scopes.extend(ADMIN_SCOPES)
+        elif api == "WebForms":
+            use_scopes.extend(WEBFORMS_SCOPES)
         else:
             use_scopes.extend(SCOPES)
         # remove duplicate scopes

app/docusign/utils.py

@@ -3,6 +3,7 @@
 import requests
 import urllib
 import json
+import re
 
 from docusign_esign import ApiClient, AccountsApi
 from flask import session, flash, url_for, redirect, render_template, current_app
@@ -146,3 +147,12 @@ def get_user_info(access_token, base_path, oauth_host_name):
     api_client = create_api_client(base_path, access_token)
     api_client.set_oauth_host_name(oauth_host_name)
     return api_client.get_user_info(access_token)
+
+def replace_template_id(file_path, template_id):
+    with open(file_path, 'r') as file:
+        content = file.read()
+
+    content = re.sub('template-id', template_id, content)
+
+    with open(file_path, 'w') as file:
+        file.write(content)

app/ds_config_sample.py

@@ -16,6 +16,7 @@
     "rooms_api_client_host": "https://demo.rooms.docusign.com/restapi",
     "monitor_api_client_host": "https://lens-d.docusign.net",
     "admin_api_client_host": "https://api-d.docusign.net/management",
+    "webforms_api_client_host": "https://apps-d.docusign.com/api/webforms/v1.1",
     "allow_silent_authentication": True,  # a user can be silently authenticated if they have an
     # active login session on another tab of the same browser
     "target_account_id": None,  # Set if you want a specific DocuSign AccountId,

app/static/assets/search.js

@@ -6,6 +6,7 @@ const DS_SEARCH = (function () {
     ROOMS: "rooms",
     ADMIN: "admin",
     CONNECT: "connect",
+    WEBFORMS: "webforms"
   }
 
   const processJSONData = function () {
@@ -142,6 +143,8 @@ const DS_SEARCH = (function () {
         return "eg";
       case API_TYPES.CONNECT:
         return "cneg";
+      case API_TYPES.WEBFORMS:
+        return "weg";
     }
   }
 

app/templates/cfr_home.html

@@ -45,7 +45,7 @@ <h2>{{ group["Name"] }}</h2>
                     {% for example in group["Examples"] -%}
                         {% if not example["SkipForLanguages"] or "python" not in example["SkipForLanguages"] %}
                             {% if example.CFREnabled == "AllAccounts" or example.CFREnabled == "CFROnly" %}
-                                {% set api_prefix = "a" if api["Name"] == "Admin" else "c" if api["Name"] == "Click" else "r" if api["Name"] == "Rooms" else "m" if api["Name"] == "Monitor" else "" %}
+                                {% set api_prefix = "a" if api["Name"] == "Admin" else "c" if api["Name"] == "Click" else "r" if api["Name"] == "Rooms" else "m" if api["Name"] == "Monitor" else "w" if api["Name"] == "WebForms" else "" %}
                                 <h4
                                     id="{{ api_prefix + 'example' + '0' * (3 - example['ExampleNumber'] | string() | length ) + example['ExampleNumber'] | string() }}"
                                 >

app/templates/home.html

@@ -45,7 +45,7 @@ <h2>{{ group["Name"] }}</h2>
                     {% for example in group["Examples"] -%}
                         {% if not example["SkipForLanguages"] or "python" not in example["SkipForLanguages"] %}
                             {% if example.CFREnabled != "CFROnly" %}
-                                {% set api_prefix = "a" if api["Name"] == "Admin" else "c" if api["Name"] == "Click" else "r" if api["Name"] == "Rooms" else "m" if api["Name"] == "Monitor" else "cn" if api["Name"] == "Connect" else "" %}
+                                {% set api_prefix = "a" if api["Name"] == "Admin" else "c" if api["Name"] == "Click" else "r" if api["Name"] == "Rooms" else "m" if api["Name"] == "Monitor" else "cn" if api["Name"] == "Connect" else "w" if api["Name"] == "WebForms" else "" %}
                                 <h4
                                     id="{{ api_prefix + 'example' + '0' * (3 - example['ExampleNumber'] | string() | length ) + example['ExampleNumber'] | string() }}"
                                 >

app/templates/webforms/eg001_create_instance.html

@@ -0,0 +1,10 @@
+<!-- extend base layout --> {% extends "base.html" %}  {% block content %}
+
+{% include 'example_info.html' %}
+
+<form class="eg" action="" method="post" data-busy="form">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+    {% include 'continue_button.html' %}
+</form>
+
+{% endblock %}

app/templates/webforms/eg001_web_form_create.html

@@ -0,0 +1,11 @@
+<!-- extend base layout --> {% extends "base.html" %}  {% block content %}
+
+<h4>{{ title }}</h4>
+<p>{{ description | safe }}</p>
+
+<form class="eg" action="" method="post" data-busy="form">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+    {% include 'continue_button.html' %}
+</form>
+
+{% endblock %}

app/templates/webforms/eg001_web_form_embed.html

@@ -0,0 +1,102 @@
+<!-- extend base layout --> {% extends "base.html" %}  {% block content %}
+
+<!--
+#ds-snippet-start:eSign44Step6
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app">
+      <div id="webform-customer-app-area">
+        <h1 id="webforms-heading">Embedded Webform Example</h1>
+        <div id="docusign" class="webform-iframe-container">
+          <p>Web Form will render here</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
+<p><a href="/">Continue</a></p>
+
+<script src="https://js.docusign.com/bundle.js"></script>
+<script>
+  async function loadWebform() {
+    const { loadDocuSign } = window.DocuSign
+    const docusign = await loadDocuSign('{{ integration_key }}');
+    const webFormOptions = {
+      //Used with the runtime API workflow, for private webforms this is needed to render anything
+      instanceToken: '{{ instance_token }}',
+      //Controls whether the progress bar is shown or not
+      hideProgressBar: false,
+      //Right now this parameter doesn't do anything but in the future
+      //it will be used to customize visual elements of the form experience
+      //such as the font color and other things
+      styles: {
+        fontColor: "black",
+      },
+      //These styles get passed directly to the iframe that is rendered
+      iframeStyles: {
+        minHeight: "1500px",
+      },
+      //Controls the auto resize behavior of the iframe
+      autoResizeHeight: true
+    };
+
+    const webFormWidget = docusign.webforms({
+      url: '{{ form_url }}',
+      options: webFormOptions,
+    });
+
+    //Basic milestones in this workflow
+  webFormWidget.on('ready', (event) => {
+    // event = { type: 'ready' };
+    console.log('debug form loaded', event);
+  });
+
+  webFormWidget.on('submitted', (event) => {
+    // event = { type: 'submitted', envelopeId: 'abcd1234' };
+    console.log('debug form submitted', event);
+  });
+
+  webFormWidget.on('signingReady', (event) => {
+    // event = { type: 'submitted', envelopeId: 'abcd1234' };
+    console.log('debug form signingReady', event);
+  });
+
+  webFormWidget.on('sessionEnd', (event) => {
+    //There are 3 sessionEnd types sessionTimeout, remoteSigningInitiated, signingResult
+
+    // event = { type: 'sessionEnd', sessionEndType: 'sessionTimeout' };
+    // event = {
+    //   type: 'sessionEnd',
+    //   sessionEndType: 'signingResult',
+    //   signingResultType: 'signing_complete',
+    //   returnUrl: 'bigcorp.com',
+    //   envelopeId: 'abcd1234',
+    // };
+    // event = { type: 'sessionEnd', sessionEndType: 'remoteSigningInitiated', envelopeId: 'abcd1234' };
+    console.log('debug form signingResult', event);
+  });
+
+  //Less commonly used events
+  webFormWidget.on('userActivity', (event) => {
+    // event = { type: 'userActivity', activityType: 'click' | 'keydown' };
+    console.log('debug form userActivity', event);
+  });
+
+    webFormWidget.mount("#docusign");
+  }
+  loadWebform();
+</script>
+
+
+<!--
+#ds-snippet-end:eSign44Step6
+-->
+
+{% endblock %}

app/webforms/__init__.py

@@ -0,0 +1 @@
+from .views import weg001