Basic dashboard question

psysak

Hey guys, this is such a basic question but I have to ask it cause I'm struggling to figure it out.

Let's say I'm pulling in a point name from the database to display on the dashboard using <ma-point-value/list>. When I load the dashboard the system does its thing and displays the name and /or point value. Is there an object that I can access from any HTML element present in the DOM which I can use to access that points parameters such as name, device source name etc?

I have some points who's names are a specific tenant name, commercial tenant, and the "device name" is the specific address in the campus. I want to put just those names in the header of my page. Generally speaking I am still confused, or lack the conceptual image in my brain, of how exactly actual HTML elements interact with the mango objects and this is where my confusion comes from. Understanding that more would be my "teach a man to fish" moment.

Thanks again for all the help, I'm getting there.

MattFox

Yes, you view the point's details by entering {{point}} . If you were to copy the text that is printed out onto your dashboard and paste it into https://jsonformatter.org/json-viewer you'll be able to see the format and how all the properties in the point data is formatted/grouped.
i.e. {{point.deviceName}} doing this will allow you to do
<h1>{{pulledPoint.deviceName}}</h1> in the html markup.
Do note this must be a point object, not the pointvalue (which only hosts the xid with "_value" appended to it, and an array of values, and timestamps.
If you don't mind, toss all of your page markup up here. We'll have it sorted pronto.
remember to wrap it in three tildes (or use the code tags)

Jared Wiltshire

@psysak said in Basic dashboard question:

Generally speaking I am still confused, or lack the conceptual image in my brain, of how exactly actual HTML elements interact with the mango objects and this is where my confusion comes from. Understanding that more would be my "teach a man to fish" moment.

The dashboards use AngularJS which you might want to do a little reading about if you really want to learn. The crux of how it works however is that the Mango components that you drop on the page add data to a $scope which is like a context or basically a JavaScript object which holds data. There are multiple nested $scopes on a page, generally you can access data from parent scopes in child scopes. Anyway, what you do when you drop a component onto the page is you add a placeholder into the markup / HTML, you can then bind data from the $scope to the placeholder element, generally using an attribute or an interpolation expression.

For example if you have point on your scope and add a <h1> element to the page you can bind data to it using the ng-bind directive - <h1 ng-bind="point.name"></h1> or using interpolation <h1>{{point.name}}</h1>

To get a point onto your $scope you can use various different Mango supplied components -

Get a point by XID - <ma-get-point-value point-xid="multistate" point="point"></ma-get-point-value>
Select from a drop-down - <ma-filtering-point-list ng-model="point"></ma-filtering-point-list>
Find from an array - <ma-calc input="designer.points | filter:{name:'Current'}:true | maFirst" output="point"></ma-calc>

Jared Wiltshire

@mattfox said in Basic dashboard question:

Yes, you view the point's details by entering {{point}} . If you were to copy the text that is printed out onto your dashboard and paste it into https://jsonformatter.org/json-viewer you'll be able to see the format and how all the properties in the point data is formatted/grouped.

I would suggest an easier way of doing this in the dashboard - <pre ng-bind="point | json"></pre>

psysak

You guys are awesome, thank you!

MattFox

@jared-wiltshire said in Basic dashboard question:

I would suggest an easier way of doing this in the dashboard - <pre ng-bind="point | json"></pre>

Thanks, I'll give it a try!

krutik k

Hii
You can also use https://onlinejsontools.org/ for json validator,beautify,minify,xml,yaml,CSV,bson,plain text,base64,tsv.
Do checkout this site!