Zoho Creator - Widgets Kit
Overview
1. What is this kit for?
This kit is designed to help you create widgets in Zoho Creator using your existing Figma design. It contains step-by-step instructions and supported components for Creator widgets. If you're using this kit for the first time, familiarize yourself with its capabilities and components.
When you’re done designing, the designed file can be accessed as a widget by copying the frame URL from your design and access token from your Figma Account Settings, and pasting them into Creator's widget builder. This ability to create widgets from Figma files directly helps bridge the gap between design and development and quickly create efficient widgets with minimal effort.
2. What is included in this kit?
You can get to know the details required in the Points to Note (section 4) and also know more about the list of supported components (section 6).
3. Who can use this kit?
This kit is for users with sufficient experience using Figma to design and who would like to use their customized designs as a widget.
The prerequisites include:
- You must have access to a Figma account, or you can create one.
- You must have access to a Figma design file that you want to use and create a widget from.
4. Points to Note
- You can design your widget using the supported components (refer below) from the UI kit to make the widget interactable.
- The components you've used in your design must have their syntaxes specified as mentioned in the UI kit for the widget to work properly in Creator.
- Each component in this kit is named with zc_<component_name> at the start to help Creator identify those components and convert them correctly. You can rename the used components. However, refrain from renaming the syntax or changing layers. In other words, ensure that they don't override the syntax or structure that has been defined for the same.
For example, the following syntax, zc_input?linkname=<name> is meant to render the text element as an input box. If you rename it with some other term, the component will not work as expected. - Similarly, all the supported components are built with separate layers. Do not add, remove, or change these layers, as doing so will affect the functionality of your designed widget.
- Ensure that the components added to the page inside your Figma file are contained within a frame, and they're from the list of supported components that our UI kit has provided.
- Creator doesn't retain the Figma files and access token that you provide. These files are only processed in-memory to generate the widget and will be downloadable as a .zip folder.
- By allowing Zoho Creator to use Figma’s public API on your behalf to generate the required widget, you also agree to Figma’s developer terms and conditions as applicable.
- Any direct changes to the design file and its components in Figma will require re-uploading the modified file for the widget to work as required.
- Google fonts are currently used in your Figma design. If you've used a custom font, ensure to store that font's TTF or OTF file in Assets -> Fonts folder in your widget .zip folder.
5. Design Your Widget
In general, there are four steps involved in converting your Figma design into a widget in Creator.
Step 1: Get started with our kit
- Download the Zoho Creator - Widgets Kit here.
- Next, get to know the components supported in Creator widgets.
Step 2: Design your widget file
Now you're inside Figma.
1. After downloading the kit, import it into Figma.
2. Click the Figma icon to open the main menu.
3. Select the Playground section in the Assets tab in the top-left bar.
4. Select the Zoho Creator - Widgets kit. You can now view the entire list of supported components.
You can also click the All Libraries dropdown to view the components.
5. Expand the required components and drag and drop them into a frame.
- Before you add components to a frame, click here to learn how to add a frame to your design page.
- You can select a component and click the Insert instance button to add that component to the frame.
6. Customize your components using the properties available in the Design panel on the right side.
Step 3: Review and convert into a widget
- Review the components you've added to your design file.
- Once you're done designing in Figma, navigate to the Creator application and access the page in which you need to embed your Figma file as a widget.
- Navigate to the Design page.
- Click the Open Page Builder button.
- The page builder will appear. Select Widgets and click the Custom tab.
- Click the Create button. The Create Widget pane will appear.
- Click the Import from Figma option.
- Enter a name for your widget. After copying the link and token (refer below section), proceed to step 9.
Get link and token
Now you’ll switch back to Figma to get the frame link and access token. You’ll need to paste these in Creator so that a widget can be created from your Figma design.
You can do either of the following in Figma to get the frame URL:
- If you have a page with multiple frames to convert, right-click the page (click Control on Mac) and select Copy link to page.
- If you only want to convert a single frame into a one-screen app, right-click the frame (click Control on Mac), then select Copy/Paste as > Copy link.
Next, you need to get your personal access token from Figma, so that Creator is able to retrieve your Figma design (with read-only access).
- Select the Figma menu, then select Back to files.
- In the upper-right corner, select your profile initial or picture, then choose Settings.
- Scroll down until you see Personal access tokens, then click Generate new token.
- In the Create a new personal access token box, type a name for a new token.
- Select an expiration period and specify scopes as required.
- Click Generate Token. Your token will appear in a yellow box.
- Select Copy this token to copy it.
Creator uses your personal access token to connect to your Figma frame with Can view (read-only) access, and doesn't make any changes inside your Figma file.With the copied token, switch back to Creator, and paste it as mentioned below.
Note: The below steps are a continuation of Step 3: Review and convert into a widget.
9. Paste your frame URL and Figma access token.
10. Click Create. The created widget will be listed in the Custom tab.
11. Drag and drop the widget into the builder area.
12. Click Done to exit the builder.
13. Access your application in live mode and select the widget page. You can now start adding your data.
6. Components supported by the UI kit
- Form Container
- Rating field
- Choice fields
- Textbox
- Tabs
- Buttons
The syntax for each of the above components start with zc_ and are used by Zoho Creator to identify the different components and convert them properly during widget creation.
6.1 Form container
You can use the form container to group required fields in them. You can use multiple form containers in a frame and also within each other.
Ensure all fields are directly or indirectly placed inside a form component and they will not be taken into submission if used outside of the form container.
Syntax:
- zc_formcontainer?formlinkname=<formlinkname>
Here:
- "zc_formcontainer" is used to identify the form component.
- "formlinkname" is the supporting parameter to the form component and is mandatory. You need to replace your Creator form's (in which the data needs to be submitted) link name in the right side of the syntax.
Syntax Usage:
- This syntax can be used in grouping layers. For example by frame or group.
- This ensures that the controls of other fields in the form are singularly linked to the mentioned form via the "formlinkname".
6.2 Rating
A rating field allows your users to provide a rating or score to express their opinion or evaluation of a particular product, service, or experience. This field typically comprises a set of predefined options, often represented as stars, with each option corresponding to a different level of satisfaction.
Output Data Type: String
Syntax:
- zc_ratingcontainer?linkname=<fieldlinkname>
- zc_ratingoption?value=<valueforthisoption>&state=selected
- zc_ratingoption?value=<valueforthisoption>&state=idle
- zc_ratingoption?value=<valueforthisoption>
Ensure that this field is placed under a "zc_formcontainer" layer to submit the value to the specified form.
Here:
- "zc_ratingcontainer" is used to identify the rating component.
- "zc_ratingoption" is used as an identifier for the options of the rating component.
- "linkname" is the field's linkname (in your Creator form), in which the data needs to be associated while submitting the form.
- value corresponds to individual value for each star. For example, if value=1, then this that the selected value is one star. If value=happy, this means that the star's value will be marked as happy.
- "state" is an identifier that has only two values — selected or idle. This helps us to control how the UI of that particular layer should be while that option is selected by the user. For example, if the value is given as state=selected and if the rating component is being used in a layer that has a blue background, a blue background will be applied whenever users select any option in this component.
Tip: You can use this field to collect product reviews, event feedbacks, and more.
6.3 Slider
A slider field in a form allows users to interactively pinpoint a value from a predefined range by moving the slider handle along the track.
Output Data Types: Integer, Float
Syntax :
- zc_selectedvalue?linkname=<fieldlinkname>
Here:
- "zc_selectedvalue" is used to display the selected value from the slider component.
- For the widget to work as intended, you need to use the same "fieldlinkname" in both the slider component and the selected value's syntax.
- The zc_knob, zc_progress, and zc_track parameters are mandatory and must be specified in the same order as above.
- Ensure that this field is placed under a "zc_formcontainer" layer to submit the value to the specified form.
- "zc_slider" syntax is used to label the group of following components only.
- "zc_knob" is used as an identifier of the slider's knob.
- "zc_progress" is used to identify the progress bar of the slider.
- "zc_track" is used to track the entire length of the slider handle.
6.4 Choice fields
These fields enables your users to select a value from a predefined set of choices that are displayed in a menu. The types of choice fields include:
Ensure that these fields are placed under a "zc_formcontainer" layer to submit the value to the specified form.
Checkbox
This field enables your users to select one or more values from a predefined set of choices that are displayed as checkboxes.
Output Data Type: Comma separated values
Syntax:
- zc_selectcontainer?type=checkbox&linkname=<fieldlinkname>
- zc_option?value=<optionvalue>
- zc_checkbox
Here:
- "zc_selectcontainer" is used to identify the choice field component.
- "type" refers to the type of choice field used — radio, drop down, multi select, or checkbox.
- "linkname" is the field's linkname (in your Creator form), in which the data needs to associated while submitting the form.
- "zc_option" is used as an identifier for the options of the choice field component.
- "value" corresponds to individual values for each of the choices.
- You can place check box indicator wherever required and name it "zc_checkbox".
It is recommended to maintain the hierarchy of parameters as specified in the syntax.
Radio
This field enables your users to select a value from a predefined set of choices that are displayed as radio buttons.
Output Data Type: String
Syntax:
- zc_selectcontainer?type=radio&linkname=<fieldlinkname>
- zc_option?value=<optionvalue>
- zc_radio
Here:
- "zc_selectcontainer" is used to identify the choice field component.
- "type" refers to the type of choice field used — radio, drop down, multi select, or checkbox.
- "linkname" is the field's linkname (in your Creator form), in which the data needs to associated while submitting the form.
- "zc_option" is used as an identifier for the options of the choice field component.
- "value" corresponds to individual values for each of the choices.
- You can place radio indicator wherever required and name it "zc_radio".
It is recommended to maintain the hierarchy of parameters as specified in the syntax.
Multi select
This field enables your users to select one or more values from a predefined set of choices that are displayed in a dropdown menu.
Output Data Type: Comma separated value.
Syntax:
- zc_selectedvalue?linkname=<fieldlinkname>
Here:
- "zc_selectedvalue" is used to display the selected value from the multi select component.
- To be functional and show the choices, you've to use the same "fieldlinkname" in both the multi select component and the "selectedvalue" parameter.
- zc_selectcontainer?type=multiselect&linkname=<fieldlinkname>
- zc_option?value=<optionvalue>
Here:
- "zc_selectcontainer" is used to identify the choice field component.
- "type" refers to the type of choice field used — radio, drop down, multi select, or checkbox.
- "linkname" is the field's linkname (in your Creator form), in which the data needs to associated while submitting the form.
- "zc_option" is used as an identifier for the options of the choice field component.
- "value" corresponds to individual values for each of the choices.
Dropdown
This field enables your users to select a value from a predefined set of choices that are displayed in a dropdown menu.
Syntax:
- zc_selectedvalue?linkname=<fieldlinkname>
Here:
- "zc_selectedvalue" is used to display the selected value from the dropdown component.
- For the widget to work as intended and display the choices, you've to use the same "fieldlinkname" in both the multiselect component and the "selectedvalue" parameter.
- zc_selectcontainer?type=multiselect&linkname=<fieldlinkname>
- zc_option?value=<optionvalue>
Here:
- "zc_selectcontainer" is used to identify the choice field component.
- "type" refers to the type of choice field used — radio, drop down, multi select, or checkbox.
- "linkname" is the field's link name (in your Creator form), in which the data needs to associated while submitting the form.
- "zc_option" is used as an identifier for the options of the choice field component.
- "value" corresponds to individual values for each of the choices.
6.5 Text box
You can insert a text box element to enter the required content within the detail view. For example, you can use the text element to display a heading before starting sections or to add a note or disclaimer.
Ensure that this field is placed under a "zc_formcontainer" layer to submit the value to the specified form.
Syntax:
- zc_input?linkname=<fieldlinkname>
Here:
- "linkname" is the field's linkname (in your Creator form), in which the data needs to associated while submitting the form.
6.6 Tab
This component enables you to reorganize your data into distinct, switchable tabs and provide a well-organized display to your users.
Ensure that this field is placed under a "zc_formcontainer" layer to submit the value to the specified form.
Syntax:
- zc_tabcontainer?name=<value>
- zc_tab?id=1
Here:
- "tabgroup" refers to the parent tab component that holds and manages the individual tabs. The values can be given as A, B, C, and so on.
- "tabcontainer" refers to individual tabs in a grouped tab container.
- "tabid" refers to the id corresponding to each tab. Here, you can give 1,2,3, and so on as the values.
- "tabcontainer" and "tabid" are mandatory parameters for the tab component.
6.7 Button
Buttons are simple components on a user interface that are meant to let users interact with your page. Here, you can add a button to perform an action you pre-configured.
Ensure that this field is placed under a "zc_formcontainer" layer to submit the value to the specified form.
Syntax:
(i) Button action (submit):
- zc_button?action=submit&formlinkname=<creatorformlinkname>
(ii) Button action (open URL):
- zc_button?action=openurl&url=<link>
(iii) Switch buttons:
- zc_button?action=switchtab&name=<tabname>&id=<tabid>&state=<selected/idle>
Here:
- "zc_button" is used to identify the button component.
- "action" refers to the action type that you want the button to perform.
- "formlinkname" is the supporting parameter to the form component and is mandatory. Here, you need to replace your Creator form's (in which the data needs to be submitted) link name on the right side of the syntax.
- "url" refers to the link that you want to open after users click the button.
- "name" refers to the name of the tab component.
- "id" refers to the unique id for each tab.
- "state" is an identifier that has only two values — selected or idle. This helps us to control how the UI of that particular layer should be while that option is selected by the user.
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Use widgets to create an online mobile store
Requirement Display a card layout with each card containing mobile details like an image, company, model, and features. Any third party languages can also be used, provided the required dependencies like packages, CDN URLs etc. are included. Users ...Understand widgets
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. Widgets are used to extend the capabilities of your Zoho Creator application so that you could perform tasks that could not ...Overview of Building a Zoho Creator Extension
What Does This Page Cover? Learn how you can distribute or even monetize your widgets to a large audience by publishing them as extensions in Zoho Marketplace. Availability Support for building extension is available in all datacenters. Overview ...Autopopulate Zoho Creator field with Zoho People data
Requirement Autopopulate Zoho Creator field with employee information stored in Zoho People. Use case Let's assume an organization named Zylker has a private library. The regular users must purchase a membership in order to access the library, ...Zoho Creator URL Patterns
Overview This document lists the urls of various Zoho Creator application components like forms, views, PDF report etc. The knowledge about the url of the applications will help in providing quick access to the application and its forms, views and ...
New to Zoho LandingPage?
Zoho LandingPage Resources