How to display Alarms/Events in a custom HTML dashboard?

[Shivan]

Hi All

I've been searching the site and only find some solutions to solve this in DGLux however Im looking for a solution to it in HTML. Could someone please advise me?

Thank you
Shivan

[Woody Beverley]

Hello Shivan,

We plan to add some directives to Angular custom dashboard module for this very soon. If you need a solution before then you will have to use our JavaScript API or RestAPI to access the data.

[ThomasEinasto]

Hi Woody,

I understand that this post is quite old but I figured that there wont be any need to create a new post as this was asked 4 months ago.

As I see you already have implemented a watchdog into Custom Dashboards module so the event directives are in the making? Is there a estimated due date when will you add some new directives to Angular for Mango events?

Thanks,
Thomas

[Will Geller]

Hi Thomas,

The event directives and improvements to the events API have been written in the last couple weeks and are currently being tested and further developed.

An events table directive and events service will be in the next dashboards release, which may be about a month out. I'll have to double check on the timeline.

-Will

[shaun]

Hi Guys,

Just thought I'd +1 for this feature...

This would help significantly in my latest deployment.

Cheers!
-Shaun

[Nomathamsanqa Philiso]

@Will-Geller is this functionality working now because i am new on mango and i want to add events and alarms on my custom html dashboard but i have no idea how can i do that and also i want to set user permissions for multiple users using the same mango to be able to see only data relevant to them i have two customers using same mango

[Will Geller]

We are planning to release an update in 1-2 weeks that will give you an events table that you can insert onto one of your custom pages. It was a bit held up as it requires updates to the Core and API modules to function properly. In the mean time you can get your event detectors and alarm functionality set up using event detectors on data points or the scheduled event page (both will still need to be done on the legacy pages).

As far as having specific users being able to see specific pages only, you should be able to do that in the current release. Essentially you would set up 'User A' to have 'User A' Permission and 'User B; to have 'User B' permission. Admin should have both permissions.

You would then create custom pages and give the menu item read permissions for the related user.

See this post for more info:

http://infiniteautomation.com/forum/topic/2484/guest-login-permissions-and-kiosk-dashboards/3

Also see this help video for an overview of users and permissions:

http://help.infiniteautomation.com/support/solutions/articles/14000022516-users-permissions

[Nomathamsanqa Philiso]

i would like to know if its possible to have two different customers to use the same mango can i on the mango software set two dashboard for different customers and each customer to be able to see only their dashboard

[phildunlap]

Yes. A user has a home page that can be set to direct them to different URLs when they log in. Permissions govern what else is visible, so together these can let two users be unaware of each other's data and displays.

[ThomasEinasto]

Hi @Nomathamsanqa-Philiso

You can create one dashboard page for your customers and then change the datapoint permissions according to your customer points. Log into your Mango instance as an admin. I hope you have created the datasources/datapoints for your clients.

After logging in click on the users icon. ( 3rd icon from the left ) Then you have opened this:

On the Edit user dropdown list you have an icon Add User. When clicked you will open up a new user details.

Edit the Username, password, e-mail etc... Set the home URL as the link to the custom dashboard page. Change the permissions to some keyword which Mango uses to link the datapoints according to the user. e.g "Client1" or "Client2" etc... so that you will remember that the user permissions are linked that specific client. Then save the user.

After that you have created a new user and then you can go and click on the Data point permissions where you can setup the points which the user can see. There you can filter the points by datasource name / xid etc.

I have filtered the datasource as "Client1DataSource"

Then you can bulk apply permissions to the filtered points on the bottom of the page. I have my client setup as their permissions name "gases".

Then the client who logs into their session with the home url as the custom dashboard link can only see the points which have been assigned to them in their dashboard.

Hope you understood the quick tutorial where I tried to explain the basics of the permissions. But I strongly suggest you take a look at the links which Will pointed you out in the previous post.

Thomas,

[phildunlap]

Thanks for that, Thomas!

[Nomathamsanqa Philiso]

Hi Thomas i do understand what you saying but the problem is i need the whole dashboard to be different the logos interface everything not only the data points these are totally different customers with different look and feel

[ThomasEinasto]

I do understand you, but you can solve this problem multiple ways.

The most easiest one is to use ng-class or ng-show or ng-if.

ng-class
By only using angular and css you can create classes in css file and use ng-class to assign the correct class to the correct user. Everything is shown in DOM.

ng-if
The picture only shows if that user is logged in their session. Deletes the DOM so user cant see it in their inspect element.

ng-show
Shows only if that user is logged in their session. Everything is shown in DOM.

Explore the dashboards module and AngularJS page. There are pretty multiple ways to solve everything. Just depends how you want the page to be and the style of your coding :). Also a little bit of researching about the Angular helps. There are plenty of people in the internet who have discussed it.

A ng-class example where the div changes its class according to the Metapoint value.

<div id="S9" title="S9" class="default" ng-class="{'default': DamperS9.value == 11 || DamperS9.value == -11, 'blue': DamperS9.value == 3, 'yellow': DamperS9.value == 2, 'red': DamperS9.value == -1, 'green': DamperS9.value == 1}">
      </div>

Ng-if and class example. Div changes its class and shows only if the ng-if = true

<input type="button" id="K5-K" name="" value="K" class="OFF ng-scope" title="Käivita" ng-class="{'OFF': point.value == 0, 'ON': point.value == 1}" ng-if="point.value == 0" ng-click="point.setValue(1)">`
``

[Nomathamsanqa Philiso]

do you by any chance have any tutorial on how to set this because i am not good on angular

[Jared Wiltshire]

@Nomathamsanqa-Philiso
Can you please start a new topic for your question. You have asked in two separate unrelated threads.
Please give much as detail as possible and I will try and respond there.

[shaun]

Hi All,

Do we have any updates on this? I'm keen to integrate it into the dashboards i've been building for a client.

Cheers!
-Shaun

[JoelHaggar]

We've been working on a update that will hopefully be released this coming week.

[shaun]

Thanks Joel :) I'm really keen to use this feature!

[Will Geller]

Just an update to those who are interested in the events directive, this has been released into the newest publicly available version of core & dashboards. You will need to update at least core, api modules and dashboards, but updating all modules may be ideal.

You can then find an example under utilities of the events table directive and a page under api-docs showing all parameters of the component.

[ThomasEinasto]

Hi Will,

As I have updated to 2.8 with all the modules updated I cannot notice that in the dashboards module there seems to be no changes at all even though the modules page shows the latest 3.3.0 version. I have already deleted the .jars so that mango would create new jars but there seems to be no changes at all in the module.

Thanks,
Thomas