Initialization of the Rule Editor

The Rule Editor can be initialized on a web page in one of two ways:

• Server-centric initialization
• Client-centric initialization

The first approach is intended for applications that frequently change editor settings, such as source objects, UI options, CSS, current UI culture, or other server-generated configuration. Since those settings are already produced on the server, it often makes sense to perform the entire editor initialization there. This initialization method has been available since the first release of the Code Effects platform in 2009 and remains supported for backward compatibility.

The second approach is handled primarily by the client-side editor script. It requires only two pieces of data from the server, while all remaining settings can be configured directly by your client-side code.

Both approaches provide identical functionality. Ultimately, they both initialize the editor by calling the same $rule.init() method, differing only in the data passed to it.

Server-Centric Initialization

First, initialize the server-side Control instance and obtain the two pieces of data required by the client. The following example comes from one of our demo projects and uses the Reflection source model:

using CodeEffects.Rule.Common.Models;
using CodeEffects.Rule.Editor;

public class Settings
{
	public string? GlobalData { get; set; }
	public string? EditorData { get; set; }
	public EvaluationMode Mode { get; set; } = EvaluationMode.Execution;
	
	// The editor supports many more settings.
	// This example uses only the most common ones.
	
	public bool Toolbar { get; set; } = true;
	public bool HelpString { get; set; } = true;
	public bool Dots { get; set; } = false;
}

public static class Api
{
	public static void MapEndpoints(this WebApplication app)
	{
		// Returns client settings for the editor
		app.MapGet("/api/settings", () =>
		{
			var settings = new Settings();
			var editor = GetControl(settings);
			
			// Set UI settings for the editor
			settings.GlobalData = editor.GetGlobalData();
			
			// Set source-related settings
			settings.EditorData = editor.GetEditorData();
			
			return Results.Ok(settings);
		});
	}
	
	private static Control GetControl(Settings settings)
	{
		// Pass the ID of the div element
		// that hosts the editor
		var editor = new Control("divEditor");
		
		// Use Reflection source model
		editor.SourceType = typeof(Patient);
		editor.EvaluationMode = settings.Mode;
		
		editor.ShowHelpString = settings.HelpString;
		editor.ShowToolBar = settings.Toolbar;
		editor.ShowLineDots = settings.Dots;
		
		return editor;
	}
}

The client-side implementation is intentionally simple:

// Declare editor as a global variable
var editor = null;

// Load settings
const res = await fetch(
	'/api/settings',
	{headers: {'Accept': 'application/json'}});
	
const settings = await res.json();

// Initialize the editor
editor = $rule.init(settings.globalData);

// Attach rule management callbacks.
// See the demo projects for their implementation.
editor.setCallbacks(load, remove, save);

// Load source-related settings
editor.loadSettings(settings.editorData);

Client-Centric Initialization

The client-centric approach gives your client-side code complete control over editor initialization. The following example uses the Adaptive Source model from one of our demo projects.

In this case, the Settings class is smaller because UI settings are configured on the client instead of the server. Likewise, the GetControl() method only needs to assign the menu provider that implements IMenuProvider interface and supplies dynamic menus while the user creates or updates rules.

The endpoint itself remains unchanged:

public class Settings
{
	public string? GlobalData { get; set; }
	public string? EditorData { get; set; }

	public EvaluationMode Mode { get; set; } =
		EvaluationMode.Execution;
}

private static Control GetControl(Settings settings)
{
	var editor = new Control();
	editor.MenuProvider = new MenuProvider(typeof(Patient));
	editor.EvaluationMode = settings.Mode;
	
	return editor;
}

The client-side initialization is more flexible:

var editor = null;

const res = await fetch(
	'/api/settings',
	{headers: {'Accept': 'application/json'}});

const settings = await res.json();

// Initialize the editor
editor = $rule.init(
	{
		id: "divEditor",
		refData: "Anything",
		showHelpString: true,
		showToolBar: true,
		globalData: settings.globalData,
		editorData: settings.editorData,
		saveRuleCallback: save,
		loadRuleCallback: load,
		deleteRuleCallback: remove,
		notifyCallback: info,
		
		// Passing the adaptiveSource object
		// instructs the editor to use the
		// Adaptive Source model.
		adaptiveSource:
			{
				menuCallback: menu,
				behavior: $rule.behavior.replace
			}
	});

In this example, the $rule.init() method receives a single settings object that controls the editor initialization.

Properties