Code Snippets Support

Code snippets are small sequences of reusable code that can be inserted using a combination of shortcut keys. They are very useful as they make it easier to remember specific formatting of functions and avoid spending time on typos and syntax errors.

Code snippets are an aid of type IntelliSense/auto-complete and most of the times they are incomplete and / or syntactically incorrect and require further processing thereof.

Code snippets support is available via the Monaco Intelisense for text boxes and controls of type JavaScript. and for the HTML editor.

NOTE  
Backward compatibility is not necessary, so the snippets, their name, their content and the way they are organized in drop-downs may change from one FintechOS Studio release to another without prior notice.

Code snippets are also available in the HTML editor available on forms and user journeys, via the Monaco Editor.

In order to use these code snippets on the data form or digital journey, follow the steps below:

1. Go to the Code section, Template tab.

2. From the HTML editor toolbar, click Tools and select Source code. The Source code page displays using the Monaco Editor.

3. Press the CTRL+Space keys to open a drop-down which contains not only entries corresponding to certain code snippets, but also attributes and relations belonging to the entity.

Code Snippets Placeholders

The code snippets might contain hint words, known as placeholders which can be easily selected and changed. The placeholders are highlighted with a background color.

Navigating placeholders

Upon snippet insertion, the cursor will be placed on the first placeholder (if any). If no placeholder is available, the cursor will go to the end of the snippet.

To navigate from one placeholder to another, press the TAB key or SHIFT+TAB.

Pressing TAB when the cursor is over the last placeholder will move the cursor at the end of the snippet.

Replacing placeholders

There might be placeholders without underlying text, visible due to a narrow gray line on that position.

When the cursor is over a placeholder, starting to type will remove the placeholder text.

IMPORTANT!  
Replace all placeholders, otherwise errors might occur as the code snippet syntax might be broken or the syntax remains unbroken but it is logically incorrect.

The presence of one or more cursors indicate that those placeholders will be filled in simultaneously with the same text. Additionally, such group of placeholders might have identical texts beneath.

Make sure to replace the placeholders and click OK to save the source code changes.

Deactivating placeholders

When the cursor falls outside the snippet, the placeholders will be deactivated and any text which has not been replaced will remain in the snippet.

When the placeholders are deactivated:

  • They are no longer highlighted with a background color.
  • Navigating from one placeholder to another is no longer possible using TAB and SHIFT+TAB.
  • Typing when cursor is on top of the placeholders will not remove the placeholder text.

Series of placeholders

Some snippets may have for some fields’ series of placeholders in a row, like: true false

To eliminate the unwanted variants and keep the desired one, navigate placeholders using TAB or SHIFT+TAB and when on top of the placeholder that you want to eliminate, press the delete key.

Nested code snippets

Snippets might be nested, meaning that in a placeholder you can insert another snippet, without deactivating the placeholders of the first snippet.

Examples of code snippets

Pressing CTRL+Space and selecting attribute rows by 2 from the drop-down will insert the following code snippet:
Copy
<div class="row">
   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" >
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 data form-label"></div>
           <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"></div>
        </div>
   </div>
   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" >
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 data form-label"></div>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"></div>
        </div>
   </div>
  </div>
Pressing CTRL+Space and selecting < = ““></> from the drop-down will insert the following code snippet:
Copy
<tag = “ “>text</tag>
NOTE  In cases like the previous example, two or more placeholders might be written simultaneously, more than one cursor being available.

