Advanced Code Editor

The Advanced Code Editor provides FintechOS engineers with a simple and yet powerful interface that allows them to insert and edit HTML, CSS and JavaScript attributes by using code.

The table below lists the attributes that can be inserted or edited using the Advanced Code Editor.

Entity Attribute
EntityForm After Events
EntityForm Before Events
EntityForm Template
Entity Form Field Attribute Change Event
Entity Form Section After Events
Entity Form Section After Section Save
Entity Form Section Before Section Save
Entity Form Section Template
EntityView Fetch Object Expression
EntityView After Generate Js
EntityView Display Options
Automation Script Code
Automation Script Libraries Code
Client Script Library Definition
Client Script Library Code
Custom Form (Custom Flow) After Generate Js
Custom Form (Custom Flow) Template
Html Widget JavaScript
Html Widget Html
Style Sheet Code


  • Browsing files and nodes
  • Searching for specific nodes or specific content in files
  • Simplified code editing using code snippets
  • Live preview of HTML files
  • Debugging right from the editor
  • Insert code blocks and customize them as best suit your needs

How to Access the Advanced Code Editor

You can access the Advanced Code Editor in two ways:

  • From the menu, click Advanced > Advanced Code Editor. By doing so, you will see all files and nodes available in FintechOS Studio.
  • When editing one of the entities listed in the table above, click at the top-right corner of the configuration page the Open in Code icon. By doing so, you will be able to browse the files of the current entity.

General Layout

The Advanced Code Editor has a common user interface which is comprised of the following panels: an explorer on the left, showing all of the folders and files you have access to, main editor in the center, showing the content of the files you have opened, a property list on the right, showing the values of the attributes from the file you have opened, a toolbar on top and two search tabs at the bottom.

Files Explorer

Displays in a tree view the files you have access to. You can browse and select the attribute files you want to edit. The files are organized in folders.


The toolbar displayed on top provides the controls to perform basic operations like saving or closing file(s) and also debugging the code directly in the editor or live previewing the HTML files. The table below describes the controls available.

Control Description
Check file history Displays the version history of the currently opened file (if any).
Preview Mode Available only for HTML files, allows you to toggle between the source code or the live preview of the HTML file. When choosing live preview, below the HTML source code, a panel will be displayed within the main editor showing how the HTML file will look like in the UI.
Close all open tabs Closes all opened files. When you open multiple files, they are displayed as tabs.
Save all Saves all opened files.
You can also save all opened files by pressing CTRL+SHIFT+S.
Save Saves the file you’re currently working on.
You can also save the file you’re working on by pressing CTRL+S.

Search Nodes

The tab allows you to search available nodes by name. Enter the name of the node you want to search for and press Enter. The search returns the list of nodes partially matching the name of the node you provided.

Search in Files

The tab allows you to search for specific content within the available files. Enter the content to search for (e.g., an attribute, function) and press Enter. The search returns the list of nodes which contain the content you provided.

Properties List

For some of the nodes a list of properties is displayed, on node selection, on the right-side panel.

Previewing HTML Files

To preview an open HTML file, from the toolbar toggle the Preview Mode button on.

Below the preview panel, a toolbar with three colored icons is available. The icons allow you to perform specific actions, as follows:

  • Green icon - maximize the live preview to the main editor panel.
  • To maximize the preview panel even ore (by hiding the search tabs), click the down-arrow.

  • Orange icon - minimize the live preview.
  • Red icon – close the live preview. The Preview Mode button is automatically toggled off.

How to use the Advanced Code Editor

Browse or search for the files you want to edit and open them by clicking on the files. Provide the code which defines how and what the files should do and save the changes. You can also insert predefined code blocks and change them to best suit your needs.

To write the code faster and typo-free, use the built-in Intellisense and code snippets. For information on how to use code snippets, see Code Snippets Support.

Debugging files from the editor

You can debug a file directly in the editor. To do so, open the file and on the toolbar, click the Check file history button (). The panel on the left shows file versions in descending order, who made the change, and the date and time of the change. The panel on the right shows a side-by-side comparison of current and previous versions. Changes performed in current version are highlighted.