Đã đăng vào thg 3 17, 6:37 CH 4 phút đọc

Servicenow Widget

Widget là thành phần có thể tái sử dụng trên portal page. Widget gồm HTML, CSS, JS controller, client-side code và server-side code. Widget có thể chứa thông tin hoặc thực hiện chức năng nào đó. Servicenow cung cấp một lượng lớn baseline widgets, vd:

Approvals
Knowledget Base
My Request
Crarousel
Catalog content
Popular questions
Search

Widgets được viết bằng AngularJS (widget are AngularJS directives). Khi một cái page đc load lên, 1 directive được tạo ra ứng với mỗi widget. Widget liên kết chặc chẽ với code js bên server, server side js được hỗi trợ bởi Rhino Engine trên nền tảng Servicenow.

Add Widgets to a Page

Sau khi tạo 1 cái page layout bằng container, row, column thì có thể bỏ widget vào page. Sau khi widget được bỏ vào page thì sẽ tạo ra một widget instance. Ta có thể setting option cho mỗi widget, chỉ có instance của widget đó bị thay đổi.

Edit widget option

Thay đổi option của 1 widget instance k làm ảnh hưởng đến các instance khác. Chọn widget, nhấn biểu tượng cây bút. Vd Homepage Search widget configuration:

Set Container Properties

Create Custom Widget

HTML Template: accept and display data

render dynamic view to user in the browser using information from the model and controller
binds client script variable to markup
gathers data from user inputs like input text, radio buttons, and check boxes

Client Script: defines AngularJS controller

Service Portal maps server data from JS and JSON objects to client objects
Processes data for rendering
Passes data to HTML template
Passes user input and data to the server for processing

Server Script: work with record data, web services, and anhy data available in Servicenow server-side scripts

Sets the initial widget state
Sends data to the widget's Client Script using 'data' object
Runs server-side queries

Link Function: to manipulate DOM... ???

Option Schema: allow service portal admin to configure a widget Angular Providers:

keep widget in sync when change records or filters
Shares context between widgets
Create reusable behaviors and UI components then injects them into multiple widgets

Write widget logic

Server Script Global Objects

Object Name	Description
data	Object containing a JSON object to send to the Client Script
input	Data object received from the Client Script's controller.
options	The options used to invoke the widget on the server

Khi một widget instance được khởi tạo, data và input objects sẽ được khởi tạo.
Server script sẽ tạo ra một data object.
Sau khi Server script thực thi, data object được chuyển thành JSON (is JSON serialized) và gửi đến client controller.
Use the options object to see what values were used to invoke the widget.

Client Script Global Objects

Object Name	Description
data	The serialized `data` object from the Server Script
options	The options used to invoke the widget on the server

When the controller is created, the client data object is populated by the serialized JSON object sent from the server (a copy of the server's data object) Use the options object to see what values were used to invoke the widget. The options object is read-only.

Client Script Global Functions

All Client Script global functions return a JavaScript promise. The Client Script global functions are:

Function Name	Description
this.server.get()	Calls the Server Script and passes custom input.
this.server.update()	Calls the server and posts this.data to the Server Script.
this.server.refresh()	Calls the server and automatically replaces the current options and data from the server response.

Use widget APIs

Service Portal has an API known as the Widget API. The Widget API contains classes for both client-side and server-side scripting.

AngularJS Events with Widgets

AngularJS uses a publish and subscribe strategy for handling events. Events are useful for notifying widgets about important things happening in other widgets. For example:

Record selected
Changed value
Data deleted
Data added
And more....

Work with events in AngularJS using these functions:

$emit(): Send an event up the scope hierarchy
$on(): Listen for events of a given type

DEVELOPER TIP: Avoid the use of $rootScope.$broadcast() because it can cause performance issues.

Widget Client Scripts create the widget's controller, c. When working with multiple widgets on a page, widget controllers are siblings; they do not have a parent-child relationship. To emit and listen for events, use the parent of all scopes, $rootScope.