Examples of code snippets for attributes and relations.

  • Pressing CTRL+Space and selecting {#relView#} ebs_AAA_Ent_8966_businessunit will insert {#ebs_AAA_Ent_8966_businessunit#}
  • Pressing CTRL+Space and selecting {attrLabel|attribute} businessunitid will insert {businessunitid|attribute}
  • Pressing CTRL+Space and selecting {attrName} businessunitid will insert {businessunitid}
  • Pressing CTRL+Space and selecting {relName|entities} ebs_AAA_Ent_8966_businessunit will insert {ebs_AAA_Ent_8966_businessunit|entities}

Using Monaco IntelliSense available via the Monaco Editor, the platform provides two mechanisms for using code snippets in Java Script text boxes, as follows:

  • $s. - displays code snippets
  • $m. - displays code snippets for entities and attributes.

The sections below describe how to use the two mechanisms.

Code Snippets

Writing $s. opens a drop-down list which offers the possibility to choose a snippet name or another. There might be one or more entries in the list which are not snippets but group names in which case typing a dot after them will open new drop-down menu.

The snippets can be organized in menus or drop-downs on multiple levels in structures like hierarchies.

A snippet name together with its selection path may look like:

Copy 
$s.ebs.functions.callAction

Placing the cursor right at the end of the snippet path/name (full name) and pressing the TAB key, the system will replace the string with:

Copy 
ebs.callAction( actionId, { id:ebs.getCurrentEntityId() }, function( e ) { function body; });
NOTE   If you do not place the cursor at end of the snippet path / name (full name) before pressing the TAB key, the snippet name will be breaking syntax.

In the example provided above, “ebs.“ is inserted in front of the function to reduce further typing.

Code Snippets Placeholders

The code snippets might contain hint words, known as placeholders which can be easily selected and changed. The placeholders are highlighted with a background color.

In the example provided above, the ebs.callAction function snippet, “actionId” and “function body“, although not visible in the text above, might be placeholders.

Navigating placeholders

Upon snippet insertion, the cursor will be placed on the first placeholder (if any). If no placeholder is available, the cursor will go to the end of the snippet.

To navigate from one placeholder to another, press the TAB key or SHIFT+TAB.

Pressing TAB when the cursor is over the last placeholder will move the cursor at the end of the snippet.

Replacing placeholders

There might be placeholders without underlying text, visible due to a narrow gray line on that position.

When the cursor is over a placeholder, starting to type will remove the placeholder text.

IMPORTANT!  Replace all placeholders, otherwise, errors might occur as the code snippet syntax might be broken or the syntax remains unbroken but it is logically incorrect.

The presence of one or more cursors indicate that those placeholders will be filled in simultaneously with the same text. Additionally, such group of placeholders might have identical texts beneath.

Make sure to replace the placeholders and click OK to save the source code changes.

Deactivating placeholders

When the cursor falls outside the snippet, the placeholders will be deactivated and any text which has not been replaced will remain in the snippet.

When the placeholders are deactivated:

  • They are no longer highlighted with a background color
  • Navigating from one placeholder to another is no longer possible using TAB and SHIFT+TAB.
  • Typing when cursor is on top of the placeholders will not remove the placeholder text.

Series of placeholders

Some snippets may have for some fields’ series of placeholders in a row, like: left inner right

To eliminate the unwanted variants and keep the desired one, navigate placeholders using TAB or SHIFT+TAB and when on top of the placeholder that you want to eliminate, press the delete key.

Nested code snippets

Snippets might be nested, meaning that in a placeholder you can insert another snippet, without deactivating the placeholders of the first snippet.

Code snippets for entities and attributes

The $m mechanism has been introduced to enable FintechOS Platform engineers to easily select entities and attributes names, transforming them in strings if necessary.

Writing $m. opens a drop-down list containing existing entities. Selecting an entity and typing a dot opens a new drop-down containing the attributes of that entity. Pressing TAB after the inserted entity or attribute transforms the expression into a string which contains only the name of the entity or attribute depending on the selection(s) made from drop-down(s).

If selecting the current entity from the drop-down, data extensions (if any will also be displayed) in the drop-down list.

  • Pressing TAB after $m.Account.Accountid transforms the expression into "Accountid"
  • Pressing TAB after $m.Account transforms the expression into "Account"
To eliminate the quotes around the string, press TAB a second time .
NOTE  If there is a dot before “$m.” (.$m.), the expression is not transformed into a string, keeping the selected name.
Pressing TAB after .$m.Account.Accountid transforms the expression into .Accountid