Skip to content

Working with Include macro

A very common problem is to have similar functionality spread among many views, or among many elements in a view. Consider you have created a symbol element, with an interactive svg as picture. The complex value object matches the variables used in the svg. The onchange code uses many variables as well. This symbol is spread across your project. An update of this is tedious and results in errors. Instead, the event code and the attribute values could be defined in include files, next to the svg file, to only have references from all the symbol elements. If updates in the svg needs more values, they are added in the include file and changes takes affect immediately across project. Especially when a function should be shared and available between many views, there are a couple of different ways of solutions. This chapter uses the %include(file, args)%.

Syntax

Syntax
%include(file, arg1, arg2, arg3)%
The include macro is a text replacement macro. It reads contents of file file, and replaces any occurrances of %argN% where N is a number between 1 and n with the value provided in include macro function. The number N is a reference to argument position in include macro. Macros and arguments provided to the view with the include statement is resolved in the included file as well.

Setup

  • In your project, create a new area called SharedCode.
  • Grab a cup of coffee and make sure that you can work uninterrupted for the next 10 minutes.

Use Case

There are a lot of conference rooms in a building. Each of the views for the rooms should have a similar title. Instead of defining the title in each view, the format and display of the title can be defined in the include file, and that include file is referred from all views. In this way, if the title should be altered, it can be altered for all views at the same time.

Prepare the include file

  • In the Shared: folder, create a folder called include. In that folder, create the file roomtitle.include.
  • Open the file in your best text editor (maybe vs code), and enter following text in the file: RoomName: %RoomName%, Title: %arg1%, Size: %arg2%.

Prepare the view (s)

  • In SharedCode, open up Folder views tool.
  • Remove all widgets and all link icons. Create tree new LinkIcon with name Room and select Create new view file... in file attribute. (Ensure the feature is view).
  • Set the Show title attribute to Yes.
  • Open up the view using view designer.

Tip

Right click on the file attribute to fast-open the view instead of using "Design..." list menu item.

  • Create an Argument element. Name it RoomName.
  • Save the view file.
  • Go back to folder views tool, click Refresh arguments on the file, and set the argument RoomName to The small room.
  • In view file, create a Text Element with name RoomTitle.
  • In RoomTitle, set the value to %include("Shared:include/roomtitle.include",RoomTitle,6 seats)%.
  • Save all files.

See the result

View the file in the browser. The value of the text element should display RoomName: The small room, Title: RoomTitle, Size: 6 seats This is very handy when the views differ in layout, but contains the same functionality. Combine it with ViewContainers and serverside functions to split functionality from layout.

Tip

If many elements share the same expression in an attribute, or as soon as you find yourself repeating attribute values, consider using %include macro to simplify your programming. The macro can be used in code snippets, in attribute expressions, as a raw value, as event code, in the value attribute for complex values and so on. Happy Hacking!

Tip

The macro can also be used to migrate old Global code. You can include your most common functions in the view in OnOpen, and define the functions in a global.js file in Shared:scripts. Remember that it is an include file. it is included each time and therefore it is not possible to use global variables and so. Use SSF and context.state.get/set to get/set state and global values instead.