Tab Navigation with dynamic pages

[Jonas]

I created two pages. An overview page and a room detail page, where the structure is always the same, but the content is dynamic.

I used a tab navigation on both pages. The code of the navigation integrated on the overview page:

<md-tabs md-dynamic-height md-border-bottom md-swipe-content>
    <md-tab label="Overview" ui-sref="ui.ztEzrOff02DB"></md-tab>
    <md-tab label="Room 1" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0010_ER002'}"></md-tab>
    <md-tab label="Room 2" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0020_ER003'}"></md-tab>
    <md-tab label="Room 3" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0030_ER003'}"></md-tab>
    <md-tab label="Room 7" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0070_ER002'}"></md-tab>
</md-tabs>

Navigation code on the detail page to retrieve the values of the individual rooms:

<md-tabs md-dynamic-height md-border-bottom md-swipe-content>
    <md-tab label="Übersicht" ui-sref="ui.ztEzrOff02DB"></md-tab>
    <md-tab label="Room 1" ng-click="designer.parameters = {Raumnr: 'ZT02O0010_ER003'}"></md-tab>
    <md-tab label="Room 2" ng-click="designer.parameters = {Raumnr: 'ZT02O0020_ER003'}"></md-tab>
    <md-tab label="Room 3" ng-click="designer.parameters = {Raumnr: 'ZT02O0030_ER003'}"></md-tab>
    <md-tab label="Room 7" ng-click="designer.parameters = {Raumnr: 'ZT02O0070_ER002'}"></md-tab>
</md-tabs>

I have used the following guide to navigate directly to individual rooms via the link: https://help.infiniteautomation.com/linking-to-dynamic-pages

The direct navigation from the overview page to e.g. room 7 works fine, but room 7 on the detail page is then not active (underlined) in the navigation. Is there a solution for that?

Here is a screenshot of the navigation:

Thanks for your help!

[CraigWeb]

Hi @Jonas

I think you will need to add md-selected="selectedTab" to your <md-tabs> then change the variable selectedTabs to the appropriate integer when clicking on the tab.
https://material.angularjs.org/latest/api/directive/mdTabs

[Jonas]

@CraigWeb Thank you for your quick answer! I can't make it work. Maybe you can apply it directly to my code example? That would help me a lot!

[Jared Wiltshire]

@Jonas I'm not following exactly how many pages you have and how they link together.

Craig is saying your ng-click should have something like ng-click="designer.parameters = {Raumnr: 'ZT02O0010_ER003'}; selectedTab = 1"

[Jonas]

@jared-wiltshire That works if I use and click within the rooms tab-navigation but not if I click from the overview page navigation to a certain room e.g. room 7. It activates room7 but there is always the first tab underlined and it doesn't switch to the room 7 tab.

And this doesn't work:

<md-tab label="Room 7" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0070_ER002'}" ng-click="selectedTab = 7"></md-tab>

[CraigWeb]

Hi Jonas
I don't actually understand how your pages work, not sure if you have purposely left out some code?
I's you page contence outside of the <md-tabs>? and the tabs just being used to display the rooms?

Did you add md-selected="selectedTab" to you details page ?

[ThomasEinasto]

I think @Jonas is having trouble that if user navigates to some other page besides the tabbed page then variable "selectedtab" is lost because it is only available at that current scope. i.e @Jonas wants to navigate from other page to this tabbed page with automatically specific tab opened, taken into account where user navigated from.

I have solved this easily by using a virtual datapoint in mango to keep the variable "remembered" even if user goes away from that page.

Logic:

Create a virtual datapoint

Bring this point to your pages

Set it to specific number before navigating i.e ng-click = virtualpoint.set(7). Then use @CraigWeb suggestion md-selected="virtualpoint.value" so that page automatically opens the virtual point value tab.

[Jared Wiltshire]

OK so from what I understand you are transitioning to a new state (ui.ztEzrOff02) and need to set the selected tab based on the state parameters (e.g. if Raumnr is ZT02O0070_ER002 then set current tab to tab 2).

I would put a little chunk like this at the start of the page -

<div style="display: none" ng-init="roomsToTabs = {'ZT02O0070_ER001': 1, 'ZT02O0070_ER002': 2}; page = {selectedTab: roomsToTabs[$state.params.Raumnr]}"></div>

<md-tabs md-selected="page.selectedTab">
<!-- etc -->
</md-tabs>

Alternatively you can get trickier and do this -

<div style="display: none" ng-init="page = {selectedTab: Math.floor($state.params.Raumnr.substr(-3))}"></div>

<md-tabs md-selected="page.selectedTab">
<!-- etc -->
</md-tabs>

Which is basically stripping the last 3 characters (002) and parsing them as an integer. You could add 1 etc if you need to offset this.

[Jonas]

@jared-wiltshire This works. Thank you!!

For everyone who is interested in another solution: We figured out that putting everything in one page (overview and rooms content) and use ng-show does work as well. Its a bit messy with all the code though.

Thanks again for the fast and great support here!

[CraigWeb]

Glad you got it working!
I think in your case ng-if would be more appropriate.
https://riptutorial.com/angularjs/example/7754/ng-if-vs-ng-show

[Jonas]

@craigweb You are right! Thanks!