There have been asks around how signatures could be captured in Kaizala using custom actions. This could be achieved by using a HTML5 canvas to capture the signature, storing the base64 data into an image and submitting the response with the file path. The rest of the post will delve into the details to achieve this.
Capturing the signature
To capture the signature, we have used a JS library Signature Pad by Szymon Nowak which is a HTML5 canvas that allows smooth signature capture. In the creation view, we capture the signature using Signature Pad and then use a KASClient method to save the signature image’s base64 data into a file using the method saveDataInTmpDirAsync. Below screenshot shows how this has been done.
Note: the package.json takes 2 answers, the first one is the base64 image data (questionToAnswerMap[0]) and the second one is the image file path ( questionToAnswerMap[1] ).
The chat canvas view displays the image response. Below is the snippet of the chat canvas JSON.
The summary view displays the signature captured in the response.
Demo
Below are the screenshots of the card in action.
Hope that was helpful. If you want to get notified of new posts, you could subscribe.
The code for this demo has been shared here.
Hi, could you make a post on how to use the location?
I tried to use KASClient.App.getCurrentDeviceLocationAsync but it gives me an error.
LikeLike
What is the error you are facing?
LikeLike
Hi,
What you have done here is really interesting ! Great work !
I could replicate almost all the custom actions that are posted on this blog but not this one.
I am quite new to kaizala and to development.
Is it possible that you send a more detailed tutorial ?
Or even better that you send the full action package ready to use ?
I would love to integrate this functionality to our systems.
Thank you in advance 🙂
LikeLike
Thank you Sadry!
The code is present at the end of the article itself.
LikeLike
Got it !
Could not see it before. It is present in all the posts but I have done them all by myself when it was possible to save time 🙂
Thank you very much !
LikeLike
I am making an app that uses getCurrentDeviceLocationAsync, I would like that when I open the action card it would show a message indicating if gps is enabled, if it is correct then open the action card otherwise it will only show that popup message without opening the action card.
for example:
https://ibb.co/WKN1y0T
LikeLike
Please write an email with the details to kaizaladev@microsoft.com
LikeLike
Hi, I am quite new to kaizala and to development. And I tried to import the signature.zip file but it gives me an error.
“Action Validation failed. Following errors occurred: New version of Action with id: com.gls.signature.t1 can only be uploaded by Creator of the base Action! “. kindly guide me how to resolve this issue
Thank you in advance
LikeLike
You will need to change the id in the package, zip and upload.
LikeLike
Gladson, your a star! This is so useful, thanks so much, am a big fan of your work.
I have a question though, how can I extract this image from Power Automate? Would appreciate any guidance.
LikeLike
You could use the Power Automate Kaizala connector to listen to the response of the card. The response should have an URL to the image (signature).
Hope that helps. Feel free to reach out to kaizaladev@microsoft.com for any further questions.
LikeLike
Hi Gladson,
One final question, i tried to use Power Automate to ‘Send action to a group’ for this action using the AppModel.json as described in your other post, but it fails and returns ‘Invalid Scope Action’, any ideas?
LikeLike
hey
for some reason it dosent work for me
it seems to be saved but it dosent show the chatCardView .. just a loading gif
i debugged the issue and saw that the saveDataInTmpDirAsync returns with an error
API IS NOT SUPORTED
what can i do in this instance? can i use another function ? or there is another solution ?
LikeLike