Form View Handler

The form view handler returns the form response. In this handler, the user can define the form inputs. It allows the users to access the form independently using a form permalink (the user doesn't have to rely on internal tools such as commands or message actions to trigger the form). Using this permalink, users can access the form directly from the chat window or in a new tab. Moreover, you can add upto 10 custom parameters in the permalink to customize the form.

Users can also generate a QR code through the Form View Handler by clicking the QR code icon in the Form Permalink section. The form permalink is encoded into the generated QR code, which on scanning will execute the Form View Handler. Custom Parameters are also supported in the QR code.

Note:

1. The character limit for custom parameters in the permalink is 10,000.
2. For instant scanning, the character limit for custom parameters while generating a QR code is restricted to 1000.
3. Avoid adding sensitive information (email addresses, passwords, personal mobile numbers, etc..) in custom parameters.

With the help of the form view handler, all you have to do is to build a form and paste it's code in the handler. This way you can generate a form permalink or a QR Code and easily share it with others. You can easily build a form using the form builder.

Example: Creating a feedback form for employees

Let's say you have hundreds of employees working in an office. Let's create a feedback form for the employees so they can submit their concerns about the facilities in the office. In this example, let's say we have 4 floors in the office including the ground floor, and we want to let the employees submit any concerns about seating availability, restroom facilites and the A/C. 

Form View Handler:

Copy To Clipboard


info params;
//Location
locationInput = {"type":"select","name":"location","label":"Location","hint":"Choose a location","placeholder":"","mandatory":true,"options":{{"label":"Ground Floor","value":"0"},{"label":"First Floor","value":"1"},{"label":"Second Floor","value":"2"},{"label":"Third Floor","value":"3"}}};
if(!params.isEmpty() && params.containKey("location"))
{
	locationInput.put("value",params.get("location"));
	locationInput.put("disabled",true);
}
//Request Type
requestTypeInput = {"type":"radio","name":"requesttype","label":"Request Type","hint":"Choose a type","placeholder":"","mandatory":true,"options":{{"label":"Seating","value":"seating"},{"label":"Rest Room","value":"restroom"},{"label":"A/C","value":"ac"}},"trigger_on_change":true};
//Feedback
feedbackInput = {"type":"textarea","label":"Feedback","name":"feedbacktext","hint":"Enter your feedback","placeholder":"","mandatory":true};
if(!params.isEmpty() && params.containKey("requesttype"))
{
	requestType = params.get("requesttype");
	requestTypeInput.put("value",requestType);
	requestTypeInput.put("disabled",true);
	issueOptions = list();
	if(requestType.equals("restroom"))
	{
		issueOptions = {{"label":"Water leakage","value":"waterleakage"},{"label":"Broken tap","value":"brokentap"},{"label":"Exhaust fan doesn't work","value":"exhaust"}};
	}
	else if(requestType.equals("ac"))
	{
		issueOptions = {{"label":"Temperature is too high","value":"toohigh"},{"label":"Temperature is too low","value":"toolow"},{"label":"A/C not working","value":"notworking"}};
	}
	feedbackInput = {"type":"select","name":"feedback","label":"Issue","hint":"Choose a type","placeholder":"","mandatory":true,"options":issueOptions};
}
inputs = list();
inputs.add(locationInput);
inputs.add(requestTypeInput);
inputs.add(feedbackInput);
form = {"type":"form","title":"Office Feedback Form","name":"officefeedback","version":1,"button_label":"Submit Feedback","inputs":inputs}
return form;

On clicking save, the form view handler will generate a form permalink. The permalink will look something like this:

https://cliq.zoho.com/forms/4909192000000xxxxxx/view

Here, you can add custom parameters to prefill or even completely modify the form according to your needs. For example, before sending it to employees in the ground floor, you can add a custom parameter to prefill the location as ground floor. The permalink with the parameter will look like this:

https://cliq.zoho.com/forms/4909192000000xxxxxx/view?location=0

Form Change handler:

This example requires you to handle the form change handler as well.

Copy To Clipboard


targetName = target.get("name");
info targetName;
inputValues = form.get("values");
info inputValues;
actions = list();
if(form.get("name").equals("officefeedback"))
{
	if(targetName = "requesttype")
	{
		defaultValues = {"location","requesttype"};
		allKeys = form.get("values").keys();
		for each  keyElement in allKeys
		{
			if(!defaultValues.contains(keyElement))
			{
				actions.add({"type":"remove","name":keyElement});
			}
		}
		if(target.get("value").get("value") == "seating")
		{
			actions.add({"type":"add_after","name":"requesttype","input":{"type":"textarea","label":"Feedback","name":"feedbacktext","hint":"Enter your feedback","placeholder":"","mandatory":true}});
		}
		else if(target.get("value").get("value") == "restroom")
		{
			actions.add({"type":"add_after","name":"requesttype","input":{"type":"select","name":"feedback","label":"Issue","hint":"Choose an issue","placeholder":"","mandatory":true,"options":{{"label":"Water leakage","value":"waterleakage"},{"label":"Broken tap","value":"brokentap"},{"label":"Exhaust fan doesn't work","value":"exhaust"}}}});
		}
		else if(target.get("value").get("value") == "ac")
		{
			actions.add({"type":"add_after","name":"requesttype","input":{"type":"select","name":"feedback","label":"Issue","hint":"Choose an issue","placeholder":"","mandatory":true,"options":{{"label":"Temperature is too high","value":"toohigh"},{"label":"Temperature is too low","value":"toolow"},{"label":"A/C not working","value":"notworking"}}}});
		}
	}
}
return {"type":"form_modification","actions":actions};

Note: You will have to handle what happens to the data collected from the form through the submit handler.