Adding attachments in custom actions

As you may be familiar with Kaizala custom actions, they follow a response based interaction – wherein, you submit a response from the response view. And these responses are based on the type of questions you define in the AppModel. Handling responses for the basic types like SingleSelect, MultiSelect, Numeric and Text are straightforward. However, handling attachments could be tricky. In this post, I will take you through attaching a video in the response using the question type AttachmentList – the question type that allows you to submit an array of attachments in a single question. Further, we will take a look at how the attachment response shows up on the Kaizala Management Portal and in webhook – to help understand consumption / integration of responses with attachments.

Below are the sections in which I have organized this post:

  1. Design the card / action package
    1. Define the question in appModel.json
    2. Design the response flow
      1. Launch file picker to select the video
      2. Provide video file as input in the response
    3. Design the summary flow
      1. Parse response to get the video
      2. Launch player to play the video
  2. Look at the video in responses

1) Design the card / action package

In order to design the card, you will need to create a custom action package. In case you are not familiar with custom action development, I recommend you read the post Developing a Feedback form. This post would leverage the same card and build over it.

1.1) Define the question in appModel.json

In order to upload an attachment, you will need a question that can capture the video in the response. The question type we would be using for that is AttachmentList. An attachment list can hold an array of attachments (Image, Video, Audio, Document). In this example, however, we will be using only a single Video attachment.

Fig 1 – AttachmentList question type in appModel.json

1.2) Design the response flow

1.2.1) Launch file picker to select the video

In the creation view, I have added an image element and in the onclick handler will launch the file picker. The KASClient API to launch the file picker is showAttachmentPickerAsync (documentation). This method takes 3 arguments – an array of file types (only Video for this example), properties (null here), callback method with 2 parameters (array of attachments and error).

Fig 2 – showAttachmentPickerAsync API call to selec the video

In order to show that the image was selected, we could use the thumbnail of the video in the image element. Subsequently, cache the video in a variable (_video in this example) that can be used while submitting the response.

Fig 3 – setting the thumbnail from the video
Fig 4 – sample attachments object returned by showAttachmentPickerAsync call

1.2.2) Provide video file as input in the response

To provide the selected video as response, stringify the attachment array json and add it in the question to answer map. (in this example, the attachment array was cached in variable _video).

Fig 5 – adding the selected video to questionToAnswerMap

1.3) Design the summary flow

In the summary view, we will query for the response that was submitted and render the page with user’s response.

1.3.1) Parse response to get the video

While parsing for the responses, since the video question was optional (as we did not mandate the video in response), I have checked if the video is present. Based on that, I have either rendered a no video / play icon.

Fig 6 – parsing video attachment from user response
Fig 7 – sample entry in questionToAnswerMap for attachmentList question with video attachment

1.3.2) Launch player to play the video

In order to play the video, we will need to use the KASClient API openAttachmentImmersiveView (documented here) which takes the attachment object as input. This opens the attachment (video) in the immersive view.

Fig 8 – Opening / playing the video

2) Look at the video in responses

In order to show how the response looks from the WebHook side, I registered a webhook with https://webhook.site and got the below callback.

Fig 9 – WebHook data of the response

The response to the 3rd question (video attachment) has the CDN path to the uploaded image and the file name. It looks like this:

Fig 10 – mediaUrl and mediaFileName in the webhook callback data

Also, you could get the CDN path of the videos uploaded from the Kaizala Management Portal using the Export Data option. Below is a sample screenshot:

Fig 11 – screenshot of data exported from Kaizala Management Portal showing CDN URL

Closing notes

Thank you for reading the post. If you would like to receive updates, you could subscribe to receive an email each time a post is written.

The code for this example has been shared here.

APPENDIX

APPENDIX A – Image question type

Kaizala custom action also supports the question of type Image. In case you wanted to just upload a single image, this would be a good fit.

  • The question type to be used in appModel.json would be Image
  • To show the image picker, you can call the KASClient API, showImagePickerAsync. The callback gives the local file path of the image picked.
  • While submitting the response, the image’s local file path needs to be given in the questionToAnswerMap.
  • On querying responses, you would get the image local path.
  • In order to display the image in full screen view, you could call the KASClient API, showImageImmersiveView that takes the image path as a parameter.

I have shared a sample package with Image question here.

APPENDIX B – Restricting image picker to camera

There are scenarios where you may want the user to use images from camera only and disallow gallery. You could use the property is to set the image source.

  • 0 — camera and gallery
  • 1 — front camera
  • 2 — back camera
  • 3 — front and back camera

Below is a sample code snippet to pick image from camera.

var attachmentsToShow = [KASClient.KASAttachmentType.Image];
var props = {};
props["is"] = 2; // back camera
KASClient.App.showAttachmentPickerAsync(attachmentsToShow, props, function (selectedAttachments, error) {
	if (error != null) {
			return;
	}
	console.log(selectedAttachments)
});

10 thoughts on “Adding attachments in custom actions

  1. We want to show PDFs inside a custom action in Kaizala, we get the PDF from a WS in base64 format.
    We’ve tried with different frameworks without success, the action seems to work fine outside of kaizala on a regular web browser but when we upload and publish the action it simply wont render the PDF, the rest of the action works fine tho.

    Could you please share how we can accomplish this?

    Thank you Gladson

    Like

  2. Hello !
    I am working on a persnalized action that sends the data of a form to a sharpoint list, my problem is that when I upload a pdf file I do not know how to get the url (attribute “spu”) where it is saved on the internet as it happens with the property “generateThumbnailServerUrl”.

    Thank you Gladson.
    Regards

    Like

  3. Hello!
    Thanks for your effort to demonstrate the usage of Kaizala, but I have a question.
    I want to get the covert the uploaded file to Base64 format, whick can only be achieved through the local path attribute of KASAttachment when uploading from Webapp, but from mobile you get the actual path to the file, so how can I convert any file uploaded to Base64 format.

    Regards.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s