Adding a third or fourth section to the admin template on the angular js

[atkins.chrisw]

Thanks. Does the current dashboard allow me to make a link in the cards so I can navigate to another page by clicking on the card?

[Jared Wiltshire]

Cards aren't really supposed to be clickable but you could definitely add a ng-click attribute that calls state.go().

The better way to do it is with a <a> or <md-button> with a ui-sref="stateName" attribute.

edit.. Sorry I misread your post. Yes you can create a link inside the cards.

[atkins.chrisw]

Thanks, I liked your first answer. I will see if I can figure out how to do that. Since I only have the 2 levels, I am wondering if I can click in the second level screen, and then to get more graphs or details, I can click one of the card to open a new window with more details.

[Jared Wiltshire]

You can add as many pages/states as you like containing graphs etc and link to them from anywhere.

One suggestion that I will make is to make the name of your sub-pages extend the page you are linking from like this dashboard.section1.page1.something so that the menu item for the parent stays selected when you navigate to the link.

[atkins.chrisw]

@Jared-Wiltshire Great. Do you have a small snippit of code that I would use to do that function?

[Jared Wiltshire]

OK, so I realised what I told you won't work, just add another state on the same level as your page1 called page1graph or something like that, so you have

children: [
            {
                state: 'dashboard.section1.page1',
                templateUrl: 'views/section1/page1.html', // html file to display
                url: '/page-1',
                menuText: 'Page 1',
                menuType: 'link'
            },
            {
                state: 'dashboard.section1.page1graph',
                templateUrl: 'views/section1/page1-graph.html', // html file to display
                url: '/graph'
            },

If you dont have menuText it will not show on the menu. To link to the graph from page 1, add a link like this

<a ui-sref="dashboard.section1.page1graph">Go to page</a>

[atkins.chrisw]

I did that and it is leaving spaces in the menu for the pages.

[Jared Wiltshire]

Turns out theres a small bug in the adminTemplate, edit the file adminTemplate/directives/menu/menuToggle.html and change the <menu-link> tag to <menu-link page="page" ng-if="page.menuType === 'link'"></menu-link>

Also you may want to add the menuText property back into to your state as it will be displayed in the tool bar. As long as the state doesn't have a menuType property it will not show up in the menu.

[Jared Wiltshire]

By the way I'll be working on the 3-level deep menu over the next few days and can probably post the relevant code up for you.

[atkins.chrisw]

Great. Thanks

[atkins.chrisw]

Hey Jared,
I have the following code:

                <a ui-sref="dashboard.section1.page1a"> </a>
                <img src="http://104.236.5.31:8080/modules/dashboards/web/slcc/images2/aab.png" ma-tr="Electrical Image" alt="test" height ="125px" width="175px" style= "float:left">
          
                
                <p style="font-family: serif; color:#ff8900; font-weight:bold; margin-left:185px;">DEMAND: <span style="color:#000000;"><ma-point-value point-xid="DP_355369"></ma-point-value></span><br><span style="color:#17cd17;">ENERGY: {{Math.round(mypoint.value *10)}} </span><span style="color:#000000;"><ma-point-value point-xid="DP_355369" point="mypoint"></ma-point-value></span>
                </p>

I'm trying to set it up so I can click on the image and it will link to a different page.

What have I missed?

[Jared Wiltshire]

Hey Chris,

Just so you know we are planning on releasing the next version of dashboards next Monday with deeper nested menus.

Regarding linking the image, you just need to move the closing </a> to after the <img> tag. So it becomes

<a ui-sref="dashboard.section1.page1a">
    <img src="http://104.236.5.31:8080/modules/dashboards/web/slcc/images2/aab.png" ma-tr="Electrical Image" alt="test" height ="125px" width="175px" style= "float:left">
</a>