Code Block

Overview

The Code Block Form Control provides an inline code editor/viewer powered by the Monaco Editor. It allows users to view, edit, and validate code or configuration snippets directly within a Form, without leaving the Decisions interface.

This control supports syntax highlighting for common languages such as JavaScript, C#, HTML, JSON, SQL, and CSS, as well as user-defined languages using customizable keyword, operator, and variable patterns. Font size and line numbering can be adjusted for readability, creating a more intuitive editing experience.

The Code Block is particularly useful for building developer-facing or configuration-driven Forms where code, expressions, or formulas are entered or reviewed as part of a workflow. It enables organizations to safely capture and display script logic, custom rules, or data transformation expressions in a structured and readable format.

Example

Predefined Language

1. Drag a Code Block control onto the Form.
2. In Code Settings, set:
   1. Font Size = 16
   2. Show Line Numbers = checked
   3. Language = JavaScript
3. Set Input to Static and provide the following text:

   function helloWorld() {
     console.log("Hello, World!");
   }
   helloWorld();

4. Drag a second  Code Block control onto the Form.
5. In Code Settings, set:
   1. Font Size = 16
   2. Show Line Numbers = checked
   3. Language = CSS
6. Set Input to Static and provide the following text:

   body {
     background-color: #f5f5f5;
     color: #333;
   }
   

Define a Custom Language

Defining a language exposes Monaco Editor settings. The properties are applied in the Tokenizer in the following order: Keywords, Operators, Variables. Therefore the Regex must be applied carefully in some cases.

1. Drag a third Code Block control onto your Form.
2. In Code Settings, set:
   1. Font Size = 16
   2. Show Line Numbers = checked
   3. Enable Define Language and configure the following:
      1. Defined Language ID = MyCustomLang
      2. Keywords = IF THEN ELSE SUM AVG ROUND
      3. Operators = + - * / = < >
      4. Variables = Price Quantity Discount
3. Provide a Static Input, and enter the following text:

   IF(Price * Quantity > 100, ROUND(SUM(Price, Discount), 2), AVG(Price, Discount))

   

Code Block Properties

Feature Changes