Editor Implementation
The Code Effects Rule Editor is a web-based component, implemented in a .NET web application. It is free for personal, community, development and research use as Code Effects Personal; commercial use requires a Code Effects package, Standard or above. It supports all current .NET web platforms and client frameworks such as React, Angular, and Vue. This page adds a stand-alone editor to your application. If you use the Rule Repository, you do not implement the editor yourself: the repository has it built in, and Repository Implementation is the page to follow.
Estimated Time to Production
A stand-alone implementation of the Rule Editor and the Rule Engine together, with your own rule storage, versioning and testing, typically takes:
- A team of two or three .NET developers: 2 to 4 months.
- An AI coding agent: 2 to 5 hours, plus testing and review by your team.
Most of that time goes into rule storage, versioning, testing and approvals, which the Rule Repository provides ready-made. These are typical figures from implementations of our customers, not a commitment; see Code Effects Implementation for what they assume.
Steps
Step 1
Reference the Rule Editor in your .NET web project:
- Under Code Effects Personal, reference the latest version of
CodeEffects.Rule.Editor.Personal from NuGet. It also installs CodeEffects.Rule.Common.Personal.
- With a commercial package, download your package with your product key from the Code Effects Portal and reference
CodeEffects.Rule.Editor and CodeEffects.Rule.Common from it. See Code Effects Packages.
Step 2
Reference the editor's browser files. They are in the @codeeffects/editor npm package:
codeeffects.editor.js – the script that defines all client-side editor functionality.codeeffects.editor.common.css – the core stylesheet of the editor.codeeffects.editor.light.css or codeeffects.editor.dark.css – the light (default) or the dark theme.
The script is an ES module, so it works both in client frameworks and on plain pages:
Import it as a module (React, Angular, Vue, etc.):
// If using the npm package
import { $rule, $ce } from "@codeeffects/editor";
// If referencing the script as a file
import { $rule, $ce } from "../your-scripts/codeeffects.editor.js";
... or reference it with a <script> tag (notice the module value of its type):
<link rel="stylesheet" href="/your-styles/codeeffects.editor.common.css" />
<link rel="stylesheet" href="/your-styles/codeeffects.editor.light.css" />
<script type="module" src="/your-scripts/codeeffects.editor.js"></script>
See CSS Styles for the themes and how to match the editor to your design. The editor needs no setup on pages that enforce Trusted Types.
Step 3
The editor needs some .NET code on the server to generate its settings. You can use any type of server API to move rule data between the server and the client. This ASP.NET Core endpoint returns the settings for an editor whose source object is a .NET class:
using CodeEffects.Rule.Common.Models;
using CodeEffects.Rule.Editor;
namespace YourApp
{
public static class Api
{
public static void MapEndpoints(this WebApplication app)
{
// Returns client settings for the editor
app.MapGet("/api/settings", () =>
{
var editor = new Control("divEditor")
{
EvaluationMode = EvaluationMode.Execution,
// The type of the source object
SourceType = typeof(YourClass)
};
return Results.Ok(new Settings
{
GlobalData = editor.GetGlobalData(),
EditorData = editor.GetEditorData()
});
});
}
}
public class Settings
{
public string? GlobalData { get; set; }
public string? EditorData { get; set; }
}
}
On your page:
// On page load
const res = await fetch(
'/api/settings',
{ headers: {'Accept': 'application/json'} });
const settings = await res.json();
// This renders the editor inside
// your "divEditor" div container
const editor = $rule.init(
{
id: "divEditor",
globalData: settings.globalData,
editorData: settings.editorData,
saveRuleCallback: saveFunction,
loadRuleCallback: loadFunction,
deleteRuleCallback: deleteFunction,
notifyCallback: alertFunction
});
Step 4
Store the rules. The editor never saves anything itself: its save callback hands the rule to your code, and your server checks it, turns it into Rule XML and stores it wherever you choose. See Storing Rules for the save, load and delete endpoints, and Engine Implementation to evaluate the stored rules.
The example above shows the simplest way to configure and render the Rule Editor using a .NET class as the source object. Source objects can also come from Source XML or an Adaptive Source, and the editor offers many more settings. See Initialization of the Rule Editor for the server-centric and client-centric ways to start it. If you need assistance with your implementation, please contact us.
Facts for AI Coding Agents
If you are an AI agent implementing the Rule Editor, these facts prevent the most common mistakes:
- The server and the browser must use the same source object: the
Control that produces the settings and the Control that receives a saved rule are both created with it.
- Pass
GetGlobalData() and GetEditorData() to $rule.init(..) as the strings they are; do not parse or re-serialize them.
- The browser package is
@codeeffects/editor and the script is an ES module: reference it with type="module" or import $rule from it. Reference codeeffects.editor.common.css and one theme stylesheet.
- The editor never saves. In the save endpoint, call
LoadRuleData(..) with the posted rule, check IsEmpty and then IsValid, and only then call GetRuleXml(), which throws for an invalid rule. For an invalid rule, return GetInvalidData() so the page can show what is wrong.
- Use the rule's ID that the editor created (
Rule.ID) as its key in your storage.
- Use
EvaluationMode, not the obsolete Mode, and SourceProvider (an ISourceProvider) for an Adaptive Source.
- Show the editor's messages as text, never as HTML.
Resources