• Recent
    • Tags
    • Popular
    • Register
    • Login

    Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

    Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website Mango 5 Documentation Website

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

    Scheduled Pinned Locked Moved Dashboard Designer & Custom AngularJS Pages
    16 Posts 2 Posters 4.6k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Jared WiltshireJ Offline
      Jared Wiltshire
      last edited by 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.

      Developer at Radix IoT

      1 Reply Last reply Reply Quote 0
      • A Offline
        atkins.chrisw
        last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • Jared WiltshireJ Offline
          Jared Wiltshire
          last edited by

          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.

          Developer at Radix IoT

          A 1 Reply Last reply Reply Quote 0
          • A Offline
            atkins.chrisw @Jared Wiltshire
            last edited by

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

            1 Reply Last reply Reply Quote 0
            • Jared WiltshireJ Offline
              Jared Wiltshire
              last edited by

              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>
              

              Developer at Radix IoT

              1 Reply Last reply Reply Quote 0
              • A Offline
                atkins.chrisw
                last edited by

                I did that and it is leaving spaces in the menu for the pages. 0_1470252446767_upload-2eb31465-1747-41c3-8a6f-f96bdd89eb7f

                1 Reply Last reply Reply Quote 0
                • Jared WiltshireJ Offline
                  Jared Wiltshire
                  last edited by

                  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.

                  Developer at Radix IoT

                  1 Reply Last reply Reply Quote 0
                  • Jared WiltshireJ Offline
                    Jared Wiltshire
                    last edited by

                    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.

                    Developer at Radix IoT

                    1 Reply Last reply Reply Quote 0
                    • A Offline
                      atkins.chrisw
                      last edited by

                      Great. Thanks

                      1 Reply Last reply Reply Quote 0
                      • A Offline
                        atkins.chrisw
                        last edited by

                        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?

                        1 Reply Last reply Reply Quote 0
                        • Jared WiltshireJ Offline
                          Jared Wiltshire
                          last edited by

                          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>
                          

                          Developer at Radix IoT

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post