OneSpan Sign How To: Creating a Simple Visualforce Page App

Haris Haidary, March 14, 2018
Thumbnail

It is well known that Salesforce is one of the most flexible and powerful cloud-based CRM systems currently in the market. Its programming language APEX is one that executes on the Force.com platform. As per Salesforce's introduction guide, APEX is used to:

Add business logic to applications, to write database triggers, and to program controllers in the user interface layer. It has a tight integration with the database and query language, good web services support, and includes features such as futures and governors for execution in a multi-tenant environment. - An Introduction to Force.com APEX code

But, did you know that OneSpan Sign also offers an APEX SDK? In this blog, I will show you how to create a simple Visualforce page application with OneSpan Sign's APEX SDK. Before diving into the code, let us go over a few requirements.

Requirements

Salesforce Developer Account In order to develop and test your app on the Salesforce environment, you will need a developer account. You can signup for a free Salesforce developer account from their website. OneSpan Sign Sandbox Account You will also need an OneSpan Sign sandbox account, for which you can signup for free here. OneSpan Sign's APEX SDK Lastly, you will need to install the APEX SDK in your Salesforce developer account. You can find instructions on how to do so from our GitHub page.

Creating a Visualforce Page App

Let's get started with creating a simple Visualforce page application. The first thing you'll want to do is configure the APEX SDK. Head over to your "Custom Settings" in your Salesforce developer account. If you've deployed the APEX SDK correctly, you should see the following: esl-salesforce In the Action column, click on "Manage" (e-SignLive Connection Settings) and then "Edit". In this page, you will need to enter your OneSpan Sign API key along with your endpoint URL (i.e. https://sandbox.esignlive.com/api) and click Save. If you don't know how to retrieve your OneSpan Sign API key, you can read my previous blog. The next step is to add the OneSpan Sign endpoint URL to your Remote Site Settings for any APEX callout can call an external site. Click on "New Remote Site" and enter the following values: esl-remote Now, let's write the Visualforce page. Select "Visualforce Pages" on left-hand side menu and click on "New". You can name and label this page to anything you wish. For example, I've set both to "index". Go ahead and copy the code below. I will go over it in details shortly.

<apex:page docType="html-5.0" controller="eslController">
<apex:outputPanel id="tst">

<div style="margin-left: 10px;" id="eslForm">
<br />
<br />
<h4>eSignLive Embedded Session Example</h4>
<br />
<br />  
    <table>
        <apex:form >
            <tr>
                <td>
                    <apex:outputlabel >Enter First Name:</apex:outputlabel>
                </td>
                <td>
                    <apex:input value="{!inputFirst}" id="firstName"/>
                </td>
            </tr>
            <tr>
                <td>
                    <apex:outputlabel >Enter Last Name:</apex:outputlabel>
                </td>
                <td>
                    <apex:input value="{!inputLast}" id="lastName"/>
                </td>
            </tr>
            <tr>
                <td>
                    <apex:outputlabel >Enter Email Address:</apex:outputlabel>
                </td>
                <td>
                    <apex:input value="{!inputEmail}" id="email"/>
                </td>        
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <apex:commandButton rerender="tst" action="{!createPackage}" value="Create Package" id="eslButton" oncomplete="createIframe();" />
                </td>
            </tr>
        </apex:form>  
    </table>      
</div>

<script>
    function createIframe() {
        var x = document.getElementById("eslForm");
        x.style.display = "none";
        var url = "{!signerURL}";
        
        var y = document.getElementById("iframe1");
        y.src = url;
        y.style.display = "block";
    }
</script>

</apex:outputPanel>

<iframe id="iframe1" src="" width="1000" height="1200" style="display: none;" />

</apex:page>

The form takes in user inputs (first name, last name, and email address) and sends that information over to the "eslController" class to create a transaction in eSignLive. Once the transaction is created, the form is hidden and an embedded signing session is displayed through an iframe using JavaScript. Let's look at the "eslController" class.

public class eslController {

    public String inputEmail { get; set; }

    public String inputLast { get; set; }

    public String inputFirst { get; set; }
    
    public String signerURL { get; set; }
    
    private DateTime NOW = datetime.now();

    public PageReference createPackage() {
       
        //Create esl client
        ESignLiveSDK helper = new ESignLiveSDK();
        
        //Create package
        ESignLiveAPIObjects.Package_x pkg = new ESignLiveAPIObjects.Package_x();
        pkg.name = 'Example Package Using APEX SDK ' + NOW;
        
        String packageId = helper.createPackage(pkg);
        
        //Add Signer
        String roleResponse = helper.addRole(inputFirst, inputLast, inputEmail, packageId);
        
        //Add Document
        StaticResource sr = [SELECT Id,NamespacePrefix,SystemModstamp FROM StaticResource WHERE Name = 'samplePdf' LIMIT 1];
        String prefix = sr.NamespacePrefix;
        
        if( String.isEmpty(prefix) ) {
            prefix = '';
        } else {
            //If has NamespacePrefix
            prefix += '__';
        }
        
        String srPath = '/resource/' + sr.SystemModstamp.getTime() + '/' + prefix + 'samplePdf'; 
        PageReference pg = new PageReference( srPath );
        Blob content = pg.getContent();

        Map<String, Blob> doc = new Map<String, Blob>();
        doc.put('Sample Document', content);
        
        ESignLiveAPIObjects.Document document = new ESignLiveAPIObjects.Document();
        document.name = 'Sample Contract';
        document.id = 'document1';
        
        helper.createDocuments(packageId, document, doc);
        
        //Add Signature
        Map<String, Object> role = (Map<String, Object>)JSON.deserializeUntyped(roleResponse);
        String roleId = (String)(role.get('id'));
        
        ESignLiveAPIObjects.Field field = new ESignLiveAPIObjects.Field();
        field.left = 208;
        field.width = 200;
        field.height = 50;
        field.top = 518;
        field.page = 0;
        field.subtype = 'CAPTURE';
        field.type = 'SIGNATURE';
        
        List<ESignLiveAPIObjects.Field> fields = new List<ESignLiveAPIObjects.Field>();
        fields.add(field);
        
        ESignLiveAPIObjects.Approval approval = new ESignLiveAPIObjects.Approval();
        approval.fields = fields;
        approval.role = roleId;
        
        String signatureResponse = helper.addSignature(packageId, 'document1', approval);
        
        //Send package
        pkg.status = ESignLiveAPIObjects.PackageStatus.SENT;
        
        helper.updatePackage(pkg, packageId); 
        
        //Get signing URL
        signerURL = helper.getSigningUrl(packageId, roleId);
        
        return null;
    }

}

The "eslController" class parses the information from the form and uses the APEX SDK to create the transaction. Once it is created, the signing URL is returned to the Visualforce page to display the Signing Ceremony in an iframe. The document used to create the transaction is taken from the Static Resources menu in your Salesforce developer account. Hence, whichever name you gave your pdf, you will have to update line 28 and 38 in the "eslController" class accordingly. If you have questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the developer community forums: developer.OneSpanSign.com. That's it from me. Thank you for reading! If you found this post helpful, please share it on Facebook, Twitter, or LinkedIn. You can find all of my previous blogs by going to my author page. Haris Haidary Technical Evangelist LinkedIn | Twitter