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

Allow event table access to customer using custom dashboard.


  • Hi guys as example show event table in mango.0_1506414654484_EventsTableCode.png
    On click on data points it allows us to edit and see history of data point.0_1506415130609_DataPointEdit.png
    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 table0_1506416163658_EditTable.png
    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: {}"


  • Yep you are quite right, the links will not work inside a custom dashboard if you are using a UI module prior to v3.2.3. They will however work inside a custom page.

    UI module v3.2.3 includes a way to customize the links in your custom app. e..g

    myApp.constant('MA_EVENT_LINK_INFO', {
        DATA_POINT: {
            icon: 'timeline',
            tooltipTranslation: 'ui.app.dpd',
            stateName: 'ui.dataPointDetails',
            stateParams: event => {
                return { pointId: event.eventType.dataPointId };
            }
        },
        DATA_SOURCE: {
            icon: 'device_hub',
            tooltipTranslation: 'header.dataSources',
            stateName: 'ui.settings.dataSources',
            stateParams: event => {
                return { dataSourceId: event.eventType.dataSourceId };
            }
        }
    });
    

    You would need to change ui.dataPointDetails to a state name that exists inside your application.


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


  • @ganeshvarahade said in Allow event table access to customer using custom dashboard.:

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

    Yes, as I said above you need UI module v3.2.3 to customize the links though. I'd suggest upgrading to Mango 3.2.