Code Effects Client-Side API
The Code Effects Rule Editor provides a powerful, modular client-side interface that integrates seamlessly with any modern web application. It enables users to visually create, edit, and manage business rules directly in the browser, while your server-side code handles rule persistence and evaluation through the Code Effects Rule Engine.
The editor is implemented as a self-contained JavaScript library that exposes a compact set of public functions via two global variables — $rule and $ce — while encapsulating all other logic within its internal scope. This makes it completely safe to add the editor to any web page without risking conflicts with existing scripts, frameworks, or global objects.
Starting with script's version 6.1.5, the editor has been modularized to support both modern frameworks and traditional web applications:
- It can be imported as an ES module in client frameworks such as React, Angular, or Vue.
- It can also be referenced as a plain script in any HTML markup using the
<script type="module"> tag.
- The editor’s main script is distributed through npm under the package name
codeeffects, making it easy to integrate into any build pipeline.
The editor includes two CSS files:
codeeffects.common.css — the core stylesheet shared across all themescodeeffects.light.css — the new default Light theme (a Dark theme will be introduced in a future release)
The Rule Editor is fully self-contained and has no dependencies on third-party client or server libraries. It supports all current versions of all major browsers.
Refer to our demo projects for examples of referencing, configuring, and using the editor across different .NET web platforms.
Global Variables
$rule
This global shortcut is declared to make the footprint of CodeEffects namespace smaller.
Returns
Object – CodeEffects.Rule namespace
$ce (param1)
This is a global shortcut to the $rule.Context.getControl() function that can be used to get an instance of a Rule Editor by the client id of its hosting div element
Parameters
param1 (string) – Client id of the hosting div element of Rule Editor. Required.
Returns
Object – Instance of the Rule Editor
Example
var codeeffects = $ce("divRuleEditor");
Global Functions
$rule.init (param1)
Call this function once after the current DOM is loaded. Calling this function creates a brand new instance of Rule Editor. It throws an Error object with the value of CL85 if an instance of Rule Editor with the same div.id already exists in the current context. Use the $ce shortcut instead if you need to get a reference to an existing instance of Rule Editor.
Parameters
param1 (string) – JSON string received from the CodeEffects.Rule.Editor.Control.GetInitialSettings() server method. Required.
Returns
Object – Newly created instance of Rule Editor
Public Event Handlers
onBlur (param1)
Gets invoked when the Rule Area loses focus (i.e., when the user first clicks or taps on any DOM element in the current document that is not a child node of the main div container of the Rule Area while it is focused). Subscribe to the onblur event of the Rule Area by calling this handler and passing a callback function as its only parameter. Unsubscribe by calling this handler without any parameters or by passing null as its only parameter.
Parameters
param1 (Function) – A callback function that the editor calls when the Rule Area loses focus. The editor passes no parameters to the callback. Required.
Example
var codeeffects = $ce("divRuleEditor");
codeeffects.onBlur( function () { alert("The Rule Area is blurred"); } );
onFocus (param1)
Gets invoked when the Rule Area receives focus (i.e., when the user first clicks or taps on any child node of the main div container of the Rule Area while it is not focused). Subscribe to the onfocus event of the Rule Area by calling this handler and passing a callback function as its only parameter. Unsubscribe by calling this handler without any parameters or by passing null as its only parameter.
Parameters
param1 (Function) – A callback function that the editor calls when the Rule Area receives focus. The editor passes no parameters to the callback. Required.
Example
var codeeffects = $ce("divRuleEditor");
codeeffects.onFocus( function (el) { alert("The Rule Area is focused. Target element: " + el.id); } );
Public Instance Functions
clear()
Removes all elements of the current rule from the Rule Area.
Returns
Object – Rule Editor instance
deleted (param1)
Calling this function after deleting a rule is necessary to clear editor's cache and remove the deleted rule from the Rules menu (if the Toolbar is displayed) and context menus.
Parameters
param1 (Function) – ID of the rule that is being deleted. Required.
Returns
Object – Rule Editor instance
disable ()
Prevents users from adding new rules or modifying the rule currently loaded in the Rule Area.
Returns
Object – Rule Editor instance
Example
var codeeffects = $ce("divRuleEditor");
codeeffects.disable();
dispose ()
Disposes all resources used by Rule Editor and removes it from the current context.
Returns
Object – Rule Editor instance
enable ()
Restores ability to add new rules or modify the rule currently loaded in the Rule Area.
Returns
Object – Rule Editor instance
extract ()
Returns a JSON object containing the current rule and a value indicating whether it is valid. If the Rule Area is empty, returns an empty object.
Returns
string – JSON object
isAltered ()
Returns true if the user has modified an existing rule after it was loaded into the Rule Area or a new rule after its creation was initiated. Otherwise, returns false.
Returns
bool – Boolean value
isEmpty (param1)
Returns true if the Rule Area currently contains no rule elements. Otherwise, returns false.
Parameters
param1 (string) – Indicates whether formatting elements of the rule, such as tabs and new lines, should be counted. Optional. Defaults to true.
Returns
bool – Boolean value
isEvaluationType ()
Returns true if the loaded rule is of the evaluation type or if the rule author selected the New evaluation-type rule option from the Rules menu of the Toolbar. This function does not check which rule elements the author has added to the Rule Area so far.
Returns
bool – Boolean value
getRuleId ()
Returns the string ID of the current rule assigned by the Rule Editor. The editor generates new rule IDs by calling .NET’s System.Guid.NewGuid().ToString(). Returns null if no rules have been loaded into the editor, if the current rule has not yet been assigned an ID, or if the Rule Area is empty.
Returns
string – String value of the Rule ID (Guid)
loadInvalids (param1)
Call this function to load data of the invalid rule into the Rule Editor.
Parameters
param1 (string) – JSON string received from the server-side CodeEffects.Rule.Editor.Control.GetClientInvalidData() method. Download the related demo project to see how to load invalid rule data into the Rule Editor. Required.
Returns
Object – Rule Editor instance
loadRule (param1)
Call this function to load a rule into the Rule Editor.
Parameters
param1 (string) – JSON string received from the server-side CodeEffects.Rule.Editor.Control.GetClientRuleData() C# method. Download related demo project to see details of use of this function. Required.
Returns
Object – Rule Editor instance
loadSettings (param1)
Call this function to load the Rule Editor client settings. You should also call it whenever the rule author changes any of the editor’s settings, such as the visibility of the Help String, and similar options.
Parameters
param1 (string) – JSON string received from the server-side CodeEffects.Rule.Editor.Control.GetClientSettings() C# method. Required.
Returns
Object – Rule Editor instance
saved (param1)
Call this function after saving a new rule or updating an existing one to refresh the Rules menu of the Toolbar and context menus of the editor with the new or updated values. Download the related demo project to see details on saving rules.
Parameters
param1 (string) – ID of the rule that has been saved or updated. This parameter is required for new rules but optional for updates.
Returns
Object – Rule Editor instance
setClientActions (param1, param2, param3)
Call this function during page initialization to specify which functions the Rule Editor should call when the rule author wants to load, delete, or save a rule. Do not call it if the Toolbar is disabled.
Parameters
param1 (Function) – Callback function that handles loading a rule. This function must declare a single parameter of type string. The Rule Editor calls this function and passes it the rule ID when the rule author selects that rule from the Toolbar’s Rules menu. Required.param2 (Function) – Callback function that handles deleting a rule. This function must declare a single parameter of type string. The Rule Editor calls this function and passes it the rule ID when the rule author clicks the Delete button on the Toolbar. Required.param3 (Function) – Callback function that handles saving a rule. This function must declare a single parameter of type object. The Rule Editor calls this function and passes it an object containing the rule data when the rule author clicks the Save button on the Toolbar. This callback works in tandem with the CodeEffects.Rule.Editor.Control.LoadClientData() C# method. See the related demo project for details on rule management. Required.
Returns
Object – Rule Editor instance