This tutorial will demonstrate how to use a variable in a page in order to reuse that page in different contexts. For a general description of visualization variables refer to in this article.

Lets assume we have a room page that shows a datapoint specifically for a given room. We have a number of similar rooms, so we would like to reuse that room page and only change the room number to access the data points of the respective room.

• full room number: is composed as <FloorNo><RoomNo>
• ItemID of the room temperature: NETx\XIO\KNX\NETx KNX IP Router Room <FloorNo><RoomNo>/<FloorNo>/1/<RoomNo>0
  
• ItemID of the room temperature setpoint: NETx\XIO\KNX\NETx KNX IP Router Room <FloorNo><RoomNo>/<FloorNo>/1/<RoomNo>1
  

We will create two pages, a Floor page and a Room page. The Floor page contains a floor plan and a link for each room. Each link will go to the Room page and pass the floor number and the room number to the page. That is, the Room page is parametrized by FloorNo and RoomNo.

Room page

1. Create a new visualization page and name it Room.
2. Create a button for navigation to the previous page. This will allow us to switch back to the calling page which will be the Floor page in our case.
   
   
3. Go to the Variables pane and add the page variables FloorNo and RoomNo.
   
   
4. For a page caption with the room number create a label (function: text) that shows the full room number. You can either 
   • type in the variable expression or 
   • use the clipboard: select the variable to be inserted in the Variables pane and click the Copy VarLink button or hit Ctrl-C. In the Text field of the label hit Ctrl-V to insert the variable.
     
     
     
5. For the current room temperature, with a label (function: indicator) and pick the room temperature item for room 101.
   

6. Now lets replace the parts of the ItemID that refer to a floor number or a room number, so that the ItemID is

   • NETx\XIO\KNX\NETx KNX IP Router Room {PG:FloorNo}{PG:RoomNo}\{PG:FloorNo}/1/{PG:RoomNo}0
     

7. On the Appearance tab set the Text format to display the value like "Temperature: 23.5 °C"
   
   

8. For the setpoint temperture proceed analog to the current room temperature:
   • Create a label (function: indicator) and pick the setpoint of room 101.
   • Replace ItemID parts that relate to floor number or room number accordingly.
   • Set the text format to "Setpoint: {0:0.0} °C"

At this point the room page is ready. However, since the page variables are not set before the page is called by a visualization control we cannot test the page at this time.

Floor page

Next we will create the floor page and set up the links to the room page with the corresponding values for the page's varaibles:

1. Create a new page named Floor and place the floor plan.
2. Create a link for room 101.
   • Function: Goto page Room
   • set page variables for FloorNo (1) and RoomNo (10)
     
3. Switch the project to run-mode to test the link.
   
   
   
   
4. Add further links and set the variables of the Room page accordingly.