Catalogue Component
The Catalogue component in Cliq Forms allows users to easily create forms with searchable lists of items from a UI rich catalogue. A catalogue is a collection of counter elements where the data can be static or dynamic. Users can customize the list by adding an image, a short description and a counter to the items displayed. Overall, the Catalogue component provides a convenient way to tackle commerce use cases using Cliq Forms.
There are two types of catalogues:
- Catalogue
- Dynamic Catalogue
Note: There can be only one catalogue/ dynamic catalogue type of input per form.
Catalogue input object attributes
| Attribute | Data type & limit | Description |
| type* | String | The type of catalogue. Can be either catalogue or dynamic_catalogue |
| name* | String (50) | A unique identifier for the field. On form submission, the value defined for this key will be available in the function associated with the form |
| label* | String (50) | The field's display name |
| hint | String (100) | Provides a brief description of the field's purpose and the expected input |
| mandatory | Boolean | Defines if the field's requisite is mandatory or not. Default value considered is false |
| options* | Array (25) | Array of catalogue items. For the array syntax refer the table below |
| value | String | Provide a default input for the field by giving the value of any catalogue item. Note: The value provided must match the value fields of any of the item. Multiple values can be provided seperated by commas |
| max_selections | Integer (10) | Defines the number of options that a user can choose from the drop-down. Default value is 10 |
| trigger_on_change | Boolean | To trigger the form change handler upon value change |
| refresh_cutoff | Integer | The number of drop-down items to be populated when the search results are less than this count. Default value is 5 |
Catalogue options array structure
| Attribute | Data type & limit | Description |
| label* | String (100) | The display name of the item |
| value* | String (50) | Unique value of the item |
| description | String (150) | A short description of the item |
| thumbnail | URL | Thumbnail URL of the item image |
| counter | JSON Object | Denotes the count of the item. The object structure is:
|
Syntax
{
"type": "", // changes according to the catalogue type
"name": "",
"label": "",
"hint": "",
"mandatory": ,
"options": [
{
"label": "",
"value": "",
"description": "",
"thumbnail": "",
"counter": {
"min": ,
"max": ,
"step_value": ,
"value":
}
}
],
"value": ""
"max_selections":
}
Example
Let's say you want to create a stock management form for your warehouse. You want to build a catalogue of all the products to be ordered. This catalogue will include images of the items as well as the quantity being requested.
return {
"type":"form",
"title":"📦 Stock Management",
"name":"stockManagementForm",
"hint":"Handpick a product and request how many units you need to replenish your stock",
"button_label":"Raise Request",
"inputs":[
{
"label":"Products",
"name":"catalogue",
"mandatory":true,
"type":"catalogue",
"options":[
{
"value":"sportsWatch",
"label":"Pulse Sports Watch",
"description":"4 GB Internal RAM | Monitor | Track | Elevate your fitness game with precision and style.",
"thumbnail":"https://i.postimg.cc/mg99xTbS/Pulse-Sports-Watch.png",
"counter":{
"min":"0",
"max":"100",
"value":"1",
"step_value":"1"
}
},
{
"value":"",
"label":"Glide Pro Skateboard",
"description":"Stylish | Cruise with precision bearings | Durable deck. Master the streets with ease and style",
"thumbnail":"https://i.postimg.cc/YSfm98LG/Glide-Pro-Skateboard.png",
"counter":{
"min":"0",
"max":"50",
"value":"1",
"step_value":"1"
}
},
{
"value":"printer",
"label":"Venture Pack Duffle Bag",
"description":"Versatile | Durable | Stylish. Carry with ease using Ergonomic design | Robust materials | Spacious Compartments",
"thumbnail":"https://i.postimg.cc/3rPrsmWP/Venture-Pack-Duffle-Bag.png"
}
]
}
],
"action":{
"type":"invoke.function",
"name":"function"
}
};
