**Welcome to our JAVASCRIPT PAGE Section W**
----
=====Web Servers=====
- The ServiceNow "Nodes" are Tomcat Web Servers and they handle the traffic to the instance. When a user logs in they are directed to an available node which will process and run their requests…
- To see the Nodes configured for each Instance, review table sys_cluster_state.
- Additional "horsepower" information from ServiceNow Support:
- In regards to memory, all application nodes have ~2GB of heap space memory available, regardless of production vs sub-prod. Similarly, CPU is the same across application nodes.
- The disk capacity and buffer of the database will increase to accommodate the size of your instance catalog as it grows, so can vary between production and sub-prod, but only because of the difference in data volume and activity, and both instances still have the same capabilities.
- The only real differences between instances is the number of nodes, and that production instances have high availability functionality, so have a standby database and nodes in another datacenter acting as a backup.
=====Widgets=====
- Takeaway
- A Widget is a reusable component (tile) which provides functionality on a Portal page. ServiceNow comes with many widgets, and more can be created. Widgets consist of HTML markup, CSS, a JavaScript controller, and client-side and server-side code. When a portal page is loaded by a web browser, an AngularJS directives is created for each widget on the page. A widget lives inside a Column, inside of a Row, inside of a Container. An Angular "Provider" shares Context between Widgets, keeps Widgets in sync, and maintains State.
- A Widget is like a tile for a particular topic/function.
- Different roles have access to different Widgets.
- Reusable components which make up the functionality of a Portal Page.
- ServiceNow provides a large number of baseline widgets.
- Widgets consist of HTML markup, CSS, a JavaScript controller, and client-side and server-side code.
- Widgets involve AngularJS Directives. When a page is loaded, a directive is created for each widget on the page.
- Widgets are tightly coupled to server-side JavaScript code which is powered by the "Rhino" engine under the Now Platform.
- After defining a Page's Layout using Containers, Rows, and Columns, you add Widgets to the Page.
- The "Move to Header" option pins a widget to the header so that it always stays visible even when the user scrolls down.
- Widget Components
- HTML Template
- Binds client script variables to markup.
- Gathers data from user inputs like Text boxes, Radio buttons, and Checkboxes.
- Client Script
- Defines the AngularJS Controller.
- Passes data to the HTML template.
- Passes user input and data to the server for processing.
- Server Script
- Sets the initial Widget state.
- Sends data to the Widget's Client Script using the data object.
- May access record data and web services.
- Runs server-side queries.
- Link Function
- An optional component which uses AngularJS to directly manipulate the DOM.
- Option Schema
- An optional component which allows a Service Portal Admin to configure a Widget; that is to define Instance Options.
- Specifies the Widget Parameters.
- Makes Widgets flexible and reusable.
- Angular Provider
- Keeps a Widget in sync when changing a record or filter.
- Shares Context between widgets.
- Maintains and persists state.
- Creates reusable behaviors and UI components, then injects them into multiple Widgets.
- ServiceNow provides a large number of Baseline Widgets, including:
- Approvals
- Carousel
- Catalog content
- Icon Link - Open another Portal Page. Includes a "Glyph" property which allows you to easily add simple graphics.
- Knowledge Base
- My Requests
- Popular questions
- Search
- See Also
Widget Editor
=====Widget Editor=====
- Takeaway
- The Widget Editor development tool has hideable side-by-side panes for Client Script, CSS, HTML, Server Script, and others. In HTML you might define static markup for display on the web page, invoke Angular directives such as ng-repeat to iterate through arrays passed up from server-side script, and declare event handlers for user actions such as Click. In SERVER SCRIPT you might declare arrays for passing data up to the client, populate them via GlideRecord, and use input from the client. In CLIENT SCRIPT you might declare functions, use those functions to Emit events, declare event handlers, handle events, make calls to the server, via the controller "c", declare callback functions, and handle callbacks from the server. Widget Development is definitely one of the more intense/complex development topics in ServiceNow, as there are several different technologies involved, and you are working both on the client side and server side.
- Modules
Service Portal - Service Portal Configuration - Widget Editor
Service Portal - Pages
Service Portal - Widget Instances
- See Also
AngularJS
- Geoff: Widget Development is definitely one of the more intense/complex development topics in ServiceNow, as there are several different technologies involved, and you are working both on the client side and server side.
- The Application for editing Widget Components.
- A development tool that allows you to view and edit the source code for existing widgets, create new widgets, and update a widget's option schema.
- A parent-child relationship between widgets Only exists if one widget is Embedded inside another widget.
- Has the following panes, for side-by-side editing and review:
Client Script
The following is used to get access to the "controller", "c", which is instantiated automatically: var c = this;
In order to use classes from the client-side Widget API, the "global" object for each API must be passed as a dependency to the Client Script. The Client Script creates the AngularJS controller using the passed in dependencies. You pass dependencies in the client script function:
function(){...}
-->
function(spUtil){...}
CSS
Demo Data
- This is provided as a convenience for testing widgets in the Preview pane.
- It overrides any data which may be passed from the server to the client at runtime.
- Any number of strings may be defined, separated by commas.
- The demo data pane is only visible when the Preview pane is visible.
HTML
Link Function
Preview
Server Script
- Cloning
- The process of creating an editable copy of a widget from an existing widget.
- Important: When building a Widget, you normally will start from an existing widget, rather than starting from scratch.
- Instructions
Filter Navigator - Service Portal Configuration - Widget Editor - [Existing Widget Name]...
Hamburger Menu - Clone [Existing Widget Name] - [MyWidgetName]
Check "Create Test Page" and give the test page an ID also. Examples:
request_fields_nh
request_fields_nh_test_page
To get to the test page, go to Service Portal Configuration - Page Editor - idOfYourNewTestPage
https://[InstanceName].service-now.com/sp_config?id=[id of the Widget you just created]
- Client Script
- Global Objects
data - The serialized data object from the Server Script; or from the object defined in the Widget Editor "Demo Data" pane.
options - The options used to invoke the widget on the server. Read Only.
- Global Functions
this.server.get() - Calls the Server Script and passes in custom input.
this.server.update() - Posts this.data to the Server Script.
this.server.refresh() - Calls the server and automatically replaces the current options and data using the server's response.
APIs Available
- The Web Browser Development Tools (especially the Console) are very useful to use in concert with the Client Script pane.
- Classes
- spUtil - Contains utility methods to perform common functions in a Service Portal widget client script.
- spUtil.addErrorMessage();
- spUtil.recordWatch(); - Used to register a "listener" in a widget. The listener is notified when DB table records change.
- spModal - Provides an alternative way to show alerts, prompts, and confirmation dialogs.
- spModal.alert();
- console - console.log() - Very useful for debugging. But consider using jslog() instead, although it only shows messages for admin users.
- Options
- Widget Options are admin configurable parameters which allow each widget instance to behave or look differently.
- When the admin adds the widget to a Page, he can use the Edit (pencil) icon to set the Widget Options.
- The Widget "Option Schema" defines the user-configurable fields. This is available from the Widget Hamburger Menu. Or Ctrl Right Click the widget.
- Widget options and their values are stored in the Widget Instances table in JSON format.
- Widget options are accessible in both Client and Server Scripts using the "options" global object.
Server Script: options.title = "Hello World";
Client Script: c.options.title = "Hello World";
- Widget options are also accessible in an HTML Template using the "options" global option:
{{::c.options.title}}
- Server Script
- Global Objects:
- data - Object containing a JSON object, constructed by Server Script, and sent TO the Client Script's "controller".
- input - Data object received FROM the Client Script's controller.
- options - The options used to invoke the widget on the server.
APIs Available
- Classes
- GlideSPScriptable - Methods for use in Service Portal widget Server Scripts. Use the global $sp object.
- GlideSystem - ?
- gs.error()
- gs.addErrorMessage()
- getWidget() - Gets a widget by id or sys_id, runs the widget's server script using the provided options, then returns the widget model.
- Tips
- Many developers use third-party debugging tools when debugging browser-based applications, for example: NG Inspector Chrome Extension
- One useful Client-Side debugging technique is to output an object to the HTML by adding an actual HTML tag as follows:
{{data|json}}
- Important - Hidden Feature: You can use Ctrl + Right Click on a widget in the preview pane to get to the speed menu for the widget, and access options such as "Log to console: $scope.data".
- Example
- Portal Page
- Dragged and Dropped both widgets onto the page.
- Notes List Widget
- Server Script
2)
- Declare an array called "notes".
- Use GlideRecord to query the database with the current user as a parameter.
- Populate the array.
- Apparently ANY array declared in this script block will make it back to the client as a part of the $scope object (scope.data.notes).
- Client Script
5)
- Declare a function which will be executed when an item is clicked. (Corresponding function name appears in the HTML.)
- This function will "emit" an event.
- c.selectedItem = function(idx) {
...
$rootScope.noteID = id;
$rootScope.$emit('selectNote', id); }
- HTML
1)
Define some static HTML for the List Widget, just so it shows up.
${Notes} - Believe this serves as both the text "Notes" and an object.
Plain Text
3)
Refine the HTML for the List Widget. Use a List Group and List Group Item, along with "ng-repeat" to iterate through the "data" object, and access the data records in the "notes" array, supplied by the Server Script. Use magical {{ }} syntax to access individual properties.