Code Editor

The 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.

Note: The Code Editor is available in FintechOS version 18.2 or higher.

The table below lists the attributes that can be inserted or edited using the 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 User Journey)

After Generate Js

Custom Form (Custom User Journey)

Template

Html Widget

JavaScript

Html Widget

Html

Style Sheet

Code

Code Editor Features

  • 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

How to Access the Code Editor

You can access the Code Editor in roboDesigner in two ways:

  • From the Coding menu, by selecting 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, by clicking 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 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.

Toolbar

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.

Example:  

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.

Example: You want to see the list of files that contain the accountid attribute

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 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.

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 Versions History page will be displayed.

At the left-side it displays in descendant order all the attribute versions and who made the change and when. At the right side it provides a side-by-side comparison between the new (current) and the old value (Version x) for the record selected on the left-side of the page. The changes done in the current version are highlighted.