Get Started

OneSpan Blog

OneSpan Sign Developer: Designer Customization and Integration – Part 4

Duo Liang,
OneSpan Sign Developer: Designer Customization and Integration – Part 4

In Part 3 of this blog series, we demonstrated one of the recommended workflows involving a customized Designer Page. In that project, we used an external button to trigger the completion event instead of the default sent button.

Today, we will showcase another method of handling the completion event to make a coherent process. On top of that, our project will be extended to display package information. This can come in handy when you are looking for sample codes to develop your own dashboard.

Designer Customization Workflow in OneSpan Sign

Step1:

Similar to the demo in Part 3, a form page was presented asking for basic information of the package. Once the “Create Package” button is clicked, the front-end will request our back-end to create an in-person signing package.3-13-1

Step 2:

Instead of directly popping up a designer page, OneSpan Sign presents package details page similar to our web-portal. Here, you can add your own extensions to perform such functions as  package manipulation, signer information collection, or document upload.3-13-2

Step 3:

After user confirmed the information and hit the “Design Package” button, a modal was toggled with Designer session embedded. To simplify the process, users will still use Designer to complete the whole package design step.3-13-3

Note that we did something different in this step compared to the demo in part 3.

We disabled click-to-backdrop from the modal using the below code, so the only way to exit the Designer (regardless whether the package was sent or not) was clicking the “X” button at the top right corner. In this way, we limited and ensured the end user’s workflow. This leads to another noticeable difference; we kept the default “Send Button”.  

            $('#modal-fullscreen').modal({
                backdrop: 'static',
                keyboard: false
            });

When the user sends the package and clicks the exit button according to the expected process, we can trigger another request querying the package status. Even if end users clicked the exit button without sending the package, OneSpan Sign knows that the package was not sent and still provides end users the chance to return to the Designer page.3-13-4

Step 4:

The moment the user clicks the exit button, we query the package again and can trigger the status change which will query the package status. In our project, when the sender returns to the package information page, we can render the page again, and they can see the updated documents and recipients lists.3-13-5

When the “Signing Ceremony” button is clicked, we can build an in-person signing link and lead them to the signing ceremony session.3-13-6

THE CODE

The demo is hosted on our code share, which was written in PHP and with REST method. If it’s your first time working with PHP, refer to this blog “Creating a Simple PHP Web Application” to learn how to run a simple PHP web application.

To adjust your account information, just change the corresponding parameters in file “ESLPackageCreation.php”. The starting point of the project is the “index.html” file.

RELATED API

In this demo, using Package Status Change to trigger the completion event is particularly important. This is a form of active polling, which is commonly seen in your integration process. Use the API below to retrieve your package metadata, and then you can parse the package status from the JSON payload.

Retrieve Package JSON
HTTP Request
GET /api/packages/{packageId}
HTTP Headers
Accept: application/json; esl-api-version=11.21
Authorization: Basic api_key

For a complete description for each field in response, you can refer to the JSON Properties table at the end of “Creating and Sending a Package” Guide. In addition, refer to Release Note 10.6.1 for reasons to carrying “esl-api-version” in the request header.

Designer Customization and Suggested Workflows

Through this blog, we introduced another suggested workflow to integrate with Designer. You can also find the source code rendering the package information, which is very extendable for other integration scenarios.

If you have any questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the Developer Community Forums.

The Designer Customization and Integration Blog Series:

OneSpan Developer Community

OneSpan Developer Community

Join the OneSpan Developer Community! Forums, blogs, documentation, SDK downloads, and more.

Join Today
Duo Liang
Duo Liang

Duo Liang is a Technical Evangelist and Partner Integrations Developer at OneSpan where he creates and maintains integration guides and code shares, helps customers and partners integrate OneSpan products into their applications, and builds integrations within third party platforms.

Go To Top
Share