Widgets in Cliq

Widgets are a great way to customize your Cliq home screen. Imagine having a custom view of all the important data and functionality from the different apps that you use every day. For example, the Twitter widget brings you your twitter feed, the Projects widget shows you recently assigned tasks and bugs, the Notes widget lets you view your recent notes or take notes.

Widgets are highly customizable and support a wide range of textual and visual elements to make the data displayed more actionable.

Understanding a widget's structure

Before you start building a widget, it is valuable to understand how widgets in Cliq are structured. Widgets in Cliq are made up of tabs containing sections that house a combination of various elements.

Widgets

- Tabs

- Sections

- Elements

Tabs

Cliq widgets' tabs are quite similar to any browser's tabs. They're labeled, clickable areas that contain a combination of sections having different elements. Think of a tab as the outermost container or layer that houses the rest of the pieces that form your widget. You can switch between tabs by just clicking on them and just like a browser, the currently selected tab is highlighted than the others.

Note:

Each Cliq widget can have a maximum of 5 tabs.

Tab Views

Tab views are customizable views that can be created based on the type and amount of data you'd like to display. There are five types of tab views that you can create:

Sections View
Info View
Web View
Map View
Form View

Sections View

A sections view comprises different varieties of display and actionable elements that can hold crucial information. This information can be solely for the users' consumption or even to perform actions right from the section. In addition to supporting all the widget section elements, the sections view also supports a header and footer.


elements = list();
elements.add(
    {
        "type":"title",
        "text":"Widget Title"
    }
);
elements.add(
    {
        "type":"text",
        "text":"Here goes the text! Widgets are built as an internal tool similar to commands, bots and message actions. They are listed in the left side bar of Cliq and will be displayed as a full view in Cliq's home screen. Consider widgets as a mini version of any third party integration or a standalone app that works for you, for your team or for the entire organization."
    }
);
sections = list();
sections.add(
    {
        "id":1,
        "elements":elements
    }
);
return {
    "type":"applet",
    "tabs":[
        {
            "label":"Home",
            "id":"homeTab"
        }
    ],
    "active_tab":"homeTab",
    "sections": sections
};

Info View

The info view is typically used to display a piece of important information, mainly for users' consumption with only one actionable element (button).


return {
	"type":"applet",
	"data_type":"info",
	"tabs":[
	{"label":"Home","id":"homeTab"}
	],
	"info":{
	"title":"Your default portal is not configured yet!",
	"description":"Click here to configure.",
	"image_url":"https://i.ibb.co/gSP05Yr/Cliq-automation.png",
	"button":{
		"label":"Configure",
		"type":"invoke.function",
		"name":"cliqwidget",
		"id":"configuration"
		}
	},
	"active_tab":"homeTab"};

Web View

The web view typically loads a web page in an iFrame right inside the widget.


return {
	"type":"applet",
	"data_type":"web_view",
	"tabs":[
	{"label":"Home","id":"homeTab"}
	],
	"web_view":{"url":"https://player.vimeo.com/video/742651284?autopause=1&dnt=1&autoplay=1"},
	"active_tab":"homeTab"
};

Map View

With map view, rendering maps within a widget tab is now possible. It allows the developers to plot tickers and provide live tracking.


return {
   "type": "applet",
   "data_type": "map",
   "tabs": [
      {
         "label": "Zoho offices",
         "id": "zoho_offices"
      }
   ],
   "map": {
      "id": "zoho_offices_map",
      "title": "Branches",
      "tickers": {
         "chennai": {
            "title": "Chennai",
           "type": "person",
            "last_modified_time": 1674549259421,
            "latitude": 12.8310776,
            "longitude": 80.0493569,
            "info": "Zoho corporation - Chennai"
         }
      }
   },
   "active_tab": "zoho_offices"
};

Form View

Form view can be used to render a Cliq form within a widget tab. Using the form view, you will have the option to render the tabs and form options in kiosk mode.



form = {
   "title": "Zylker Annual Marathon",
   "mode": "kiosk",
   "name": "marathon",
   "hint": "Register yourself for the Zylker Annual Marathon!",
   "button_label": "Submit",
   "inputs": [
      {
         "name": "select",
         "label": "Events you wish to apply for",
         "placeholder": "Choose from the list of options",
         "multiple": false,
         "mandatory": false,
         "type": "select",
         "options": [
            {
               "value": "half_marathon",
               "label": "Half marathon",
               "thumbnail": "https://w7.pngwing.com/pngs/458/840/png-transparent-people-running-at-marathon-art-half-marathon-running-marathon-miscellaneous-physical-fitness-sport-thumbnail.png"
            },
            {
               "value": "stage_races",
               "label": "Stage races",
               "thumbnail": "https://w7.pngwing.com/pngs/217/130/png-transparent-sprint-long-distance-running-track-field-silhouette-physical-fitness-animals-sport.png"
            }
         ]
      },
      {
         "name": "radio",
         "label": "Running distance",
         "mandatory": false,
         "type": "radio",
         "options": [
            {
               "value": "7",
               "label": "7 Kms"
            },
            {
               "value": "15",
               "label": "15 Kms"
            }
         ]
      }
   ],
   "action": {
      "type": "invoke.function",
      "name": "formFunc"
   }
};
return {"type":"applet","data_type":"form","tabs":{{"label":"Form view","id":"form"}},"active_tab":"form","form":form};

Sections

Each tab is made up of sections. Simply put, a section is a combination of different elements, grouped together.

Note:

Each tab can hold a maximum of 25 sections.

Headers & Footers

Headers are fixed at the top of sections. There are two types of headers

Title - Used to display the title of the tab
Breadcrumbs - Indicates the naviagtional hierarchy and is useful to navigate across data.

Headers are used to display the headings of tabs. Both title and breadcrumbs can have a maximum of 3 buttons on the right.

Footers

Footers are fixed at the bottom of sections. They can hold text on the left and just like Headers, can also have a maximum of 3 buttons on the right.

Note:

Both Headers and Footers are supported only in sections view

Elements

Section elements are the building blocks of your Cliq widget. They provide the structure, carry the content and layout required to bring your widget to life, precisely! Cliq supports a wide variety of elements to present your content.

Note:

Each section can hold a maximum of 20 elements.