Form Submit Handler
The form submit handler is responsible for processing form input data and performing the required actions upon submission. This handler can be configured to perform two types of actions:
Form Submission
Workflow :
Create a form for a specific task within any Cliq platform component, such as a button, by invoking a command or using a bot menu action.
Define the form function and link it to the corresponding form.
Upon form submission, the input values received in the form's submit handler can be used to perform the intended action.
The follow attributes are passed when this handler is triggered:
Attribute Name | Data Type | Description |
access | Map | Details of the web client used by the user, including the user ID and chat ID. |
environment | Map | Details about the data center to which the user belongs |
user | Map | Details of the user who has triggered the function. |
chat | Map | Chat details in which the function is triggered. |
form | Map | Details of the form object and the input values. |
Example :
Let's consider a slash command to request stock for a product via Cliq Forms. Users can specify the type of product and its quantity, select the warehouse location from a dropdown menu, and include a personal note. Once users have provided the necessary information and submitted the form, a message will be posted to acknowledge that the order was successful by invoking the associated form function.
Note: You can easily design forms using Cliq's Form Builder, which is located in the top-right corner of the Deluge code editor.
/stockrequest - Slash Command
return{
"type":"form",
"title":"Stock Request 📦 ",
"trigger_on_cancel":true,
"name":"stockRequestForm",
"hint":"Handpick a product and request how many units you need to replenish your stock.",
"button_label":"Request",
"inputs":{
{
"label":"Client Name",
"name":"clientName",
"placeholder":"Enter your name",
"min_length":"0",
"max_length":"150",
"mandatory":true,
"type":"text"
},
{
"label":"Warehouse Location",
"name":"warehouseLocation",
"placeholder":"Choose from the list of options",
"multiple":false,
"mandatory":true,
"type":"dynamic_select",
"options":{
{
"value":"washington",
"label":"Washington "
},
{
"value":"texas",
"label":"Texas"
},
{
"value":"california",
"label":"California"
},
{
"value":"NewYork",
"label":"New York"
},
{
"value":"Tennessee",
"label":"Tennessee"
}
}
},
{
"label":"Products",
"name":"productList",
"mandatory":true,
"type":"catalogue",
"options":{
{
"value":"watch",
"label":"Pulse Sports Watch",
"description":"4 GB Internal RAM | Monitor | Track | Elevate your fitness game with precision and style",
"thumbnail":"https://zoho.com/sites/zweb/images/cliq/dev-helpdoc/pulse-sports-watch.png",
"counter":{
"min":"1",
"max":"25",
"value":"1",
"step_value":"1"
}
},
{
"value":"skateBoard",
"label":"Glide Pro Skateboard",
"description":"Stylish | Cruise with precision bearings | Durable deck. Master the streets with ease and style",
"thumbnail":"https://zoho.com/sites/zweb/images/cliq/dev-helpdoc/glide-pro-skateboard_1.jpg",
"counter":{
"min":"1",
"max":"50",
"value":"1",
"step_value":"1"
}
}
}
},
{
"label":"International Shipping",
"name":"shippingInfo",
"value":false,
"type":"toggle"
},
{
"label":"Additional Notes",
"name":"notes",
"placeholder":"ype any customized note regarding your stock request. #HappyReStocking",
"min_length":"0",
"max_length":"400",
"mandatory":false,
"type":"textarea"
}
},
"action":{
"type":"invoke.function",
"name":"stockRequestFormfuntion"
}
};stockRequestFormfuntion - Form function
Form Submit Handler
formValues = form.get("values");
centreName = formValues.get("warehouseLocation").get("label");
orderedList = list();
products = formValues.get("productList");
for each product in products
{
productName = product.get("label");
orderedList.add(productName);
}
response = {"text":"\n\nProducts : *" + orderedList.toString() + "* \n\nCentre : *" + centreName + "*","card":{"title":"Stock Request Raised ","thumbnail":"https://zoho.com/sites/zweb/images/cliq/dev-helpdoc/order.png","theme":"prompt"}};
return response;Form cancellation
Workflow
Form cancellations can be handled in the same way as submissions. The form map should include the parameter trigger_on_cancel = true to ensure that the form function is triggered when a user cancels the form (whether before entering any data or during input).
When this attribute is added, the form function will receive a callback when the user cancels the form.
The action attribute value in the form submission handler will be "cancel," which allows us to manage custom responses such as displaying a follow-up message or redirecting the user to additional help.
In the above stock request example, when a user cancels a form, a follow-up message can be automatically posted to inform them of the cancellation and guide them to reorder if needed or you can include a link to the request form in this message. This ensures users to quickly submit a new request without navigating away.
stockRequestFormfuntion - Form Submit Handler
formValues = form.get("values");
if(form.get("action") == "cancel")
{
response = {"text":"If this was by mistake or your requirements have changed, you can easily submit a new request by using the slash command below:\n\n👉 Type `/stockrequest` in any chat to reorder.\n\nKeeping stock requests up to date helps us serve you faster and avoid delays. Let me know if you need help reordering! 🤖📦","card":{"title":"🛑 Your stock request was canceled.","theme":"prompt"}};
}
else
{
centreName = formValues.get("warehouseLocation").get("label");
orderedList = list();
products = formValues.get("productList");
for each product in products
{
productName = product.get("label");
orderedList.add(productName);
}
response = {"text":"\n\nProducts : *" + orderedList.toString() + "* \n\nCentre : *" + centreName + "*","card":{"title":"Stock Request Raised ","thumbnail":"https://zoho.com/sites/zweb/images/cliq/dev-helpdoc/order.png","theme":"prompt"}};
}
return response;