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 |
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
- 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 Innovation 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.
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.
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.
- Orange icon - minimize the live preview.
- Red icon – close the live preview. The Preview Mode button is automatically toggled off.
To maximize the preview panel even ore (by hiding the search tabs), click the down-arrow.
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.