Example 4: Create a draft Signature Request that a user can edit and preview before sending

The previous examples all demonstrate sending a Signature Request automatically using Apex. If you’d like your users to preview the Signature Request first and make any edits (eg. moving a signature field to align with text), you’d use the HelloSignDraftDocumentService class, which extends the functionality in the HelloSignDocumentService class highlighted above. You’ll additionally need to create a Lightning Component or Visualforce Page that includes Javascript to display the Prepare and Preview screens in an iframe.

Apex Controller

public with sharing class CreateEmbeddedDraft {
  public String claimURL {public get; private set;}
  public Boolean showWelcome {public get; private set;}
  public Boolean showSuccess {public get; private set;}
  public Boolean showError {public get; private set;}

  // Your HelloSign client ID is necessary when using our Embedded Sending methods. 
  public static String getHelloSignClientId() {
    return HelloSign.HelloSignDocumentService.getHelloSignClientId();
  }

  public CreateEmbeddedDraft() {
    showWelcome = true;
    showSuccess = false;
    showError = false;
  }

  public void showError() {
    showWelcome = false;
    showSuccess = false;
    showError = true;
  }

  public void showSuccess() {
    showWelcome = false;
    showSuccess = true;
    showError = false;
  }

  public void createDraft() {
    // Specify a parent record and signer. See Example 1 above for more details. 
    Id parentId = '001f200001cFD4x';

    HelloSign.HelloSignDraftDocumentService.Signer signer = 
      new HelloSign.HelloSignDraftDocumentService.Signer();
    signer.name = 'Signer Name';
    signer.email = '[email protected]';

    // Specify a document
    HelloSign.HelloSignDraftDocumentService.Document doc = 
      new HelloSign.HelloSignDraftDocumentService.Document();
    doc.recordId = '069f2000005M1lp';
    List<HelloSign.HelloSignDraftDocumentService.Document> docs = 
      new List<HelloSign.HelloSignDraftDocumentService.Document>{doc};

    // Set up the Signature Request service object like in the above examples
    HelloSign.HelloSignDraftDocumentService.SignatureRequest sigReq = 
      New HelloSign.HelloSignDraftDocumentService.SignatureRequest();
    sigReq.subject = 'Embedded Draft';
    // NB: “title” is not a valid property for this particular method.
    sigReq.message = 'Please sign the agreement';
    sigReq.signers = new List<HelloSign.HelloSignDraftDocumentService.Signer>{signer};

    // The requestorEmailAddress property must be set when using this approach
    sigReq.requestorEmailAddress = '[email protected]';

    // Send the signature request. Notice the different method name.
    HelloSign.HelloSignDraftDocumentService.SendSignatureResponse response = 
      HelloSign.HelloSignDraftDocumentService.sendSignatureRequestDraft(parentId, 
                                                                        docs, 
                                                                        sigReq);

    // Get the draft claim URL that will be used in your Visualforce page below
    claimURL = response.claimURL;
  }
}

Visualforce Page

<apex:page showHeader="true" controller="CreateEmbeddedDraft" action="{!createDraft}">
  <apex:includeScript value="https://s3.amazonaws.com/cdn.hellosign.com/public/js/hellosign-embedded.LATEST.min.js" />
  <!-- For more information about the following JavaScript, see     -->
  <!-- https://app.hellosign.com/api/embeddedRequestingWalkthrough. -->
  <!-- NB: Only embedded SENDING is available; embedded SIGNING is  --> 
  <!-- not currently supported in HelloSign for Salesforce.         -->
  <script>
    HelloSign.init("{!HelloSignClientId}");
    HelloSign.open({
      url: "{!ClaimURL}",
      allowCancel: true,
      messageListener: function(eventData) {
        if (eventData.event == HelloSign.EVENT_SENT) {
          showSuccess();
        } else if (eventData.event == HelloSign.EVENT_ERROR) {
          showError();
        }
      }
    });
  </script>

  <apex:form>
  <apex:actionFunction name="showSuccess" action="{!showSuccess}" rerender="hellosign" />
  <apex:actionFunction name="showError" action="{!showError}" rerender="hellosign" />
  </apex:form>

  <apex:pageBlock id="hellosign">
    <apex:pageBlockSection rendered="{!showWelcome}">
      Please prepare and send the Signature Request in the popup window.
    </apex:pageBlockSection>
    <apex:pageBlockSection rendered="{!showSuccess}">
      Your Signature Request has been sent.
    </apex:pageBlockSection>
    <apex:pageBlockSection rendered="{!showError}">
      An error occurred.
    </apex:pageBlockSection>
  </apex:pageBlock>
</apex:page>