Detail  information about Widget & Widget Instance
Channel: Servicenow Technology
Date: 16/01/2023

Previous tutorial links
https://youtu.be/xpKbQRsXQ-8 (Introduction)
https://youtu.be/QAjxTAt7d30 (Theme modification)

Widget technical definition
------------------------------------------
Widgets are AngularJS directives. Whenever the page is loaded, a directive is created for each widget. They consist of HTML markup, CSS, a JavaScript controller, and client-side and server-side code. To execute JavaScript code It uses the Rhino engine under the ServiceNow platform.
For example  - SC Catalog Item widget, Cool clock widget , and Typehead Search widget etc.

Widget components
--------------------------------
Server Script (It will execute first to retrieve data).
HTML Template (Here we can bind controller variables to display or to perform some specific functionality).
CSS (Here you can write your CSS or sass code to define the look and feel of contents).
Client Script (It takes the server data object and maps with the client object to make use of associated variables of that server data object into HTML. It processes data before rendering it to HTML and using this client script we can pass input to the server and perform specific operations ).
Option Schema (If you want to display static content and you want to make a widget configurable means without touching a single line of code you can replace that through option inputs).

Widget Instance
--------------------------
Whenever you add a widget to the page, the instance will be created for that widget. when the widget runs on the page it uses widget contents and instance properties to display.
By default Instance record has these common fields Title, Short description, Bootstrap color, Bootstrap size, HREF/URL, and Additional options (If you are adding options).

There are  different tables for widget instances that define types of instances:-
An Instance with search         (sp_instance_ais)
An instance of carousel         (sp_instance_carousel)
An Instance with link              (sp_instance_link)
An instance with menu          (sp_instance_menu)
An Instance with a table         (sp_instance_table)
An Instance of a simple list    (sp_instance_vlist)