@jared-wiltshire said in Custom dashboard failed to load adminTemplate.:

/user-ui/adminTemplate/

Okay, Thanks @Jared-Wiltshire

okey. for now I install mango so how should I used override folder and How to integrate custom theme? Do you have any videos or URL's so It would comfortable to understand and integrate it.

Thanks
Regards

Hi guys,

I have install mango 3.5.1 with angularjs app in my system, but it doesn't have any sample templates. and when I require(['mangoUIModule/adminTemplate/app']); with require(['mangoUIModule/myapp/app']); so giving this error

Error: Could not resolve 'ui.examples.templates.adminTemplate' from state 'ui.help.customDashboards.'

So In this case what should I do?

Thanks
Cheers.!

@Jared-Wiltshire We are using Mango 3.1.1 , can we use event table
in custom dashboard ?

Hi guys as example show event table in mango.
On click on data points it allows us to edit and see history of data point.
We want same functionality in our custom dashboard.
I have copied code as Below:-

<md-card>
    <md-toolbar class="md-whiteframe-1dp md-hue-3">
        <div class="md-toolbar-tools">
            <h2 flex>
                <span>Events Table</span>
            </h2>
            <div>
                <md-button class="md-raised md-primary md-hue-1" ng-init="eventType='*'" ng-class="{ 'active md-accent': eventType === '*' }" ng-click="eventType='*'">All
                </md-button>
                <md-button class="md-raised md-primary md-hue-1" ng-class="{ 'active md-accent': eventType === 'DATA_POINT' }" ng-click="eventType='DATA_POINT'">Data Point
                </md-button>
                <md-button class="md-raised md-primary md-hue-1" ng-class="{ 'active md-accent': eventType === 'DATA_SOURCE' }" ng-click="eventType='DATA_SOURCE'">
                    Data Source
                </md-button>
                <md-button class="md-raised md-primary md-hue-1" ng-class="{ 'active md-accent': eventType === 'SYSTEM' }" ng-click="eventType='SYSTEM'">System
                </md-button>
            </div>
        </div>
    </md-toolbar>

    <md-card-actions layout="row" layout-align="start center" layout-wrap>
        <md-input-container flex>
            <label>Alarm Level</label>
            <md-select ng-model="alarmLevel" ng-init="alarmLevel='*'">
                <md-option value="*">All <i class="fa fa-flag fa-lg alarm-flag ALL"></i></md-option>
                <md-option value="NONE">None <i class="fa fa-flag fa-lg alarm-flag NONE"></i></md-option>
                <md-option value="INFORMATION">Information <i class="fa fa-flag fa-lg alarm-flag INFORMATION"></i></md-option>
                <md-option value="IMPORTANT">Important <i class="fa fa-flag fa-lg alarm-flag IMPORTANT"></i></md-option>
                <md-option value="WARNING">Warning <i class="fa fa-flag fa-lg alarm-flag WARNING"></i></md-option>
                <md-option value="URGENT">{{ 'ui.app.urgent' | maTr }} <i class="fa fa-flag fa-lg alarm-flag URGENT"></i>
                </md-option>
                <md-option value="CRITICAL">Critical <i class="fa fa-flag fa-lg alarm-flag CRITICAL"></i></md-option>
                <md-option value="LIFE_SAFETY">Safety <i class="fa fa-flag fa-lg alarm-flag LIFE_SAFETY"></i></md-option>
            </md-select>
        </md-input-container>
        <md-input-container flex>
            <label>Active Status</label>
            <md-select ng-model="activeStatus" ng-init="activeStatus='*'">
                <md-option value="*">All</md-option>
                <md-option value="active">Active</md-option>
                <md-option value="noRtn">No Return</md-option>
                <md-option value="normal">Returned to Normal</md-option>
            </md-select>
        </md-input-container>
        <md-input-container flex>
            <label>Acknowledged</label>
            <md-select ng-model="acknowledged" ng-init="acknowledged='*'">
                <md-option value="*">All</md-option>
                <md-option value="true">True</md-option>
                <md-option value="false">False</md-option>
            </md-select>
        </md-input-container>
    </md-card-actions>

    <ma-events-table event-type="eventType" alarm-level="alarmLevel" acknowledged="acknowledged" event-id="eventId" active-status="activeStatus" limit="10" sort="'-alarmLevel'"></ma-events-table>
</md-card>

I can see event table
but on click of data point details ,I'm getting following error:-
angular.js?v=undefined:123 Error: Could not resolve 'ui.dataPointDetails' from state 'dashboard.eventdetails'
at Object.z.transitionTo (angular-ui-router.js?v=undefined:7)
at Object.z.go (angular-ui-router.js?v=undefined:7)
at angular-ui-router.js?v=undefined:7
at angular.js?v=undefined:161
at e (angular.js?v=undefined:48)
at angular.js?v=undefined:51
(anonymous) @ angular.js?v=undefined:123
(anonymous) @ angular.js?v=undefined:95
(anonymous) @ angular.js?v=undefined:161
e @ angular.js?v=undefined:48
(anonymous) @ angular.js?v=undefined:51
setTimeout (async)
k.defer @ angular.js?v=undefined:51
f @ angular.js?v=undefined:161
(anonymous) @ angular-ui-router.js?v=undefined:7
dispatch @ jquery.js?v=undefined:3
q.handle @ jquery.js?v=undefined:3
angular.js?v=undefined:123 Error: Could not resolve 'ui.dataPointDetails' from state 'dashboard.eventdetails'
at Object.z.transitionTo (angular-ui-router.js?v=undefined:7)
at Object.z.go (angular-ui-router.js?v=undefined:7)
at angular-ui-router.js?v=undefined:7
at angular.js?v=undefined:161
at e (angular.js?v=undefined:48)
at angular.js?v=undefined:51 "Possibly unhandled rejection: {}"

