Group objects into a user component

wallobee

Is there a way to create a group of objects that become a user component and then can be dropped on to the designer and linked to a watchlist which will then populate all the objects in the group/user component ?

I have a bunch of devices that gather all the same data. I can see that i can create a single page with all these displays on them and link that page to a watchlist which filters on the device name and then use the dropdown to cycle through the devices that are being displayed on the screen. This is a good option but i would like to be able to show multiple of these devices per page which would be easier if i can create a group object to link to watchlists

richard.mortimer

I've been doing something similar to this - you may want to have a look at some of my previous posts to do the same; but in summary:

Use tags - if you have the same point in different devices use the device name as one tag and the function as a second
If your situation may have future additions, you can use a JSON store as the source of your devices
If your situation will be a low volume of new devices, you might want to use an ng-repeat using a range with your devices in; eg <div ng-repeat="device in range('Device1','Device2','Device3' ... 'DeviceN')">
Within that main div grab your point query with <ma-point-query query="'eq(tags.Device,'+device+')&eq(tags.Display,Point1)'" points="points[n]" ></ma-point-query>
Cycle through points[n] to find your specific data point value <span ng-repeat="point in points[n]"><ma-get-point-value point-xid="{{ point.xid }}" point="output"></ma-get-point-value>{{ output.renderedValue }}</span>

Hope that helps to get you started ... !! I'm sure the learned people at IA will chime in with a better way than what I've done; but it may require you to start digging into the AngularJS side of things ....

Cheers

Richard

Jared Wiltshire

@wallobee said in Group objects into a user component:

Is there a way to create a group of objects that become a user component and then can be dropped on to the designer and linked to a watchlist which will then populate all the objects in the group/user component ?

Absolutely, here is the help link for user modules - https://help.infiniteautomation.com/getting-started-with-a-user-module

I would suggest passing through the list of points to your component then filtering the points using tags inside the component.

Once you have a component in your user module you should be able to drop it onto the page from the left menu.

pyeager

I am in a similar spot.

While the information Jared linked to is sufficient to instantiate an object and define element specific values for the instance, it doesn't say much about implementing behavior.

Could that example be expanded a bit, perhaps to do something like implement a behavior based on a data point?

Jared Wiltshire

@pyeager said in Group objects into a user component:

it doesn't say much about implementing behavior.

That is because the behavior is up to you as the implementer to define. There are literally infinite possibilities.

@pyeager said in Group objects into a user component:

Could that example be expanded a bit, perhaps to do something like implement a behavior based on a data point?

If you search the forum I promise you will find lots of examples!

pyeager

That is because the behavior is up to you as the implementer to define. There are literally infinite possibilities.

I am aware that I must write code to implement behavior. How it fits into the framework of angular is less obvious.

If you search the forum I promise you will find lots of examples!

Believe it or not, I did indeed search before asking for assistance. Perhaps you might share some search terms or links to the examples you say exist?

Jared Wiltshire

@pyeager said in Group objects into a user component:

I am aware that I must write code to implement behavior. How it fits into the framework of angular is less obvious.

We are not here to offer a course in AngularJS, there are literally tens of thousands of articles available on the internet for learning AngularJS.

In terms of using AngularJS with Mango, please see below.
Also note that all of the Mango components are open source and available to peruse here -
https://github.com/infiniteautomation/ma-dashboards/tree/main/UI/web-src/ngMango

@pyeager said in Group objects into a user component:

Believe it or not, I did indeed search before asking for assistance. Perhaps you might share some search terms or links to the examples you say exist?

"user module" or "component" returns plenty of results, for your convenience -
https://forum.infiniteautomation.com/search?term=user module&in=titlesposts&matchWords=all&by=Jared Wiltshire&sortBy=timestamp&sortDirection=desc&showAs=posts

You also seem to be ignoring the fact that I have posted a user module tailored to your needs here -https://forum.infiniteautomation.com/topic/4423/styling-a-custom-component-in-usermodule/9

Please remember that this is free support. If you ask specific questions which demonstrate that you have
a) Read and understood the API documentation, examples, help articles, and forum posts
b) Made an effort to implement a solution yourself
c) Followed the advice we have given you
We are far more inclined to help you.

pyeager

This post is deleted!

Jared Wiltshire