[solved] Change device in dynamic watchlist as result of click event

[Andras]

Hello all,

After 8 years, I'm back using Mango for a commercial (light for now) project. I like the new dashboard and other new features, good job! A lot has changed in all those years. It's funny to see that my forum profile is older than that of the IAS staff members :)

So I created a nice dashboard with a dynamic watchlist for this project, and everything is working pretty much as I intended. There is only one thing that I would like to add, but couldn't figure out yet how to do.

On top of the possibility for users to change the dynamic watchlist by selecting a device from the watch list parameter dropdown, I would like users to also be able to change the selected watchlist device by clicking on the device ma-indicator that represents the device status. How can I achieve this? Thanks in advance!

[CraigWeb]

Hi Andras

you'll need to add a ng-click expression to your ma-indicator that changes the designer.parameter variable to that specific deviceName. If you don't come right paste a snipbit of your code and ill try help.

If you followed the watchlist tutorial and made your watchlist parameter variable names 'dn' then your code should look something like this :

ng-click="designer.parameters.dn = 'myDeviceName' "

[Andras]

Hi CraigWeb,

Thank you for your answer, I much appreciate it. I did indeed follow the 'Dynamic Dashboard Workflow' video tutorial, so the point hierarchy is used to select the device points for the watchlist. The names of the devices are 'Device-xx', with xx the device number. I now tried:

ng-click="designer.parameters.dn = 'Device-40'"

The watchlist parameter selector does clear on the click event, however Device-40 is not selected. It looks like the dn parameter is no longer valid after the click.

Isn't dn itself an object? I tried for instance to change the code to assign the 'Device-40' string to the name property of dn:

ng-click="designer.parameters.dn.name = 'Device-40'"

In which case the name 'Device-40' does appear in the device selector dropdown, however this doesn't change the selected watchlist itself.

[CraigWeb]

Hi Andras

When I wrote that I tested it with my watchlists that where querying by tags and it worked. To be honest I forgot that the tutorial still used point hierarchy. The easiest way to figure it out is to somewhere in your html code put the entire designer.paramaters object into your web page like so {{designer.paramters}} you can then see the object structure and figure out witch part of the object you need to change.

• In which case the name 'Device-40' does appear in the device selector dropdown, however this doesn't change the selected watchlist itself.

check if you have the following code in your

<ma-watch-list-parameters on-points-change="designer.points = $points"></ <ma-watch-list-parameterst>

If you drag and drop you <ma-watch-list-parameters ></ <ma-watch-list-parameters> It doesn't put it in from what I understand

[Andras]

The dn object looks like this:

"dn": {
    "name": "Device-45,
    "id": 1,
    "pointCount": 5,
    "subfolders": []
}

In the dashboard designer, I use:

<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="d8b6dbb5-2b9c-4588-86ac-8a146e2891d9" watch-list-xid="WL_fecfa985-8e78-44c7-8a73-a2a97b0ef3b6"></ma-watch-list-get>

<ma-watch-list-parameters id="fc2d053c-1d74-4548-b8f2-a7a253adfb44" style="position: absolute; width: 792px; left: 554px; top: 0px; height: 56px;" ng-model="designer.parameters" watch-list="designer.watchList" ng-change="updateParams = designer.parameters"></ma-watch-list-parameters>  

<ma-indicator id="dev40" style="position: absolute; width: 16px; height: 16px; left: 747px; top: 627px;" default-color="#00f500" point-xid="DP_8c32d66c-627b-42cd-b5cb-917d4684b9e5" ng-click="designer.parameters.dn.id=2; designer.parameters.dn.name='Device-40'"></ma-indicator>

The on-points-change attribute is present (it looks like it is an attribute of ma-watch-list-get). The click will change the dn object such that it has the same data as when device 40 was selected from the dropdown. But the change goes unnoticed.

It looks like some change detection is still needed. My thought was that ng-change="updateParams=designer.parameters" in the parameters dropdown causes a change in the dropdown to propagate, and that something similar is needed for the click. But everything will work even without this attribute being present.

[Andras]

OK, I found the solution:

ng-click="designer.parameters.dn={id:2,name:'Device-40'}"

It just occured to me that the watchlist did initially change (clear), so the change detection can't be the problem. It looks like both id and name need to be set this way simultaneously, and then it works.

Thanks for your help. Next time I will use tags too ;)

[CraigWeb]

Glad you came right mate. Yup the tags are amazing and the watch list builder makes it super easy to build tag queries.

[Jared Wiltshire]

@Andras is your parameter a data source? That's what it looks like, a device name will just be a string. Glad you got it working anyway.

@andras said in [solved] Change device in dynamic watchlist as result of click event:

It's funny to see that my forum profile is older than that of the IAS staff members :)

I had no idea the forum had even been around that long!