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.
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");&##60;g2:no_escape>$[
x_snc_reactor.Render('ReactorDemoApp',{ text: 'Hello World!' });
]</g2:no_escape>
A base class for React components and some useful utilities.
Demonstrates the capability of Reactor to embedd React components into a ServiceNow UI Page.
Styles for the ReactorDemoApp.
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. | |
| value | string | The value string that is sent back as a parameter to the callbackOnClick function. |
This React component renders the containing elements in its vertical and horizontal center.
A react component that renders a simple clock.
A react component displaying an error message.
| text | string | mandatory | The error message text to be displayed. |
Includes the Fontawesome css hosted on the same instance
Produces a container that spans over the complete available canvas.
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.
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. |
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.
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) "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 React component renders a collapsable and expandable tree of navigation options.
| callbackOnClick | function | mandatory | The callback function that receives a message once an item has been clicked. |
| 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. | |
| 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 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.
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 functions (yes, JavaScript is broken).
this.onClick = this.onClick.bind(this);
Creates the biolerplate code for a new React(or) component.
class NewComponent extends ReactorComponent
{
constructor(props)
{
super(props);
this.state = { clicked: false };
this.onClick = this.onClick.bind(this);
}
componentDidMount()
{
}
componentWillUnmount()
{
}
onClick()
{
this.setState( {clicked: true} );
if (typeof this.props.callbackOnClick == 'function')
{
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.
Copyright 2022-2023 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