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_reactor.AppInstall();
<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.
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. |
A react component that renders a simple clock.
Includes the Fontawesome css hosted from the same instance
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 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. |
A react component that displays a spinning waiting icon.
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 if the Reactor application produces log output.
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);
}
onClick()
{
this.setState( {clicked: true} );
if (typeof this.props.callbackOnClick == 'function')
{
this.props.callbackOnClick();
}
}
render()
{
return e('button',
{
onClick: this.onClick
},
this.props.text);
}
}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 DevToolsGetFormatConfig function is called by the DevTools extension point instance class and returns an object with field formatting information.
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.
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.
Renders the specified React component using the given properties.
Copyright 2022 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