Understanding Navigation in

Eclypse Designer
And how to make any object into a page link
Navigation in Designer can be achieved in many ways. Before mastering the technique
we use at Climatec NY you should be aware of a few things. Firstly, Designer allows you
to create a data driven interactive front end to the systems we work with. The front end
is not a web page or a web site in the traditional sense. Designer creates a Web App. It’s
important to note this because a web app should not be expected to behave the same as
a standard web site. So for our work, we have a base frame that is the main web app, and
the pages we interact with are different pages being shown through a viewer inside of
that framework. The simplest method for navigation would be to simply create an action
that tells the framework to just cycle between different version of the framework itself.
Our needs are a little more complex so with that bit of introduction let’s explore exactly
how we move between pages in our Designer projects.

Page Include and How it Works

All of the “pages” we use in Designer are in a format called .dg5. Index.dg5 is the “framework”
mentioned above. All of our various pages are shown through this Index. The index is constant
and contains the top title bar and the left side navigation bar. The rest of the index page is made
up of a blank area called “Page Include”. As the name implies, this is an area that can display
another page inside of the page you are currently using. The left navigation bar is made up of
links that trigger the Page Include area to show other .dg5 files. That is the basic explanation of
how navigation works for our projects.

By simply telling the nav links to place the name of a .dg5 file into the Page Include URL area
you will get what you need and go to a new page. However, you will not be able to use the
browser buttons to maybe just go back to the last page you were at, that would send you back
to entirely different web location or not go back at all if your project index.dg5 was the first
page you visited upon opening the front end.

We need to fix this problem by coming up with a way to tell the front end to record each Page
Include we click to in a storage area in the browser so we can create a nav history that the
browser can interact with. We fixed this by making all navigation clicks be sent up to the Project

Page | 1
Dataflow of the entire project where it is stored using the Local Storage block and also using the
Hash function that all browsers utilize. Using this method for navigation adds another perk, we
can now trigger navigation anywhere we want, not just in the nav menu in the index. This is
because the Project Dataflow remains constant no matter what you are doing in the main user
area. The good news for you is that this will always be setup anytime you as a worker at a site
start using the front end. So all you have to do is understand the how the link works and then
you can create nav links anywhere you want.

Finding The Page Include Action Block

So, let’s examine the standard nav menu link so we can find the Dataflow block that is actually
doing the work for us.

While in Designer editor open index.dg5. Click on any of the nav menu links that should be
there already. Right click on it and choose Edit Symbol. You will get a warning telling you that if
you alter the symbol you will affect other pages. Just click OK. In your outline you will see 1 item
under the Stage, it will be called Test or maybe something else. Name doesn’t matter, it is just a
place for you to click, right click that item and go to its Dataflow. Depending on the version you
are using inside of the Dataflow will be a few blocks. The one that directs the page nav should
be called PageInclude Trigger. If it happened to not be named, simply look for the block that
has “@lib.localStorage.value” in its “path 0” field. @lib.localStorage.value is the storage block
that lives in the Project Dataflow.

So this PageInclude Trigger block is all you need to make anything you click to take you to a
new page. As long as you have a changestate block like this and in the “path 0” field you have

Page | 2
@lib.localStorage.value then in the “change 0” field you just type the name of the .dg5 file you
want it to take you to and leave off the .dg5, only the name. And capitalization matters.

So this menu link is stylized so it is a symbol and I put the place to enter the page name without
the .dg5 in the symbol properties. If you want to put a text block on a page you made and want
it to take you to another page you just go to the Dataflow of the text block and paste that
PageInclude Trigger block and type the name of the page you want to go to in the “change 0”
field.

Page | 3
Using Templates
So what if you want to trigger a template? Well first, the template .dg5 needs to be created
correctly. At the basic level the template should have a string value block on it’s stage that has
the points folder path of the device that has the points you are using, and if there is more than
one device on that page you will need to make a string value block for each device. This is not a
guide on how to make a template so I will assume you know that those point folder paths get
connected to device template path on the data widgets you are using on the page. This is so all
you have to do to navigate to all the different devices using this template and all that has to
change is the point folder path.

In order for that to be something that can be triggered from a click on a page or nav menu you
just have to link the string value field in the string value block to the properties of the page.

Page properties are the same a symbol properties only they get attached to the page, and they
appear the same in your properties tab only they only are visible when you are looking at the
dg5 as a page include on another page.

Go to Modify/Edit Properties on the top menu and you will get a popup that looks just like the
symbol properties page. Create a string value for each string block you have in your page stage
and then bind that value field to the value field in your dataflow block. If you are altering an
existing template, you will just be reusing that properties that are already there.

The nav menu links already have field for device path, or device point path, depends on how
your template is setup. Because that field is there, you guessed it, if you want to add template
function to a text block on a page then you do the same procedure but instead of just copying
the PageInclude Trigger you also copy the DevicePath Trigger. This block is already setup to
send the device path up to the block in the Project Dataflow that will send the device path to
the page include properties of the page you now have open in the index.dg5.

Page | 4
Adding More Template Parameters
(Advanced)
Say you have a template, and it requires two different device paths? Complete the page and
make sure to set it up as you just learned above. You will of course be adding a second string
value block in the stage and adding another string value into the page properties which is
bound to the stage dataflow string.

You would now setup your link object the way you just learned using one device. To now add
the second device you first go to project dataflow and add a new string value block and name it
second device or a more detailed device name if this is only going to be used for one template.
Leave project dataflow open. Select the object you are using as your page link and go to the
properties tab and select “Actions” tab. You will already see some actions setup, those are they
blocks you added before, they are created here if you didn’t just copy and paste them.

Page | 5
Click the Plus button at the top and select “Set State”. Scroll down to the bottom and you will
see your new “State Action” where the “Command” area should show “Not Set”. Use the pull
down menu and choose onClick. Next, copy the device path for your second device and be
ready to paste it. Next to the Invoke button if you hover you will see a Record button. Press it,
notice the Checkbox and X Box that appear at the top of the edit window, and then paste the
second device path into that new block you made in the Project Dataflow. After you paste it in
the field, press Enter, and then click the Check Box. You should see the device path you pasted
disappear in the field. Save that dg5 so the action is saved.

Page | 6
Close the dg5 for the template and open the index dg5, while you have index open in your
editor go to the URL area of your browser and you should see that the url ends with
proj=”Project Name”. Add a hashtag and then the name of the template you are working with
do not add the .dg5.

You should see that template open in your Page Include area in the index. Go to your outline
and drill down to Stage/Content/Main Page and select Page Include. You Should URL area
populated by the page name but the two device path fields will either be blank or have the
wrong device. The one you added most likely will be blank. Now go to the block you created in
the Project Dataflow and bind its value field to the device path field for the second device in

Page | 7
your page include properties in your index. Save the index and then test the object link you
created. It should open the template and the device paths should be bound.

Page | 8