How to Add a Signer with a Custom Email in DocuSign

Using DocuSign’s Signer entity on a page gives end users a quick way to add a signer to an established envelope. The new signer then receives the envelope via the original email message.

But what if you want to be able to add new signers with a custom message? Use the DocuSign data source action Add Signer to Envelope with Custom Email.

Assumptions

Note

This tutorial assumes you have:

  • a Docusign data source type
  • a Skuid page with a model on the DocuSign Signer entity
  • A table on the page (on the Docusign Signer entity) that successfully lists all current signers to a designated envelope.

Create a New Model [[]]

Create a new model on the Signer entity, one that will be used by the action sequence. (Be sure to use a distinct name for this model, to distinguish it from the one used by the Signer Table.)

Warning

It is necessary to have a second Signer model for the action sequence. Using the same model as you use on the Table will result in errors.

Create an Action Sequence [[]]

In the element pane, click fa-cogs Action Sequence in the element pane and create the following action sequence:

  1. Click fa-plus-circle Add Action Sequence.
  2. In the Sequence properties pane edit.
    • Type: Reusable Action Sequence
    • Sequence Name: Memorable name for the sequence
    • Description: Description of what the sequence does
  3. Click fa-plus-circle Add Action three times to add three actions to the sequence. Click each action in turn, and edit:
    • Action 1:
      • Action Type: Show Message and block UI
      • Message: Loading
      • Timeout (seconds): 1
    • Action 2:
      • Action Type: Create new row(s)
      • Model: Use the model you created in the first step (not the Table’s Signer entity model)
      • Place row at …: Start of Model Data
      • Have associated Components initially show this row in …: Edit mode
      • Rows to use: None
    • Action 3:
      • Action Type: Show Popup
  4. In the third action, click Configure Popup.

Configure the action sequence’s popup [[]]

Add the following features to the popup:

  1. A Field editor with the desired fields (for example, Name and Email).
  2. A Button Set with a new button with the following settings in the Basic tab:
    • Button Type: Run Multiple Actions
    • Button Label: Add a “call to action” for the end user, for example, “Send email to new signer,” one that tells them this button completes the action.
    • Button Icon (optional): Add an icon.

Add actions to the popup’s Button Set [[]]

In the Actions tab, click fa-plus-circle Add Action six times to add six actions to the button, then click each action in turn and edit:

  • Action 1:
    • Action Type: Show Message and block UI
    • Message: Loading
    • Timeout (seconds): 1
  • Action 2:
    • Action Type: Run Data Source Action
    • Data Source: DocuSign
    • Action: Adding Signer to Envelope with Custom Email.
    • Subject Line: The subject line for the custom email.
    • Email Body: The body of the custom email.
  • Action 3:
    • Action Type: Query Model
    • Model: The model for the Signer entity
    • Query Behavior: Standard - Completely Replace Data
  • Action 4:
    • Action Type: Remove all rows from Model.
    • Models to Employ: Use the new Signer entity model created in the first step (not the Table’s Signer entity model).
  • Action 5:
    • Action Type: Close all modals
  • Action 6:
    • Action Type: Unblock the UI

Close the popup (and perform a short victory lap).

Now that you have the action sequence, you need to provide a way for end users to activate it.

Add a Button Set and Button [[]]

  1. On the page with the Table that’s listing the current signers, add a Button Set or Page Title component.

    Note

    Make sure it’s on the Signer entity model used for the Table.

  2. Add a button, and click it, then edit:

    • In the Basic tab:
      • Button Type: Run Multiple Actions
      • Button Name: Use a name that will serve as a call-to-action for the end user to start the process, for example, “Add new signer with custom email.”
      • Button Icon: Select an icon to display in the row.
    • In the Actions tab, click fa-plus-circle Add Action. Edit the new action:
      • Action Type: Run Action Sequence.
      • Action Sequence: The action sequence you just created.

The End User’s Experience

The user clicks the button on the Button Set to open a popup where they can add a new signer. Then, they click the button within the popup to complete the action (save the new signer and send them a custom email).

The new signer will appear in the Table once the popup has closed.