Breadcrumb Navigation

Hi all,

I’m looking for the best way to implement a breadcrumb navigational object within Ignition.

The most obvious to me seems simple enough and would involve concatenating a bunch of strings together with navigation page separators (e.g. ‘>’), all formatted using HTML styles, and having each navigation page clickable using inline HTML formatting.

E.g.
Home > Fermentation > Tank Details

Using this approach however, I would need to incorporate functions into the HTML string to provide inline clickable links to navigate to other windows. Is this possible in Ignition?
Otherwise, another solution might be to have a number of button objects overlayed on top of each navigation page text, but these buttons would need to dynamically size and position themselves over each bit of text, which is easier said than done… this would involve calculating the width of each page text string in pixels and then moving and resizing accordingly. I’m not sure how to do this though, as it would need to be calculated per font, per font size, per letter.

Maybe I’m over-complicating the matter…

Any help would be appreciated!

Cheers,

Nick

Hmmm. Sounds like a good idea. A good idea for a custom module…

1 Like

I would think this would be possible using a Template and Template repeater. If your window structure is already hierarchical you could split the path based upon the current window client tag and build the breadcrumb template using the resulting paths.

If I get some time this week I’ll try to take a stab at it.

Nick,

I’ve attached a project implementing this using a template canvas. I couldn’t use the template repeater as then you would end up with unsightly gaps between the words.

Having done this, I would say that sizing etc. is rather manual. You have to create a custom dataset for the template canvas on every page you use it. This works, but I would be tempted to make a template for an entry and then place as many of them you need manually on each page. That approach at least lets you drag their positioning graphically. An alternative would be to write a function that creates the canvas dataset when you open the window, freeing you up from calculating sizes and positioning manually.

Ryan, I don’t think you can parse the path, as you wouldn’t really want folder names in the path, only a hierarchy of windows.
DataCapture_breadcrumb.proj (32.4 KB)

Hi all,

Thanks for the replies. It seems odd that a component hasn’t been developed for this already. I actually got the idea from the latest video in the Design Like a Pro series ‘Building Better HMI Navigation Schemes’ where they talked about using them.

I see that there is an idea posted for this a while ago that was planned to be implemented in v7.8, I don’t think it made it though as its status is still ‘Planned’.
I’d rather not have to mess around with using a template canvas and customise it on each page :/

Hi AlThePal, firstly I can tell you than sorry for my english, I’m from Colombia and I’m fan of Ignition, actually I’m making a Ignition project and I would like to can implement the breadcrumb navigation inside it. I found out this forum and I can see than you attached a project implementing this using a template canvas, I trayed to download but a couldn’t, can you send it to me to ma email? jorge85gonzalez@gmail.com

best regard and thank you so much.

Jorge G

Hi Jorge,

I couldn’t find a copy of the original project, but I created another one using a slightly different approach. This one uses a DataSet tag to hold the current position in the ‘tree’. You can create the tag using a button on the Main window. Normally this would be a Client tag but you can only create SQLTags in code.

I implemented the breadcrumbs using 2 different methods: a template repeater and a more ‘manual’ approach. The template repeater works but I think it flickers too much when it updates.

Let me know if you have any questions.

DataCapture_breadcrumbs.proj (54.9 KB)

1 Like

You just have to remove the loading panel from the template repeater, then, not flickering.