How to Use Signature Component in Adalo

Proper Documentation that I wish I had

Great Component, but slightly vague documentation

If you, like me, have implemented the Signature Pad component created by Samuel Wolnerman (Thank you for this!!) for the Adalo marketplace, you must have faced some difficulty understanding how it works and this slightly irritating issue:

When users tap/click save, they move on to the following screen whether they actually signed or not…-.-

I did solve that issue for both web and mobile, but let’s take it slow and explain step by step how to install and use this component. If you only came here to solve the empty signature issue feel free to scroll down directly to step 2 👇

1. Install the component from the marketplace

first, you have to click the colored plus on the top left corner of your screen to add a component, scroll down to find the marketplace and click (Explore Marketplace)

Then, scroll down until you find the Signature Pad component and click install.

2. Don’t Save Empty Signatures

1. To use the component, let’s assume that users of your app submit requests that must be signed to continue. In that case; add a Text Property called signature to your Requests data type. This is where your image will be saved.
2. On the screen where users submit the form, add a condition that only allows users to create a request and navigate to next screen Only if the Signature is not an empty image. Because even empty signatures have saved URLs so it will never be empty.

→ So the condition must be (for web apps):

Create form or Link to (SCREEN NAME) → Sometimes →if signature is not equal to:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=

→ For mobile:

Create form or Link to (SCREEN NAME) → Sometimes →if signature is not equal to:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAAD5Ip3+AAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=

I don’t know about you but this was kind of vague to me in the beginning and I only figured it out by trial and error so I hope this saves any of you some time and frustration🤷🏻‍♀️

3. Display Saved Signatures in the UI (admin dashboard for example)

If you are an admin working through the list of request, you will need to see the signature for each request to validate it.

There are two ways you can add the saved signatures to your UI, but you must have Current Request as available data on the screen or have a list of requests:

Method 1: Using Image component

1. add an image component to the screen / list where you are displaying the request info.
2. for image source, choose URL and use magic text to set the URL as the the Current Request’s Signature. Like so:

Method 2: Using Web View

Since the signature is saved as a location URL, you can display it using a web view. Simply add a Web View component to the list or screen where you are displaying the request info. And for URL, use magic text to set it to Current Request’s Signature.

I tried both for the sake of this tutorial and here is how they look on the editor and live on the web:

Why This Tutorial

I am on a mission to make the tutorials and write documentation I wish someone had written for me. So here we go, I will learn and share. God bless knowledge sharing, God bless proper documentation and God bless you for making it this far :)

Lots of love! #keepdesigning