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	object	Denotes the count of the item. The object structure is: min (int) : minimum item count max (int) : maximum item count value (int) : item count [default count is 1] step_value (int) : increase/decrease of the item count [default value is 1]

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 form for inventory management in your office. You want to create a catalogue of all the assets employees can request. This catalogue will contain the images of the assets as well as the count they are requesting.


itemsList = list();
itemsList.add({"value":"aurorapro","label":"Aurora Pro","description":"6-Core CPU | 6-Core GPU | 16GB Unified Memory","thumbnail":"https://i.postimg.cc/bNqh3Dtz/Screenshot-2023-02-09-at-7-09-38-PM.png","counter":{"max":"10","min":"1"}});
itemsList.add({"value":"vortex","label":"Vortex Edge","description":"12-Core CPU | 9-Core GPU | 36GB Unified Memory","thumbnail":"https://i.postimg.cc/28GHm3X8/istockphoto-164637079-612x612.jpg","counter":{"max":"10","min":"1"}});
itemsList.add({"value":"monitor","label":"Monitor","description":"24 inch | LED","thumbnail":"https://images.monoprice.com/productlargeimages/338223.jpg","counter":{"max":"5"}});
itemsList.add({"value":"keyboardmouse","label":"Keyboard and Mouse","thumbnail":"https://www.electronicrecyclingaustralia.com.au/wp-content/uploads/2017/02/keyboard-mouse-scaled.jpg","counter":{"max":"5"}});
itemsList.add({"value":"printer","label":"Printer","description":"Laser | Monochrome - Black & White ","thumbnail":"https://neeruinfotech.com/wp-content/uploads/2020/06/HP1108.jpg"});
itemsList.add({"value":"printerinkcartridge","label":"Printer Ink Catridges","description":"Original Black Ink Cartridge","counter":{"max":"20","min":"2","value":"2","step_value":"2"}});
catalogueInput = {"name":"asset","label":"Asset","placeholder":"","mandatory":false,"type":"catalogue","options":itemsList};
form = {"type":"form","title":"Inventory Management","name":"inventory","hint":"Choose the devices and number of units to place order.","button_label":"Submit","inputs":{catalogueInput},"action":{"type":"invoke.function","name":"formfunction"}};
return form;

The final catalogue will look like this.