Friday 29 June 2018

Adding Signature Capture to a Lightning Flow

Adding Signature Capture to a Lightning Flow

Screen Shot 2016 11 07 at 18 36 19

Introduction

As regular readers of this blog know, a few years ago I wrote a Lightning Component for the launch of the Component Exchange called Signature Capture which, in a shocking turn of events, allows a user to capture a signature image and attach it to a Salesforce record. Over the years it’s received various enhancements and when these are notable I write a blog post about it. The latest version satisfies this requirement as it adds support for inclusion in Lightning flows. Note that the rest of this post assumes that you are working with V1.31 of Signature Capture or higher.

The Scenario

I’m going for a pretty simple scenario - a custom button on the a Salesforce record starts a flow that contains just the Signature Capture component. Once the user is happy with the signature and saves it, finishing the flow returns them to the record that they started from.

Creating the Flow

If you are a metadata type, you can install the demo flow from the Signature Capture Samples Git repository. It’s called Signature_Capture don’t forget to activate it.

If not, carry out the following steps to create the flow:

  1. Open the flow designer
  2. Click on the ‘Resources’ tab and on the resulting list click ‘Variable'

    Screen Shot 2018 06 28 at 16 51 15

  3. Create a new variable named ‘recordId’ and click OK - this will contain the Id of the record that the user wishes to capture a signature against.

    Screen Shot 2018 06 28 at 16 47 32
     
  4. Click the ‘Palette’ tab and on the resulting list drag ‘Screen’ onto the canvas:

    Screen Shot 2018 06 28 at 16 52 41

  5. Fill in the ‘Name’ as desired - I went for ‘Signature Capture’ as I’m a creative type:

    Screen Shot 2018 06 28 at 16 56 54

  6. Click the ‘Add a Field’ tab and scroll to the bottom of the list and choose ‘Lightning Component’:

    Screen Shot 2018 06 28 at 16 57 27

  7. Click the ‘Field Settings’ and configure as shown below - note that I had to remove the entry that was automatically added to the ‘Outputs’ tab before I could save. Make sure to set the value of the 'Record Id' attribute to the 'recordId’ variable - this ensures that the captured signature is stored against the correct Salesforce record.

    Screen Shot 2018 06 28 at 16 58 23

  8. Set the screen as the start element
  9. Save the flow
  10. Activate the flow

And that’s it! Straightforward but the flow isn’t very useful as it’s not attached to anything.

Creating the Custom Button

Using the URL of the flow seems pretty clunky, but what can we do?

  1. Open the flow and copy the URL value:

    Screen Shot 2018 06 28 at 17 02 40

  2. Navigate to the setup page for the object you want to be able to launch the flow from (I’ve gone for Account) and click ‘Buttons, Actions, and Links’
  3. On the resulting page, click ‘New Button or Link'
  4. Configure the button as follows, replacing the ‘Button or Link URL’ with the concatenation of your flow URL (copied in step 1) and the appropriate record id for for the sobject type. The retURL parameter is the secret sauce to send the user back to the record when they finish the flow:

    Screen Shot 2018 06 28 at 17 19 11

  5. After saving, click the ‘Page Layouts’ link from the sObject setup page.
  6. Choose the layout to add the button to.
  7. On the resulting page builder, select the 'Mobile & Lightning Actions’ item from the palette:

    Screen Shot 2018 06 28 at 17 08 23

  8. And drag your new custom button on to the 'Salesforce Mobile and Lightning Experience Actions’ section:

    Screen Shot 2018 06 28 at 17 08 26

  9. Save the page layout

Enable Lightning Flow

Flows containing Lightning components require lightning flow to be enabled.

  1. Navigate to Setup -> Process Automation -> Process Automation Settings
  2. Check the ‘Enable Lightning runtime for flows’ box:


    Screen Shot 2018 06 28 at 17 12 53

  3. Save the settings.

Take it for a Spin

Once everything is in place you can launch the flow by navigating to a record of the appropriate sObject type and clicking the custom button. The video below shows my flow configured above being launched and completed from an account record:

Related Posts

 

9 comments:

  1. Hi, Keir. Alex Edelstein at Salesforce here. This is great. I'm going to blog about it on my Flow Component blog (https://medium.com/@alexedelstein) and add a reference to it over at the unofficial Flow Component Library (https://sites.google.com/view/flowunofficial/home)

    ReplyDelete
    Replies
    1. Hi Alex, that's awesome!

      (Sorry about the late reply - some comments got caught in a spam filter and I'm just finding them now)

      Delete
  2. Hi Bob - just trying this out and it seems great thus far! I'm curious if you have been able to make this work with Files (instead of notes and attachments).

    Cheers,

    Patrick

    ReplyDelete
    Replies
    1. Hi,

      The latest signature capture supports files and attachments.

      Delete
  3. Keir, wonderful component. I am using it in a flow. Is there any way upon to test if the User signed? I imagine I could check for the attachment, but I was thinking something more immediate that did not require moving off the screen? Also, you might consider a "Cancel" button.

    Finally, do you have a link to a place someone can make a "$$ contribution"?

    ReplyDelete
  4. Kier, my first Post did not seem to take. Here is is again. Great component! I am using it in a Flow. Is there anyway to determine if the entered a signature. I guess I could look for the attachment, but was looking for something more interactive. Also, have you given some thought to adding a Cancel button. Finally, is there a link somewh

    ReplyDelete
    Replies
    1. This post got caught in the spam filter so I've just seen it. The latest version won't let the user save an empty image so hopefully that covers this use case. I'm curious as to what the cancel button would do in a flow - if you want to raise a feature request you can create an issue in the github repo at : https://github.com/keirbowden/sigcapapp

      Delete
  5. Hi Bob,

    Is there a way to get the Id (the ContentDocument id) of the signature when it attaches? basically i want to feed the signature into a rich text field so i can combine the signature with text fields so i have a form that has text fields and the signature on a "form" object. Atm the only way i see getting it is via looking it up after it attaches for example
    https://whateverwhatever.lightning.force.com/lightning/r/ContentDocument/0690p000000UEjFAAW/view

    ReplyDelete
    Replies
    1. That's an interesting idea, and I think I should be able to make the id available as an output parameter so that it can be stored as a flow variable.

      I've created a Feature Request for this in the samples repo - https://github.com/keirbowden/sigcapapp/issues/23 if you want to track it.

      Delete