Create your first widget

Before creating a widget, you need to have the Command Line Interface installed. Learn more

To create a widget:

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 ManageEngine AppCreator 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. Find the Widget.html file in the folder.

   

8. Enter your code in the Widget.html file. The widget.html file contains the structure, design and components of the Widget. To use the ManageEngine AppCreator APIs in the widget, you can use the API helpers provided in the JS SDK Library.

   

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

    

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

    

    Note:The widgets should be hosted externally and linked up with AppCreator using the URL.
13. Navigate to the Settings page of the app in which you need to embed your widget. Select Widgets.
14. Click Create button.

    

15. The New Widget pane will appear.
16. Enter the Index page URL of the externally hosted widget in the Hosting URL field.

    

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

Related Topics

• Understand widgets
• Install CLI
• Add widget to a page
• JS API documentation
• Sample widget