The BellaDati Integrated Development Environment (IDE) editor streamlines the process to contribute changes to your reports, data sets, extensions, configuration and apps, by providing an advanced editor with changes staging and previews.

Following code snippets are supported

  • Application setting - custom stylesheets and HTML for entire application and login page
  • Domain - custom stylesheets and HTML for entire application, login page and export, custom email templates
  • Data set - transformation scripts, custom members
  • Report - indicator formulas, filters, custom members, custom views, action buttons
  • Custom REST API endpoints
  • Extensions - page contents and endpoints

Access the IDE

You can access the IDE from the top menu or when editing scripts in their owning space, e.g. editing report formula.

BellaDati IDE is available to domain admin only and the feature must be enabled by appropriate license key.


IDE Layout

The layout is fully flexible, you can resize or hide particular parts to setup the environment according to your preferences. The layout consists of following elements:



Code navigator

Lists the code fragments grouped by their owner, e.g. domain

Code editor

The large area in the middle is your main code design window. This is where you work with your code snippets.

Action buttons

Actions buttons allows you to perform actions with your code. There are the following actions available:

  • Persist - stores your current changes in the current IDE session. These changes are not saved to the database. You can enable auto-saving feature, which stores the changes automatically. Changed code is marked with * symbol. IDE allows to work on multiple files in parallel.
  • Save all (n) - informs user that there are n code changes within the current session. When clicked, popup window with list of changed code snippets opens. User can discard changes of particular code snippet and save all changes.

  • Discard changes - discards the currently opened code snippet changes
  • Preview - previews the code. Depending on the type of the code snippet, preview button either opens popup and renders the associated object (e.g. report view, custom content), or opens new tab with previewing the changes (e.g. custom HTML, extension, etc.)

Console output

Shows the output in case the the code execution generates some. This is useful especially when executing report formulas with debug mode enabled.

Assistant window

On the right are the context assistant windows. The contents of these will vary depending on what you're working on in the main window.

Layout controls

Layout controls allows user to hide or show particular sections of the IDE.

Code location

Displays the location of the edited code snippet owning object. E.g. report view formula shows "Report → Report name → View name → Indicator name". It is possible to click on the element to navigate to the place where the code snippet is applied.

Side panel

Side panel provides buttons to open Help, Settings, Code Finder functions and Update domain from GIT.

  • Update domain from GIT - Allows user to do domain update, the same way as it is provided with domain Load XML backup. This domain is taken from GIT repository
    • Remote repository - address to your GIT where XML backup is stored. This file needs to start with prefix "workspace_"
    • Login - your username to GIT repository
    • Password - your password associated with your username.





      In next step you select domain you would like to import. Then continue same way as using Domain Backup - Loading XML Backup


Syntax highlighting

As expected from an IDE, syntax highlighting for many languages in the BellaDati IDE makes your direct editing even easier.

The BellaDati IDE currently provides:

  • Basic syntax colorization for a variety of programming, scripting and markup languages such as Groovy, Javascript, jQuery, Batch, Python, CSS, HTML, LESS
  • Autocompletion and validation support (displaying errors and warnings, providing smart completions, formatting, and outlining) for some languages. For example: JavaScript, CSS, LESS, JSON, and HTML.

Themes

All the themes the IDE supports for syntax highlighting are applied to the IDE’s code editor. You can pick a theme from the settings window on the left panel. Currently there are two themes available: Erlang dark and Eclipse.


Code Finder

The code finder allows you to quickly open scripts by searching for fragments of the script or it's name. The file finder is launched using the "lens" icon located on the left side.


Autosaving changes

Useful feature which automatically persists the changes made to the code when leaving the code editor. These changes are not saved to the database. Changed code is marked with * symbol. 


Preview changes

You can use the IDE to preview changes right in the browser. Depending on the type of the code snippet, preview button either opens popup and renders the associated object (e.g. report view, custom content), or opens new tab with previewing the changes (e.g. custom HTML, extension, custom REST endpoint etc.)

  • No labels