Create widget by uploading file | Zoho Creator Help

Create widget by uploading file

This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version.
Before creating a widget, you need to have the Command Line Interface installed. Learn more

Note: For internal hosting, the maximum size of the widget ZIP file is 10 MB and the number of files inside the widget Zip file must not exceed 255.
In Creator, you can create a widget in two ways.
  1. Uploading your widget file
  2. Importing a Figma file 

Upload your widget file

  1. Open the terminal.
  2. Run the following command to create a new project:
    $ zet init
  3. A list of Zoho Services will be displayed.
  4. Select Zoho Creator as the required service.

  5. Enter the Project Name. The sample project will be created in the respective folder directory.
  6. Run the following command to open the project folder.
    $ cd {Project_name}

  7. Open the app folder in your project folder. 


    1. You can configure the manifest.json file for your widget by following the below steps:

      1.  After creating a folder for the project, run the following command to open the project folder.
        $ cd {Project_name}Open the App folder in your project folder.

      2. Find the plugin-manifest.json file in this folder.

      3. Configure the file with a name field and type field for application components(application, forms, and reports) to be used in the widget.

    2. Find the Widget.html file in the folder. Enter your code in the Widget.html file. The widget.html file contains the structure, design and components of the Widget. To use the Zoho Creator APIs in the widget, you can use the API helpers provided in the JS SDK Library.

    3. Run the following command to validate your application:
      $ zet validate
    4. This will validate your app package and identify any violations. They should be corrected before updating the zip in the developer console.
    5. Run the following command to pack the project.
      $ zet pack

    6. A zip file of the application will be created in the dist folder of your project directory.

    7. Navigate to the Settings page of the app in which you need to embed your widget. Select Widgets.
    8. Click Create button.

    9. The New Widget pane will appear.

    10. Enter a name for your Widget.
    11. Choose Internal option in the Hosting drop down list.
    12. Upload the packed zip file from the dist folder in the Widget File field.
    13. Enter /widget.html in the Index File field. The /widget.html file is the index file i.e., this file will be incorporated as the widget in your page.
      Note:
      1. The widget ZIP folder contains the widget.html file inside the App folder by default. 
      2. If you've created another folder inside the App folder and moved the widget.html file inside the new folder, then you need to specify the index file name in the following format:
        /<folder-name>/<filename>.html
    14. Click Create. The created widget is added to the Widgets page.
    15. This widget will appear as a drag-and-drop element in Page builder for all the Pages present in the application.
    External Hosting

    The procedure given above pertains to the internal hosting of widgets (i.e.) the widgets are hosted within Creator. Alternatively the widgets can also be hosted externally and linked up with Creator.

    The procedure for external hosting of widgets is as follows:

    1. Go to the Application Settings page. Then click on Widgets option.
    2. Now click on the New Widget button in the Widgets page. The New Widget pane will appear.

    3. Enter a name for your Widget.
    4. Choose External option in the Hosting drop down list.
    5. Enter the Index page URL of the externally hosted widget in the Index File field.

    6. Click Create. The created widget is added to the Widgets page.
    7. This widget will appear as a drag-and-drop element in Page builder for all the Pages present in the application.

    Importing a Figma file 

    You can convert your Figma design into a widget in Creator. To start with,  you need to access the Create Widgets from Figma UI Kit, read the instructions about using this kit, and then proceed to design your file in Figma. After the design has been finalized, copy and paste the frame URL and access token to generate widgets directly from the design in your Figma file. Learn how 
    To know more about the list of components supported in the UI kit, click here.

      Access your files securely from anywhere

        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 CRM Training
          Redefine the way you work
          with Zoho Workplace

            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 CRM Training

              Create, share, and deliver

              beautiful slides from anywhere.

              Get Started Now


                Zoho Sign now offers specialized one-on-one training for both administrators and developers.

                BOOK A SESSION









                                              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.




                                                  Manage your brands on social media

                                                    Zoho Desk Resources

                                                    • Desk Community Learning Series


                                                    • Digest


                                                    • Functions


                                                    • Meetups


                                                    • Kbase


                                                    • Resources


                                                    • Glossary


                                                    • Desk Marketplace


                                                    • MVP Corner


                                                    • Word of the Day


                                                      Zoho Marketing Automation

                                                        Zoho Sheet Resources

                                                         

                                                            Zoho Forms Resources


                                                              Secure your business
                                                              communication with Zoho Mail


                                                              Mail on the move with
                                                              Zoho Mail mobile application

                                                                Stay on top of your schedule
                                                                at all times


                                                                Carry your calendar with you
                                                                Anytime, anywhere




                                                                      Zoho Sign Resources

                                                                        Sign, Paperless!

                                                                        Sign and send business documents on the go!

                                                                        Get Started Now




                                                                                Zoho TeamInbox Resources



                                                                                        Zoho DataPrep Resources



                                                                                          Zoho DataPrep Demo

                                                                                          Get a personalized demo or POC

                                                                                          REGISTER NOW


                                                                                            Design. Discuss. Deliver.

                                                                                            Create visually engaging stories with Zoho Show.

                                                                                            Get Started Now









                                                                                                                • Related Articles

                                                                                                                • Import widget file from Figma

                                                                                                                  1. What Does This Page Cover? Learn how you can create widgets using your existing Figma design from Zoho Creator - Widgets Kit. This kit comes with comprehensive usage instructions and supported components for Creator widgets. Before you proceed to ...
                                                                                                                • Create a widget from Figma

                                                                                                                  1. What Does This Page Cover? Learn how you can create widgets using your existing Figma design from Zoho Creator - Widgets Kit. This kit comes with comprehensive usage instructions and supported components for Creator widgets. Before you proceed to ...
                                                                                                                • Sample widget

                                                                                                                  This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. Sample Widget: Playground We shall learn to add a sample widget into your Creator application. The procedure is as follows: ...
                                                                                                                • Create an application for solution

                                                                                                                  Zoho Creator enables you to create an app solution based on your business requirement. You can create an application to run your business in a streamlined manner with the capabilities that Creator has to offer. An application helps you solve problems ...
                                                                                                                • Check for the type of the file uploaded

                                                                                                                  Requirement Only allow the file upload field to accept file types PDF, XLS, or XLXS. Display an alert message when any other file type is detected. Use case A restaurant app contains a form to store supplier receipts as files. When an admin uploads a ...
                                                                                                                  Wherever you are is as good as
                                                                                                                  your workplace

                                                                                                                    Resources

                                                                                                                    Videos

                                                                                                                    Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                    eBooks

                                                                                                                    Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                    Webinars

                                                                                                                    Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                    CRM Tips

                                                                                                                    Make the most of Zoho CRM with these useful tips.



                                                                                                                      Zoho Show Resources