How to display Alarms/Events in a custom HTML 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

[Will Geller]

Hi Thomas,

The added change would largely be the events table mentioned in this post. If you are not seeing this in the examples / api docs then you likely need to both clear your browser cache, and reset the menu items.

To reset the menu you will want to go to the edit menu settings page, and click both reset default and delete custom menu then save.