Code Snippets Support for the HTML Editor

Code snippets are also available in the HTML editor available on forms and user journeys, via the Monaco Editor. To use these code snippets on the data form or digital journey, go to the Code section, Template tab. From the HTML editor toolbar, click Tools and select Source code. The Source code page will be displayed using the Monaco Editor.

Pressing the CTRL+Space keys opens 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}