Create Widget

To create a widget, follow the below given instructions:

In your local drive, go to your Project Folder which you created initially while building your first widget.
Open plugin-manifest file.

In plugin-manifest.json file, provide the basic details of your widget in "widgets" attribute under ''modules''


    "modules": {
	"widgets": [{
	            "name": "Sample Widget", 
		"title": "Testing Widget",	
	            "icon": "/app/img/icon.png",
	            "logo": "/app/img/logo.png",
	            "location": "desk.ticket.detail.rightpanel",
	            "url": "/app/widget.html"
	        }]
            }

Attributes	Type	Description
title	string	Defines the title of the widget. Title can be duplicated. i.e., You can have the same title for multiple widgets.
name	string	It holds the unique value to identify the widget whose name cannot be duplicated
icon	url	Defines the icon of the widget.
logo	url	Represents the url of the logo image.
location	link	Defines the location of the widget in DESK portal.To know supported locations refer here.
url	url	Defines the url of the widget in ZET app

Save the file.
Go to app folder in your project folder and open widget.html file with any of your editors.
Build your application, as per your requirements and save the file.

Major code and its functionalities are to be addressed in widget.html file whereas plugin-manifest.json file holds the path of widget.html file using the url key.
Pack and publish the extension. Then, update the specific extension in desk portal.

Go to Widget Location (i.e., the location you mentioned in "widgets" of plugin-manifest file).
Once you go to the specific location, you can see your widget created successfully based on the given details.

Note:

Single extension can have more than one widget.
Single extension can have more than one widget in the same location as well

Example: You have two widgets: Sample Widget 1 and Sample Widget 2 which are to be addressed in single extension. In this case, you can mention the details of those widgets in the plugin-manifest file of your extension as shown below.

Copied
    "widgets": [{
	            "name": "Sample Widget 1",
	            "title": "Testing Widget",
	            "icon": "/app/img/icon.png",
	            "logo": "/app/img/logo.png",
	            "location": "desk.ticket.detail.rightpanel",
	            "url": "/app/widget.html"
	        },
		    {
		    "name": "Sample Widget 2",
		    "title": "Testing Widget",
		    "icon": "/app/img/icon.png",
		    "logo": "/app/img/logo.png",
		    "location": "desk.ticket.detail.leftpanel",
		    "url": "/app/widget.html"
		}],