OneSpan Sign Developer: New Signer Experience UI Message Customization – Part 2

Duo Liang, November 7, 2019
OneSpan Sign Developer: New Signer Experience UI Message Customization – Part 2

UI message customization is an important part of OneSpan Sign’s white-labelling capability. It allows you to deliver a signing ceremony that is consistent with your brand.

In this blog, we will pick up where we left off from part 1 and continue to introduce the rest of the configurable UI messages. Compared to the classic signer experience, the new user interface offers more flexible and dynamic content as the signing process proceeds. We will cover all the logic behind this dynamic content, so you know what to expect when trying the new signer experience for yourself.

Dynamic Content in the New Signer Experience


1. "oss.components.Pages.Page.PageFooter.documentPageNumber"
Default Value: "Page {pageNumber} of {totalPages}" 
Description: The page number displayed as the footer on each document page11-6-1


1. "oss.components.SideBar.documents"
Default Value: "Documents"
Description: Documents pane title within the side menu

For a document with signatures, you will see the labels below within the document pane:
2. "oss.components.SideBar.Document.signaturesRequired" / "oss.components.SideBar.Document.readyToConfirm" / "oss.components.SideBar.Document.completed"
Default Value: "Signatures required" / "Ready to confirm" / "Completed signing"
Description: When there is an unsigned signature, when all signatures have been signed but not yet confirmed, or when the document has been completed.

If the document is a disclosure type or a review-only document, you will see the labels below:
3. "oss.components.SideBar.Document.review_accept" / "oss.components.SideBar.Document.accepted"
Default Value: "Review & accept" / "Document accepted"
Description: Before or after the document has been accepted

4. ""
Default Value: "Review"11-6-2


1. ""
Description: Download pane title within the side menu.

2. "" / "oss.components.SideBar.Download.pages"
Description: Indicate the number of pages in the document, whether single or multi page.

3. "oss.components.SideBar.Download.all"
Description: Caption for the “Download All” button within the Download pane.11-6-3


When scrolling to the bottom of the document view page, a confirm bar will be displayed. The button and the text within the confirm bar will be rendered differently, depending on the scenario below:

1. When accepting a disclosure document:
"oss.components.ConfirmBar.accept" / "oss.components.ConfirmBar.document.nonConsentDisclosure.text"
Default Value: "Accept" / "I have read the following document"
2. When all signatures have been signed, and the signers are awaiting confirmation:
"oss.components.ConfirmBar.confirm" / "oss.components.ConfirmBar.document.signing.text"
Default Value: "Confirm" / "Please confirm to complete signing"

3. When current document has been completed and allowed the signer to navigate to the next document:
"" / ""
Default Value: "Next" / "Continue to the next document"

4. When you are browsing the last document and the signing has been completed. This button allows you to switch between the thank you summary page and document view page.
"oss.components.ConfirmBar.finished" / "oss.components.ConfirmBar.document.completed.text"
Default Value: "Finished" / "You completed signing all your documents"

5a. When there are only optional signatures in the document, the confirm bar will remind your signer to review and sign.
Default Value: "Please review and optionally sign this Document by scrolling and clicking on the \"Sign\" or \"Initial\" boxes or click Continue to proceed without signing."
5b. When a signer tries to confirm a document with optional signatures  left unsigned, a pop-up dialog will be displayed as an extra step of confirmation.
Default Value: "There are unsigned optional signature(s) on the document.\ Are you sure you want to proceed?\ Note that if you proceed, you won't be able to go back."


1. "oss.components.Notification.dismissButton"
Description: Dismiss button displayed within the Alert notification

2. "oss.components.Notification.moreAlertsText"
Description: Displayed within the Alert notification when there are more than one alerts to be displayed.11-6-7

Looking Ahead to Next Week on the OneSpan Developer Blog

That’s all of the configurable UI messages and the logics behind the components. For the next blog, we will walk through the process of adding text formats to these UI labels by using the markup language “Markdown”.  

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

OneSpan Developer Community

OneSpan Developer Community

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

Join Today