4.1.4.2 Forms Wizard, Step 3, Define Custom Html for a column

Abbreviations, used in manual:

FW - Form Wizard

RDAE - Reference Data Admin Editor

In a specific FW, go to Step 3,  choose the needed column, click "Advance column setting",  choose the "Custom Html" value in the "Column Type" field, insert valid HTML code into the "Style" text box.

For example:

 

 

To get the current value: {{row.COL_NAME}}. For example: {{row.Customercity}}.

You can use HTML tags or combine them with AngularJS syntax.

HTML - colouring of a text: <span style="color: blue">{{row.Customercity}}</span>

It's possible to designate values based on specific conditions outlined within the HTML code. For instance:

Or with an AngularJS condition:

<span ng-style="{color: row.Customercity !== 'admin' ? 'purple': 'green'}">{{row.Customercity}}</span>

The last example will color all the values which are NOT admin as blue and the values which ARE admin as green.

 

Handling Special Characters in AngularJS:

AngularJS may encounter issues processing special characters like backslash (\), quotes, <, >, &, \n, and \t in expressions such as {{row.SQL_Query}}, potentially causing rendering errors or breaking the UI.

For example:

For a query like:

SELECT REPLACE(user_input, '\\', '') AS sanitized_input FROM USER_DATA;

Using {{row.SQL_Query}} may fail to render correctly due to the backslash.

Solution:

Use ng-bind-html to handle special characters properly:

<span ng-bind-html="row.SQL_Query"></span>

This ensures accurate rendering and prevents UI issues.

 

 

In general, it is a basic HTML with angular syntax. 

Please refer to the following manuals for more information: 

Basic HTML: https://www.w3schools.com/html/html_basic.asp

Basic AngularJS: https://www.w3schools.com/angular/