Developing a custom feedback card

banner

This post will take you through developing a custom Kaizala action / card for requesting for feedback using the JavaScript SDK – KASClient.js. This type of action is very similar to the default survey action that ships with Kaizala. It is also known as a request-response format – which means you can request for responses from user (Scenario #1 in the post Exploring Kaizala card view scenarios).

Pre-requisites

These are not actually pre-requisites, but good to have understanding before you jump into developing custom actions for Kaizala.

  1. Introduction to Kaizala Extensibility
  2. Developing a custom action for Kaizala
  3. Exploring Kaizala card view scenarios

Example Scenario

In this post, we will develop a feedback card where we will have 2 questions: a rating (1-5) and a verbatim feedback text. Let’s say we have 2 users: user A sends the survey / card and user B responds to the survey.

survey-workflow-2

As shown in the picture above, it involves 3 flows:

  1. Creation flow – where user A sends / creates the survey
  2. Summary flow – where user B sees his response
  3. Response flow – where user B responds / edits his previous response

We will be calling particular APIs in the SDK (KASClient.js) to achieve these.

Developing Feedback card

To develop the feedback card, we will need to provide the following files in a zipped package:

  1. Action package SDK – KASClient.js 
  2. Question / answer model – AppModel.json
  3. Package manifest with view definitions – package.json
  4. Create the various views required
    1. Creation view
    2. Response view
    3. Response results view

Action Package SDK

The action package SDK / KASClient.js file also needs to be a part of the action package. The methods / functionalities exposed by the SDK would be consumed by the immersive views (creation / response / response results views) and would be translated to native platform specific calls by the Kaizala runtime. The SDK could be downloaded from https://manage.kaiza.la/MiniApps/DownloadSDK. The Microsoft documentation for KASClient.js can be found here.

Question / answer model

App model contains the question / answer model, properties and settings corresponding to the card. Like, the data you would like to capture while an user responds using the card. Below is the app model file for our example.

AppModel file

The developer could choose the name of the app model file but has to be specified in package.json. In this example, we have kept it as AppModel.json. The schema for app model file can be found here.

Package manifest with view definitions

The package.json is the package manifest file that has the configuration details for the action package and should be in the root folder of the action package. This file is mandatory without which package upload would fail. The package manifest schema has been documented here. Below is the screenshot for the example package.json file.

package

(in the interest of keeping the post short, will explain the fields in the package.json in a separate post)

Creating the various views

In order to have the creation flow, response flow and summary flow – we will need to have the corresponding views (html / js) files. In the package.json screenshot above, you will notice that we have defined the file CreationView.html to host the creation flow, ResponseView.html to host the response view and SummaryView.html to host the summary view. These views will call into select APIs in KASClient.js to achieve / build the scenario. Below screenshot gives a gist of what we will be doing.

KASClient APIs-2

Creation View

In the creation view, we will need to get the instance of the form, set a few fields (expiry and title in this example) in the form and then submitFormRequest to create a survey / card instance. This will result in a card being shown on the chat canvas allowing user to respond to the survey.

KASClient APIs-creation-view

Below is a snippet of javascript I have used in this example.

response-view

The HTML part of the creation view has fields for the title and a button to create the card / survey (shown below).

creation-view-html

Response View

In the response view, we will query for the response of the user. In this example, we allow editing of the previous response if the user had already responded.

KASClient APIs-response-view

  • Querying for user’s response is done by calling getMyFormResponsesAsync API
  • In order to submit a form response, we will need to build a json that will contain the question to answer map
  • Finally, submit the user’s using sumbitFormResponse API (** notice the spelling of sumbit in sumbitFormResponse!).

Below is a screenshot of response submission javascript.

response-submission

Summary View

In the summary view, we will query for the form summary to show all the responses / feedback.

KASClient APIs-summary-view

Code snippet to fetch the summary:

summary code

References

Closing remarks

I hope that was helpful to get a basic understanding on developing a request-response type of Kaizala action. The package for the card developed in this example has been shared here. Please share your comments, feedback / any questions you may have through the Contact page.

One thought on “Developing a custom feedback card

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