Sharepoint Signature: PowerApp PenInput
Tags: microsoft, powerapps, sharepoint
Published: 2022-12-22 16:00:00

## Introduction & Concept
Sharepoint is an awesome tool to share knowledge within a team. Often, we would like to enhance its functionality to fulfill our needs.

And this time, we would like to add a signature field ✍ in SharePoint.

You may say it sounds great, but how do we do it? 🤔

## Application Demo
Well, first look at the result application:

- When a user first creates a record, user can see a signature box and sign in it. The user can also click "Reset Signature" to clear the original one and sign again

![SharePointSign.mp4.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1651456247286/p9S9fhQeQ.gif)

- When user view the record again, user can see the signature

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649915820565/q9eBkr-xd.png" width="200" />

- When user edit the record, user can click "Modify Signature" to sign again
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649916190458/9RHaqwIlS.png" width="400" />

## Steps

### 1. Add a multiple lines of text column

So, create a multiple lines of text column and named it "imageData"
in the SharePoint list. This is for saving signature image byte.

(There is also image type column in SharePoint, but this type of column [CANNOT BE UPDATED IN POWER APPS.](https://powerusers.microsoft.com/t5/Building-Power-Apps/Upload-image-to-Sharepoint-List-from-Powerapps/m-p/695607/highlight/true#M222623))

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649916446731/ygWoC7Uc-.png" width="450" />

### 2. Add PenInput & Reset Button

Then, direct to Power Apps by using `Customize forms` function in SharePoint

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649916605342/znVlY_BTl.png)

Add a PenInput into the app and place it a suitable position.
You can hide the control by set `false` to `ShowControls`.

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649917025377/4otjgds2g.png" width="450" />


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649917266516/YYfu0qaZe.png)

Add a button and named it as "Reset Signature".
Add the command `Reset( PenInput1 );` on the property `OnSelect`

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649917430157/962d-8nnc.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649917605973/77PP_iSDL.png)

### 3. Save the signature when click Save
Add the following script to `SharePoint Integrations`'s `OnSave` so when user click "Save", it will insert the image byte to the column.
```C#
SubmitForm(SharePointForm1);
Set( currentSharePointItem,LookUp( '<Your List Name>', ID=SharePointForm1.LastSubmit.ID ) );
Patch( '<Your List Name>', currentSharePointItem, { imageData :  Substitute( JSON( PenInput1.Image, IncludeBinaryData ), """", "" )  } );
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649917974547/sCfuuJrfQ.png)

For `Substitute( JSON( PenInput1.Image, IncludeBinaryData ), """", "" )`, the output of `JSON( PenInput1.Image, IncludeBinaryData )` is like `"data... EWQS=="`, which the image byte is surrounded by double quotes `"`. In order to remove it, we used `Substitute`.

You can retrieve the SharePoint record id by `SharePointForm1.LastSubmit.ID`.

Ref:
- [Patch function in Power Apps (contains video) - Power Apps | Microsoft Docs](https://docs.microsoft.com/en-us/power-apps/maker/canvas-apps/functions/function-patch#examples)

- [Replace and Substitute functions in Power Apps - Power Apps | Microsoft Docs](https://docs.microsoft.com/en-us/power-apps/maker/canvas-apps/functions/function-replace-substitute#examples)

- [Retrieve Record Id](https://powerusers.microsoft.com/t5/Building-Power-Apps/Retrieving-Unique-ID-Upon-Record-Creation/td-p/407898)

#### Check Point
You can save and publish the app. When you create a record, and if you follow the steps correctly, you should be able to see saved image byte in the `imageData` field.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649918959291/_x4_rqNDb.png)

### 4. Create image to show Signature


Go back to Power Apps. Insert an image and place it on top of the PenInput.

([PenInput.Image](https://docs.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-pen-input#key-properties) cannot be modified. So we need to add an image for showing signature.)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649919163603/ylwkAmWMI.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649919199730/m0I4WRT4Z.png)

Input `LookUp( '<Your List Name>', ID=SharePointIntegration.SelectedListItemID ).imageData` in the property `Image`

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649919318800/NIoaf1Tme.png)

#### Check Point
You can replace `SharePointIntegration.SelectedListItemID` into the record's id in `LookUp( '<Your List Name>', ID=SharePointIntegration.SelectedListItemID ).imageData`. If everything is fine, you can see the signature image you just signed
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649919873780/CTumwmdMC.png" width="450" />

You can also view the record in SharePoint to check if the signature is correctly shown.

### 5. Add logic to hide and show the signature Image
You may already found that as the image has been on top of the Signature, you cannot modify the signature.

In order to resolve this problem, we will show and hide the signature image accordingly:

- New Record, hide the signature image
- View Record/Edit Record, show the signature image
- Edit the signature, hide the signature image

In order to accomplish the above, create a global variable `isSignatureImageVisible` and set it to `true`/`false` accordingly:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649920569531/8VnaU7GlH.png)

For "Edit the signature, hide the signature image" part, when user edit the record, we will do as follow:
- Change the button text from "Reset Signature" to "Modify Signature"
- After user clicked "Modify Signature", it will clear the current signature and change the text back to "Reset Signature"

Set the "Reset Signature" button's property as shown below:
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649920997281/nNTxk2jU_.png)
`If( isSignatureImageVisible ,"Modify Signature", "Reset Signature")`
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649921134580/ZNliUGoZu.png)
`Set( isSignatureImageVisible, false ); Reset( PenInput1 );`

Finally, we would like to save the signature only if user has changed the signature.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649921529526/DRwYaBq7s.png)

```C#
SubmitForm(SharePointForm1);
If( ! isSignatureImageVisible,
    Set( currentSharePointItem,LookUp( '<Your List Name>', ID=SharePointForm1.LastSubmit.ID ) );
    Patch(  '<Your List Name>', currentSharePointItem, { imageData :  Substitute( JSON( PenInput1.Image, IncludeBinaryData ), """", "" )  } ) );
```

Done!🎉👏

## Conclusion
When I first receive this request, I have done some google search on the Internet and found that there are mainly 2 ways to accomplish this. Both of the methods need to use Power Apps since there is no signature field in SharePoint. The differences are:

1. Save the signature image byte in the multiple lines of text created in Sharepoint.
<br>(The one we introduced)
2. Save the signature image file in the one drive and then get the link and pass to hyperlink field or attach it to the record in SharePoint.

I have chosen the 1st method because:
- First method is more straight-forward. It only needs to consider Power Apps and SharePoint, but second method involves NOT JUST the above two apps, but also OneDrive and Power Automate.
- Signature image has a more direct relation with the SharePoint record in the first method, but for the second method, the signature image is related to the SharePoint record through a hyperlink.
- Since first method is simpler, you can pay less effort when you maintain the application