ContractSafe - Salesforce Integration

Step by step guide on how to integrate ContractSafe with Salesforce Lighting Experience (LEX)

Here is how:

Step 1: Enable ContractSafe Salesforce integration through Settings - Security and Integration - and enable the Salesforce integration. Click the Generate Salesforce Endpoint URL and copy it for future use.

Enter your Salesforce Account user, Password and Account Security Token

 Step 2:

In your Salesforce account, add app.contractsafe.com as a new Remote Site.

 

Step 3: Modify the Apex Class

- In the top right, click the settings gear icon and navigate to Developer Console.

 Click File > Open > Classes > {the file for the old Apex class}.  Alternatively, create a new Apex class and keep the old one if you would like.

- Insert the following code. Note that the bold part of the code will need to be your specific ContractSafe endpoint that we have generated and copied from the previous step:

global class ContractSafeWsLightning {
@AuraEnabled
webservice static void sendToCS(String contractId) {
User u = [select email from user where id=:userinfo.getuserid()];
String useremail = u.Email;
HttpRequest req = new HttpRequest();
HttpResponse res = new HttpResponse();
Http http = new Http();
//salesforce/2e0702e65992437a984819a9463b5549/sfc/
req.setEndpoint('https://dev-app.contractsafe.com/salesforce/91c8079788e14b0b849bd62d9dfcb5ff/sfc/');
req.setMethod('POST');
//req.setBody('sfobjectID='+EncodingUtil.urlEncode(contractId, 'UTF-8'));
req.setBody('{"sfobjectID":"'+ contractId +'","user":"' + useremail + '"}');
//req.setCompressed(true); // otherwise we hit a limit of 32000
try {
res = http.send(req);
} catch(System.CalloutException e) {
System.debug('Callout error: '+ e);
System.debug(res.toString());
}
}
}

 

Step 4: Lightning Component
 
1. From the developer console, click File > New > Lightning Component - you can name it ExportToCsLightning for easier reference.
2. This will land you in a .cmp file under the name you've chosen. Add the following code:
<aura:component controller="ContractSafeWsLightning" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">    
<div class="slds-m-around--medium">
<lightning:button variant="brand" label="Export To CS" onclick="{! c.sendContract }" />
</div>
</aura:component>

 

3. In the sidebar on the right, click CONTROLLER to define the component's controller: 
({
    sendContract : function(component, event, helper) {
        helper.getResponse(component);
    },
})

 

4. On the right again, click HELPER. The following goes in there:
({
    getResponse: function(component) {
        // create a server side action.      
        var action = component.get("c.sendToCS");
        action.setParams({
            "contractId": component.get("v.recordId")
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {

                alert("Contract sent successfully");
            } else {
                console.log(response.getError());
            }
        });
 
        $A.enqueueAction(action);
    },
})

 

Step 5: Test


1. Now we're ready to test. Click File > New > Lighting Application and instantiate your component inside it, like so:

<aura:application >
<c:ExportToCsLightning/>
</aura:application>

2. On the right, click "Preview" and it should load up the component. If all is good, you should see a simple button. It won't do much if you click it since it's not on the contract page and has nothing to reference.

3. Now for the real test. Navigate to your Contracts page and choose a contract. 
4. Click the settings icon in the top right, followed by Edit Page
5. If everything is configured correctly, you should be able to see your custom component towards the bottom of the panel to the left. Go ahead and click and drag it anywhere you'd like on the page.
6. Save up and activate the page.
7. You should now see a button that reads "Export To CS"
8. Click the button and you're good to go.