Welcome to Reactor - created and maintained by Sascha Wildgrube.
Use Reactor to create React based applications in ServiceNow. Check out the Demo!
In React its all about React components. With Reactor its all about Reactor components.
A Reactor component may contain a React component class, but its more than that. Reactor components manage the dependencies between the components. Stylesheets are also Reactor components. Think of them as an umbrella of everything you want to make part of your app on the client side.
Reactor components have a "role" - a category that gives a hint about what it really is. Since React does not dictate any sort of separation of concerns - we have to make up for it. We are well advised to create React components not as a mix of logic and html footprint, but to create components that are for user interaction, others for application logic, etc. Reactor helps you getting there.
Reactor components can be modified when loaded by using Component Tokens. Tokens are key value pairs that can be searched and replaced in the scripts, style sheets and urls defined by components. Tokens can be simple text strings, references to system properties or be defined by a script.
Please note: Currently the JavaScript libraries for React (and Babel for JSX support) are loaded from a CDN. This may NOT be compliant with GDPR requirements - so watch out for a future version that supports locally stored libraries.
Reactor is NOT an officially supported ServiceNow product.
Reactor does NOT come with any kind of warranty. If you use it, you own it!
x_snc_devtools.InstallApp("x_snc_reactor");<g2:no_escape>$[
x_snc_reactor.Render('ReactorDemoApp',{ text: 'Hello World!' });
]</g2:no_escape>
Demonstrates the capability of Reactor to embedd React components into a ServiceNow UI Page.
| text | string | A text to be displayed on the main page of the demo app - just to demonstrate how properties are injected into components. |
Styles for the ReactorDemoApp.
The React component loads information on all tables in the instance and displays the tables.
The React component loads information on all tables in the instance and displays the tables.
A React component that creates a button that can be clicked.
| callbackOnClick | function | A callback function that is invoked when the button is clicked. | |
| text | string | The text that is displayed in the button. The button label however can also be passed as children. | |
| tooltip | string | The text to be used in the tooltip that shows when the mouse hovers over the button. | |
| value | string | The value string that is sent back as a parameter to the callbackOnClick function. |
Renders a series of buttons and reports the clicked button back to a callback function.
| callbackOnClick | function | mandatory | The function called when a button is clicked. |
| items | array | mandatory | An array of objects that specify the separate buttons with fields "label" and "value". |
This React component renders the containing elements in its vertical and horizontal center.
A react component that renders a simple clock.
The Colums component provides a multi-column layout.
| columns | array | An array of objects containing the content of the column. | |
| gap | integer | The gap in pixels between the columns. |
A react component displaying an error message.
| text | string | mandatory | The error message text to be displayed. |
A text input element with a clear icon button to reset its contents.
| callbackOnChange | function | Function to be called when the text value of the filter changes. | |
| value | string | The current value of the text filter. |
The Filters component renders a form with filter options and reports back whenever the user changes their selection.
| callbackOnChange | function | The callback function to be called when a filter choice has been changed by the user. | |
| filters | array | An array of objects defining the filter options. Each object should contain the attributes "table", "field", "type" (only "text" is currently supported) and "caption". |
Renders a 3 dimensional Force-Directed Graph.
| callbackOnClick | function | The callback function to be called when the user clicks left on a node. The node object is passed as a parameter. | |
| data | object | mandatory | An object containing the data to be displayed. The object contains: * the array "nodes" which is an array ob objects that contain at least an "id". * the array "links" which is an array of objects with members "source" and "target" that refer to the ids of nodes to connect. |
Renders a form.
| callbackOnChange | function | A callback function to be called when any of the values in the form changes. A object containing all current values is provided as the first parameter. | |
| items | array | mandatory | An array of objects that define the input elements of the form. These objects (may) contain the following attributes: "id", "type", "value", "label". If type is "radio" the object must contain an array named "options" containing objects with attributes: "value" and "label". |
Produces a container that spans over the complete available canvas.
Renders a Google Maps map.
| center | object | An object containing the value "longitude" and "latitude" to specify the center of the map. | |
| heatmap | array | An array of objects representing heatmap points to be rendered into the map. | |
| markers | array | An array of objects representing markers to be placed on the map. | |
| polylines | array | An array ob objects specifying polylines to be rendered into the map. | |
| streetviewcontrol | bool | Specifies of the Google map should cntain the street view control. Default is true. | |
| type | string | Identifies the map type. "roadmap" is the default. Options are "roadmap", "satellite", "hybrid", and "terrain". | |
| typecontrol | bool | Specifies if the Google map should contain the controls to change the map type. | |
| zoom | integer | Zoom factor |
A react component that renders a header menu.
| callbackOnClick | function | A callback function that is invoked when a menu item is clicked. The callback function receives the selected option as a string parameter. | |
| items | array | An array of objects, that specify the menu option. Each object should contain the keys "option" and "label". "label" is the screen text used for the menu items. "option" is a string value passed to the callback function when the menu item is clicked. |
The styles for the HeaderMenu component.
A react component that displays an icon.
| icon | string | mandatory | Specifies the (Fontawesome 4) icon name. |
| size | integer | Specifies the size multiplier: 2 to 5. | |
| spinning | bool | Specifies if the icon should be spinning or not. |
A react component that renders an iframe.
| callbackOnLoad | function | A callback function that is invoked when a new page is loaded within the iFrame. The current url is passed as the first parameter to the function. | |
| url | string | mandatory | The URL to be loaded in the iFrame. |
A react component displaying an info message.
| text | string | mandatory | The info message text to be displayed. |
A demo component that uses JSX syntax.
Renders a rounded box.
A react component that displays a ruler element.
| callbackOnChange | function | A callback function that is called whenever the value of the ruler changes. The function receives the new value as a parameter. | |
| max | integer | Maximum value for the ruler. Default is 100. | |
| min | integer | Minimal value for the ruler. Default is 0. | |
| step | integer | Value by which the ruler can be changed. Default is 1. | |
| value | integer | The initial value set to the ruler. |
A component that renders a tab container.
| callbackOnClose | function | A callback function to be called when the 'x' icon is clicked. The 'x' icon will only be displayed if the callback function is provided. | |
| callbackOnSelect | function | The function is called when a non-selected tab is clicked. | |
| items | array | mandatory | An array of objects containing "label", "value" and "content" fields to specify the tabbed containers. |
| value | string | Specifies the currently selected tabbed container. |
Renders a table.
| cells | array | mandatory | The "cells" property is an array of arrays containing objects or strings representing the cell contents. The object can contain the "content", "horizontal" and "header" fields. "content" conatins the contents of the cell. "horizontal" defines the horizontal text alignment. Options are "left" and "right". "left" is the default. "header" is either true or false. |
| classname | string | The css class name to be assigned to all html elements of the table. |
The default css style sheet for the table component.
A component that renders a tab navigation.
| callbackOnClose | function | A function to be called if the 'x' icon is clicked on a tab. The 'x' icon is only displayed if the function is provided. | |
| callbackOnSelect | function | mandatory | The function is called when a non-selected tab is clicked. |
| items | array | mandatory | An array of objects containing "label" and "value" fields to specify the tabs. |
| value | string | Specifies the currently selected tab value. |
The ToolBar component renders a series of buttons with icons and/or text and returns the clicked button via a callback function.
| callbackOnClick | function | mandatory | The callback functon to be called when a tool has been clicked. It receives the tool's value as a parameter. |
| tools | array | mandatory | An array of objects describing the tools of the toolbar. Each "tool" object should have the following properties: "text" is the text in a button (optional) "tooltip" is the text to be used as a tooltip when hovering over the button (optional) "icon" refers to an icon id for the button (optional) At least one of "text" and "icon" should be provided. "value" is a string which is passed to the callback function. |
The ToolStack component renders a stack of buttons with icons and/or text and returns the clicked button via a callback function.
| callbackOnClick | function | mandatory | The callback functon to be called when a tool has been clicked. It receives the tool's value as a parameter. |
| icononly | bool | Specifies wether tool stack buttons are only using icons as labels. | |
| tools | array | mandatory | An array of objects describing the tools of the toolbar. Each "tool" object should have the following properties: "text" is the text in a button (optional) "tooltip" is the text to be used as a tooltip when hovering over the button (optional) "icon" refers to an icon id for the button At least one of "text" and "icon" should be provided. "value" is a string which is passed to the callback function. |
The React component renders a collapsable and expandable tree of navigation options including a case-insensitive text search.
| callbackOnClick | function | mandatory | The callback function that receives a message once an item has been clicked. |
| callbackOnFilterReset | function | The component calls the callback function if the filter should be cleared - e.g., when collapse icons are clicked. | |
| collapse_all_level | integer | Defines the level up to which navigation items remain expanded if the user selects to collapse all. Default is 0. | |
| collapse_mode | string | The mode string identifier to start with. "none" will expand all navigation items, "all" will collapse all navigation items, "user" will respect the "collapse" field as provided in the items in the navigationtree property. Default is "all". | |
| filter | string | The string by which the filter is initialized. Default is "". | |
| filter_show | bool | Define if the text filter input should be visible. | |
| treenavigation | object | mandatory | The treenavigation object contains the fields "label", "value" and "items". "label" is the visible text to be displayed. "value" is the parameter passed back to the callback function defined by callbackOnClick. "items" is an array of treenavigation objects that represent the next level of the tree. |
A react component that displays a spinning waiting icon.
| text | string | Text to be displayed while waiting. |
A react component displaying a warning message.
| text | string | mandatory | The warning message text to be displayed. |
A UI Element component that provides a framework for a typical workspace with a menu, toolbar, tabbed content, tree navigation, a multi-purpose side bar, output/result area on the bottom and a status bar at the bottom of the screen.
| content | component | The main content area of the workspace. | |
| leftbarheader | component | The top area in the left bar. | |
| logo | component | The logo area on the top left of the workspace. | |
| menu | component | The main menu on the top of the workspace. | |
| sidebar | component | The additional multi-purpose side bar on the right side of the screen. | |
| status | component | The status bar on the bottom of the screen. | |
| toolbar | component | The tool bar below the menu above the content and navigation area. | |
| treenavigation | component | The tree navigation pane on the left side of the workspace. | |
| user | component | The user profile area on the top right corner of the workspace. |
The API for the 3d Force-Directed Graph: https://vasturiano.github.io/3d-force-graph/
Loads the Google Maps API.
Loads the polyfill library from a CDN
https://unpkg.com/react@18.2.0/umd/react.production.min.js
https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js
Contains ReactorComponent - a base class for React components and the "e" shorthand for "React.createElement".
Includes the Fontawesome css hosted on the same instance
The Reactor developer user has access to the React(or) components.
Controls if the Reactor application is active.
Specifies if jsx support is enabled or not. For the time being the only way to support JSX is to use the browser based Babel "standalone" compiler (Refer to https://babeljs.io/docs/en/babel-standalone).
Controls the verbosity of log output produced by the Reactor application.
The table is derived from table Application File (sys_metadata).
The table is derived from table Application File (sys_metadata).
The table is derived from table Application File (sys_metadata).
Creates the pattern "this.onClick = this.onClick.bind(this);" which is to be used in the constructor in a React component class to access the "this" object in a member function (yes, JavaScript is broken).
However, the use of this pattern should no longer be required as the BindAllFunctionsToThis() function is used in the constructor of the ReactorComponent class.
this.onClick = this.onClick.bind(this);
Creates the boilerplate code for a new React(or) component.
class NewComponent extends ReactorComponent
{
constructor(props)
{
super(props);
this.state = { clicked: false };
}
componentDidMount()
{
}
componentWillUnmount()
{
}
onClick()
{
this.setState( {clicked: true} );
if (IsFunction(this.props.callbackOnClick) == true)
{
this.props.callbackOnClick();
}
else if (this.props.text != '')
{
DoModalMessage('New Reactor component',this.props.text);
}
else
{
DoModalMessage('New Reactor component','The button was clicked!');
}
}
render()
{
return e('button',
{
onClick: this.onClick
},
'Click me!');
}
}Retrieves information about the app's dependencies to other apps and required versions.
Gets a system property of this application.
This script installs Reactor.
Sets all system properties to default values.
Sets a system property of this application.
Produces a log output in the application log using the DevTools Debug function.
Implements the extension point for DevTools.
The function DevToolsGetApplicationStatus is called by the DevTools extension point instance class and returns the application status object with additional status information to be displayed on the "DevTools Application Overview" page.
The DevToolsGetFormatConfig function is called by the DevTools extension point instance class and returns an object with field formatting information.
The function DevToolsGetInstancePipelineName is called by the DevTools extension point instance class and returns the pipeline name of an instance based on the given actual name.
The DevToolsGetLinkDirectory function is called by the DevTools extension point instance class and returns an extended (or modified) link directory object that serves as the basis for the DevTools Link page.
The DevToolsGetParentRecord function is called by the DevTools extension point instance class and returns a parent record for the given record if it can be determined.
The function DevToolsRenderDebugDump is called by the DevTools extension point instance class and returns additional debug information provided by the application.
Returns the an array of component names of components the given component depends on.
Returns the record of a component.
Returns the script of a component.
Renders descriptions of React components contained in an app.
Returns true if the application is active, otherwise false.
Returns true if the given string is a valid react component class name.
Produces a log output in the application log.
Produces an error log output in the application log.
Produces a warning log output in the application log.
Renders the specified React component using the given properties.
Compatible Versions: 1.119.0
Repository url: https://github.com/saschawildgrube/servicenow-devtools.git
Reactor is based on DevTools and uses many of its functions.
No technical debt has been documented for this application.
Copyright 2022-2025 by Sascha Wildgrube
Licensed under the Apache License, Version 2.0 (the "License")
You may not use Reactor except in compliance with the License.
You may obtain a copy of the License at: https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
First baselined version