• Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular

    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

    How to do custom dashboards now?

    Dashboard Designer & Custom AngularJS Pages
    3
    11
    1755
    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.
    • leandro
      leandro last edited by

      Hi,

      I am running latest version of Mango (3.4.4) and my custom dashboards are not working anymore.

      I see that the web folder for the mangoUI module has changed substantially and that's why I can't use the overrides folder anymore in my app.

      How can I make it work again?

      Regards. Leandro

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

        @leandro What files do you have overridden? For what purpose? I will try and get you back up and running again.

        You are correct that the file structure has changed, this is why your overrides aren't working. Instead of loading all the individual files over HTTP we now pack them up into a couple of large bundle files using webpack.

        Developer at Radix IoT

        1 Reply Last reply Reply Quote 0
        • leandro
          leandro last edited by leandro

          I took what used to be the admin template and have been building on top of that.

          So my files are here:
          /mango/overrides/web/modules/mangoUI/web/myProject

          And changed all appropiate lines, i.e.:
          <script>require(['mangoUIModule/myProject/app']);</script>

          Then I have built directives and components on top of that, using requireJS and AngularJS modules. Basically following the spirit of the admin template but more complex.

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

            @leandro ok so you don't actually have any files that are overriden per say. They are your own files in the overrides directory. I'm working on getting a copy of the old adminTemplate ported over to the new environment so I can show you how to get it working. It looks like I might have to do a UI module release, something is broken.

            Developer at Radix IoT

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

              @leandro I just released a new UI module to deal with a bug loading ngMango.js by itself (caused by a bug in our build system - Webpack).

              Here's a link to an updated admin template -
              https://drive.google.com/file/d/1k1M3JMl49624yeVCV9C7xEYEbfpBrf8Z/view?usp=sharing

              Changes, so you can just make them to your app -

              • Remove the links for vendor CSS files (they are loaded automatically)
              • Scripts to be loaded will look like this
                  <script src="/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js"></script>
                  <script src="/modules/mangoUI/web/mangoUi~ngMango.js"></script>
                  <script src="/modules/mangoUI/web/ngMango.js"></script>
                  <script src="app.js"></script>
              
              • Use require() instead of define() in app.js
              • Remove 'ngMango/ngMangoMaterial' from the require/define array (its loaded inside ngMango.js already)

              Hope that gets you up and running.

              Developer at Radix IoT

              1 Reply Last reply Reply Quote 0
              • leandro
                leandro last edited by

                @Jared-Wiltshire Thanks! I have tried using the provided admin template and I get app.js:6 Uncaught ReferenceError: require is not defined.

                Then I tried downloading the mangoUI module from github (version 3.4.5 as of yesterday) but I still get errors. Maybe it is not as simple as replacing the mangoUI folder?

                Jared Wiltshire 1 Reply Last reply Reply Quote 0
                • Jared Wiltshire
                  Jared Wiltshire @leandro last edited by

                  @leandro you should be downloading the module from the store, not from Github. If you download from Github it will not be compiled. You can download v3.4.5 from the modules page inside of Mango.

                  Developer at Radix IoT

                  1 Reply Last reply Reply Quote 0
                  • leandro
                    leandro last edited by

                    Thanks for your tips. It worked like a charm!

                    Jared Wiltshire 1 Reply Last reply Reply Quote 0
                    • Jared Wiltshire
                      Jared Wiltshire @leandro last edited by

                      @leandro said in How to do custom dashboards now?:

                      Thanks for your tips. It worked like a charm!

                      Great! Glad you got it all working again. Sorry for the hassle.

                      Developer at Radix IoT

                      1 Reply Last reply Reply Quote 0
                      • B
                        Balistar last edited by

                        Hi Jared,
                        Since the new UI Module, the vendor CSS files, that are suppose to be loaded automatically, are blocked from loading in my Custom Dashboard.

                        mangoUi~ngMango~ngMangoServices.js:39 Refused to load the stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".
                        

                        I believe I changed everything in my dashboard and is following your admin template.
                        Other than styling my dashboard works fine.

                        mangoUI 3.4.5
                        on Chrome 67

                        Jared Wiltshire 1 Reply Last reply Reply Quote 0
                        • Jared Wiltshire
                          Jared Wiltshire @Balistar last edited by

                          @balistar
                          https://forum.infiniteautomation.com/search?term=Content Security Policy&in=titlesposts

                          Developer at Radix IoT

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