Context Menu

The context menu is a very useful and an important part of the editor GUI. It can easily be accessed in the editor when you are in edit mode. The context menu contains most functions for interacting with the editor. This chapter will describe the menu and its capabilities in more depth.

To open the menu, simply place the cursor somewhere in the code editor and right-click. The menu allows you to easily access your datasets, insert color codes (HEX) as well as some useful HTML- and FreeMarker tags. You also have the possibility to easily preview your layout as well as copy, paste and save your work. Each section will be described in more detail on this page.

When creating new layouts you can easily preview your work from the context menu. The preview will render your code using the data from your datasets and selected base record (if applicable) and display the PDF in a pop-up directly in your browser. This is an efficient way to constantly check your changes and make sure that you are on the right path on creating what you want.

1. In the editor, right-click anywhere to access the context menu.

2. Navigate to Preview and do one of the following:

   1. If you have already defined a test record in the field Record ID (Base Record) you can click on Preview right away.

   2. Otherwise, select any record from the list to use when testing your report and click on Save Settings and Preview.

Please note that you can do the same kind of preview using the buttons displayed in the top and bottom of the editor record.

The Layouts editor includes a rich library of predefined HTML- and FreeMarker tags that can be easily inserted in your code in the editor.

1. In the editor, place the cursor on the line where you want to insert your tag.

2. Right-click to open up the context menu and navigate to the Standard Tags section.

3. The Standard Tags library will list all available standard tags together with a short, descriptive text.

4. Double-click on the tag you want to insert and it will automatically be added to your layout.

The standard tags library is not an exhaustive list of available and supported HTML- and FreeMarker tags but has been added to assist you as a user with some of the more commonly used tags.

Visit the BFO HTML Manual to find more useful HTML elements (tags) and attributes.

Components is what we call all the different datasets that you have added to your layout. If you have defined for example a base record or added a saved search, you can easily access all those fields from here.

1. In the editor, place the cursor on the line where you want to insert your tag.

2. Right-click to open the context menu and navigate to the Components section.

3. Find the name of the dataset from which you want to add your tag and click on its name (blue background-color).

4. If you know the id of the field you can search for it right away in the search field. Otherwise you can scroll through the fields to find the field you are looking for.

5. Double-click on the field you want to add and its FreeMarker tag will be automatically inserted in the code editor where you placed the cursor in step 1.

Read more about the different dataset types and how to add them to your layout in the Add Data chapter.

If you want to see what data your datasets includes you can choose to visualize the data. All the data fields that are displayed using this feature can be dynamically printed in your layout when creating the PDF.

To be able to to do this you must have defined a base record for your layout (read more on Record and Search Data page) and chosen a record in the Record ID (Base Record) field.

1. Set the Record ID (Base Record) field displayed right above the code editor.

2. Righ-click somewhere in the code editor and click on the Vizualize Data.

3. A pop-up window will show displaying all the data including field IDs and values that are accessible and can be printed in your layout.

4. Use the +/- to open and close each section.

5. For datasets that can contain more than one object (for example saved searches with multiple rows) each result can be accessed by their index (0, 1, 2 etc.)

Since we use the id and not the field name when constructing and inserting the FreeMarker tags in your layout it can sometimes be difficult to find the correct field. The option to vizualise the data makes this process much easier and you will quickly be able to identify the field(s) you are looking for.

When creating your new layout it is common that you want to add different colors to for example text, as background-color in tables or colored headers and footers. In the context menu you can easily access a tool to find and insert the HEX color code for any color.

1. In the editor, place the cursor where you want to insert the color code.

2. Right-click to open the context menu and navigate to the Colors section.

3. The pop-up shown to the left will open up.

4. Use the sliders to switch between the different hues and luminosities to find the color you are looking for.

5. The HEX color code for the color will automatically be calculated in the HEX field and also be added to the editor.

6. To switch between HEX and RGB mode, use the arrow symbol ( ↔ ).

7. If you want to save the color code to your color palette click on the plus symbol ( + ).

8. If you want to insert a previously saved color from your color palette, click on the color in the lower left corner.

9. The pop-up will automatically close if click somewhere outside the pop-up or when clicking on one of the preconfigured colors.

Visit the BFO HTML Manual to find more information on how to use colors in your layouts.