{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":42629,"path":"platform-user-interface/service-portal/widget-dev-guide.md","title":"Developing custom widgets","bundle":null,"doc_type":null,"release":"australia","body":"\n# Developing custom widgets\n\nDevelop custom widgets for portals using AngularJS, Bootstrap, and the ServiceNow API.\n\n## Before you begin\n\nTo develop widgets, you need ServiceNow API experience to:\n\n-   Run record queries on the server.\n-   Create and update records.\n\nYou need AngularJS experience to:\n\n-   Bind variables to client controllers.\n-   Access server objects in a widget.\n-   Gather user input.\n\nOptionally, you can build on the Bootstrap template by accessing Bootstrap components.\n\n## Parts of a widget\n\nLike Angular directives, widgets execute a specified behavior within a Service Portal page. A widget includes mandatory and optional scripting components.\n\n-   **HTML template**\n\n    A mandatory widget component.\n\n    The HTML template requires knowledge of AngularJS to display and gather data. Use the HTML template to:\n\n    -   Render the dynamic view that a user sees in the browser using information from the model and controller.\n    -   Bind client script variables to your markup.\n    -   Gather data from the end user.\n-   **Client script**\n\n    A mandatory widget component.\n\n    A client script requires knowledge of both the ServiceNow API and AngularJS to create a client controller. Use the client script to:\n\n    -   Map server data from JavaScript and JSON objects to client objects.\n    -   Process data before rendering it.\n    -   Pass data to the HTML template.\n    -   Pass user input and data back to the server for processing.\n-   **Server script**\n\n    A mandatory widget component.\n\n    A server script requires knowledge of the ServiceNow API to work with record data. Use the server script to:\n\n    -   Set the initial state of the widget.\n    -   Send record data to the widget client script using the **data** variable.\n    -   Run server-side queries.\n-   **Link function**\n\n    An optional widget component.\n\n    The link function requires knowledge of AngularJS. Use a link function to directly manipulate the DOM.\n\n-   **Option schema**\n\n    An optional widget component.\n\n    Enables a Service Portal admin to configure a widget. Use the option schema to:\n\n    -   Specify the parameters for a widget.\n    -   Enable admin users to define instance options for a widget instance.\n    -   Develop flexible, reusable widgets.\n-   **Angular Providers**\n\n    An optional widget component.\n\n    Angular Providers require knowledge of AngularJS. Use Angular Providers to:\n\n    -   Keep widgets in sync when changing records or filters.\n    -   Share context between widgets.\n    -   Maintain and persist state.\n    -   Create reusable behaviors and UI components and inject them into multiple widgets.\n-   **Dependencies**\n\n    An optional widget component.\n\n    A widget dependency is an external resource used by your widget such as JavaScript or CSS files.\n\n\n## Global objects in widgets\n\nWhen a widget begins to render for the first time on a page, the server script executes first and accesses three global objects: **input**, **options**, and **data**. Because the **input** variable is a data object sent from the client script, this variable is undefined when first initialized.\n\n\\[Omitted image \"Server-ClientGlobalScripts.png\"\\] Alt text: Available variables in server and client script global.\n\nWhen a widget is first instantiated, the server script:\n\n1.  Initializes an empty **data** object.\n2.  Initializes the **input** object with any data sent from the client controller, or the **options** object with any data used to initialize the widget.\n3.  Sends the **data** object to the client controller as JSON.\n\nThe client script:\n\n1.  Accesses the server **data** object using `c.data`.\n\n    **Note:** By default, widgets use the **c** variable to represent the controller instance using `controller as` syntax. You can change this variable when creating or copying widgets.\n\n2.  Uses `server.update()` to post changes to the data model. This method updates the server script using the **input** object.\n\n    **Note:** After calling `server.update()`, the client script **data** object is automatically overwritten by the server script **data** object.\n\n3.  Uses `c.options` to access the values used to invoke the widget on the server. This object is read-only.\n\n## Using the Widget Editor\n\nWhen you create a widget, a record is created in the sp\\_widget table. However, you can use the Widget Editor in Service Portal Configuration as your scripting environment. The Widget Editor is a full page application similar to an IDE. You can show the parts of the widget you want to edit and hide the rest, while previewing your changes in real time.\n\n**Note:** For server-side scripts, you can turn on using the ECMAScript 2021 \\(ES12\\) JavaScript mode if your application uses ES5 Standards mode or Compatibility mode. Scripts in applications with the JavaScript mode set to ECMAScript 2021 \\(ES12\\) use ECMAScript 2021 \\(ES12\\) by default. For more information, see .\n\n\\[Omitted image \"basic-widget.png\"\\] Alt text: Widget Editor in Service Portal Configuration as a script editor.\n\n-   **[General guidelines for developing widgets](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/general-guidelines-developing-widgets.md)**  \nWhen developing custom widgets, keep these general guidelines in mind for optimal performance, scalable development, and a good user experience.\n-   **[Tutorial: Build a custom widget](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/adv-widget-tutorial.md)**  \nFollow this tutorial to build a custom widget that displays Service Catalog items. Use this tutorial as a model to help you understand the advanced scripting power of the Service Portal.\n-   **[Clone a widget](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/t_CloneAndEditAWidget.md)**  \nTake advantage of existing code by cloning and editing an existing widget.\n-   **[Create a new widget](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/create-new-widget.md)**  \nCreate a new widget to build a custom widget from scratch.\n-   **[Widget option schema](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/c_WidgetInstanceOptions.md)**  \nWidget instances allow users to uniquely configure each widget they add to a page. Use the option schema to define the parameters for your widget.\n-   **[Widget API reference](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/widget-api-reference.md)**  \nService Portal includes client and server side APIs to use in widget client and server scripts.\n-   **[Reuse components with Angular Providers](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/angular-providers.md)**  \nAngular Providers are reusable components that can be injected into multiple widgets. To ensure quick loading widgets and a high performing portal, create Angular Providers instead of overloading your client controllers with persistent data and additional logic. With Angular Providers, you can maintain data for the lifetime of your Service Portal and reuse components and data objects across multiple widgets.\n-   **[Embedded widgets](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/c_NestedWidgets.md)**  \nEmbed a widget in the HTML template, server script, or client script.\n-   **[Create a widget dependency](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/widget-dependencies.md)**  \nIn Service Portal, you can link JavaScript and CSS files to widgets to create dependencies between widgets and third-party libraries, external style sheets, and angular modules.\n-   **[Internationalize a widget](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/c_WidgetLocalization.md)**  \nUse the `${}` or `gs.getMessage()` syntax in the **HTML Template**, **Client Script**, or **Server Script** fields of a widget to tag strings for translation so you can localize your Service Portal content.\n-   **[Replace a Service Catalog form script with a widget](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/ui-macro-widget.md)**  \nYou can use widgets in Service Portal to replace UI Macros. If your Service Catalog form includes a UI Macro that references other fields or variables on the form, you can create a widget to hold reusable code and embed it within the Service Catalog form. Use special syntax to access any variable fields on the form.\n-   **[Widget troubleshooting guide](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/widget-troubleshooting-guide.md)**  \nUse the following tools to investigate and resolve unexpected behavior in your custom Service Portal widgets.\n-   **[Embeddables in Service Portal](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/embeddables-service-portal.md)**  \nEmbeddables are UI Builder components that you can embed into Service Portal pages, external websites, and other web interfaces. Using embeddables, you can reuse existing components across multiple platforms without requiring an AngularJS rebuild. Embeddables enable low-code configuration of components, reducing development time and improving integration flexibility across your ServiceNow® ecosystem.\n\n**Parent Topic:**[Service Portal](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/c_ServicePortal.md)\n\n"}}