Thank you so much @Jared-Wiltshire

@jared-wiltshire

Yes,I want an average of all 3 points combined with running average calculated every x seconds.

I have line chart which contains multiple data-points-xid.
Here 3 data points have 3 values.
So,I want to show average of these data-points(pointxid1, pointxid2, pointxid2) with values(value1,value2,value3) in one chart.
Please Help me in this

<md-card-content>
            Title
            <br/>
            <ma-point-values point-xid=“pointxid1” values="value1" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true"></ma-point-values>
            <ma-point-values point-xid="pointxid2” values="value2” from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true"></ma-point-values>
            <ma-point-values point-xid="pointxid3” values=“value3” from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true"></ma-point-values>
            <ma-serial-chart options="{theme:'black'}" style="height: 200px; width: 100%" series-1-values="value1" series-1-title=“title1” series-1-type="line" series-1-color="#ff0000" series-2-values="value2” series-2-title=“title2” series-2-type="line" series-2-color="#00ff00" series-3-values="value3” series-3-title=“title3” series-3-type="line" series-3-color="#0000ff" legend="true" balloon="true"></ma-serial-chart>
        </md-card-content>

ok..Can we access datapoint values under app.js?
Because I am getting specific values of specific data points under pop-up but I am not able to get Chart or Graph related values under pop-up so what procedure I need to follow?

I Want to show graph in md-dialog but not able to access data-points in dialog

My code is following... >>-->>

mydialog.html —>

<md-dialog class="fullscreen-dialogss" aria-label="Full Screen Dialog Test">
  <div>
  <md-card>
    <md-card-content>
               <div><ma-point-values point-xid=“point_xid1” point="point1” values="point1" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true"></ma-point-values></div>
      <ma-serial-chart options="{theme:'black'}" style="height: 200px; width: 100%" series-1-values="point1" series-1-title="title1" series-1-type="line" series-1-color="#ff0000" legend="true" balloon="true"></ma-serial-chart>
    </md-card-content>
  </md-card>
   </div>
</md-dialog>

And app.js —>

$mdDialog.show({
                  scope:$rootScope,
                  preserveScope:false,
                  templateUrl: 'views/mydialog.html’,
                  targetEvent: ev,
                  clickOutsideToClose:false,
            })

Hello, Jared, I have tried your solutions but it's not working. I have attached index.html and my date picker code. Please let me know what I need to change.```
Index.html
//your code here

<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>demo</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Rename adminTemplate to the name of the folder you create in overrides -->
    <base href="/user-ui/dcim-new/">

    <link rel="icon" type="image/png" sizes="192x192" href="../img/icon192.png">
    <link rel="icon" type="image/png" sizes="128x128" href="../img/icon128.png">
    <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="../img/icon128.png">
    <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="../img/icon128.png">
    <link rel="manifest" href="manifest.json">

    <link rel="stylesheet" href="/modules/mangoUI/web/vendor/angular/angular-csp.css"></link>
    <link rel="stylesheet" href="/modules/mangoUI/web/vendor/angular-material/angular-material.css">
    <link rel="stylesheet" href="/modules/mangoUI/web/vendor/angular-loading-bar/loading-bar.css">
    <link rel="stylesheet" href="/modules/mangoUI/web/vendor/material-design-icons/iconfont/material-icons.css">
    <link rel="stylesheet" href="/modules/mangoUI/web/vendor/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/modules/mangoUI/web/vendor/mdPickers/mdPickers.css">
    <link rel="stylesheet" href="/modules/mangoUI/web/vendor/angular-material-data-table/md-data-table.css">
    <link rel="stylesheet" href="styles/main.css">
    <style>
.dashboard-footer{z-index: 99; border: 0 none;}
md-card.md-default-theme, md-card{color: #fff;}
md-card.md-default-theme, md-card{background:rgba(80, 80, 80, 0.25);}
    </style>
</head>

<body layout="column" ng-class="{'api-down': !mangoWatchdog.apiUp, 'logged-out': !mangoWatchdog.loggedIn}">
	<div ng-if="appLoading" class="app-loading">
		<i class="fa fa-cog fa-spin"></i>
	</div>

    <div ui-view ng-cloak layout="column" flex class="main-application"></div>
    <script src="/modules/mangoUI/web/vendor/requirejs/require.js"></script>
    <script src="/modules/mangoUI/web/loaderConfig.js"></script>
    <!-- Rename adminTemplate to the name of the folder you create in overrides -->
    <script>require(['mangoUIModule/dcim-new/app']);</script>
</body>```
<html>

date picker code

 <md-card>
            <md-card-content>
                <div layout="row">
                  <md-input-container flex style="margin-top: 0px;">
                        <label style="color:#fff;bottom: 77%;font-size: larger;">Preset</label>
                        <ma-date-range-picker style="color:#fff" from="from" to="to" preset="LAST_1_DAYS" update-interval="5 seconds" ></ma-date-range-picker>
                    </md-input-container>
                    <md-input-container flex>
                        <label style="color:#fff">From date</label>
                        <ma-date-picker style="color:#fff" ng-model="from" ng-click="showPicker($event)"></ma-date-picker>
                    </md-input-container>
                    <md-input-container flex>
                        <label style="color:#fff">To date</label>
                        <ma-date-picker style="color:#fff" ng-model="to"></ma-date-picker>
                    </md-input-container>
                </div>

            </md-card-content>
        </md-card>

I am using mango 3.1.1 and angularjs 1.6.4.I'm creating custom pages under which i am not able to select Dates from DatePicker.I am getting error regarding date format.;I have attached screenshot for the same.Please let me know if anyone has some idea about it.!