Hiding Dashboard Elements if DataPoints are Disabled.
Trying to figure out how to hide elements like ma-gauge if a DataPoint is disabled.
Currently when the datapoint is disabled, it dims with the red cross hatches.
Is there an easy way to hide the element with ng-hide/show or Advance CSS on a disabled datapoint ?
Any help would be appreciated. !
You answered your own question. Datapoint from <ma-get-point-value> has .enabled key which you can use together with ng-show to hide/show elements based on enabled configuration.
Thanks for the reply however didn't quite inspire any solution as I am not very well versed in Angular JS.
As ng-hide and ng-show utilize boolean inputs so you can put like
<ma-get-point-value point-xid="dp_2323fsadilj" point="point"></ma-get-point-value>
<!-- point.enabled is boolean which can be inserted into ng-show so following div will show only when point is enabled -->
<div ng-show="point.enabled">
<span ng-bind="point.value"></span>
</div>
<!-- Following will show all keys available in point object -->
{{point | json}}
This seem to perform the same effect.
When disabling the data point for the element, it turns red with cross hatches instead of making it disappear or hiding in the Dashboard.
I cannot seem to get rid of the element staying on the dashboard and turning red.
Not quite sure how you are implementing it right now so I guess there is something else you are not saying. You are saying that on following example which I provided this part does not disappear if you disable the datapoint?
<div ng-show="point.enabled">
<span ng-bind="point.value"></span>
</div>
Sorry, perhaps I am not describing my intention clearly.
Using a ma-gauge-chart.
When disabling the datasource this is what I get.
Instead of the red cross hatch, I am trying to make the gauge not show at all.
In the dashboard designer under the properties, Under the Advanced CSS's display property, I can manually set to "none" and it hides it but not sure how to set it with the point.enabled flag.
The Angular JS, the ng-hide / show causes the red cross hatch.
Use the same approach Thomas used above, But apply the ng-show="" to the gauge to hide it from the page.
<ma-gauge ng-show="pt.enabled" ...>
Or wrap the div around the value and the gauge.
I would advise reading up on the various directives and functions provided by AngularJS.
For it looks like you will struggle a little with implementing what you wish to do without a better understanding of the dashboard mechanics.
Fox
Thanks Matt.
I have been reading on Angular for a few week, and just missing something.
Thank you guys for your time... I'll just accept defeat and live with it as is.
Then use this instead:
<ma-gauge ng-if="point.value" ...
That will generate a gauge instance if there is a value.
Better yet, give us your dashboard mark up and Thomas or myself will show you where you went wrong so you know for next time for reference.
Fox
@ristola said in Hiding Dashboard Elements if DataPoints are Disabled.:
Sorry, perhaps I am not describing my intention clearly.
Using a ma-gauge-chart.
When disabling the datasource this is what I get.
Instead of the red cross hatch, I am trying to make the gauge not show at all.In the dashboard designer under the properties, Under the Advanced CSS's display property, I can manually set to "none" and it hides it but not sure how to set it with the point.enabled flag.
The Angular JS, the ng-hide / show causes the red cross hatch.
When disabling the datasource this is what I get.
That's what's wrong and why you see this like that. Disabling datasources and disabling datapoints are different methods so seeing this is actually intended. If you want it also to remove based on datasource state then do a datasource query like this
<!-- Get our point based on xid -->
<ma-get-point-value point-xid="dp_2323fsadilj" point="point"></ma-get-point-value>
<!-- Get our datasource based on point datasource xid -->
<ma-data-source-query data-sources="dataSourcesArray" query="{xid: point.dataSourceXid}" limit="10"></ma-data-source-query>
<!-- Hide element when datasource is not enabled or point is not enabled -->
<div ng-hide="!dataSourcesArray[0].enabled || !point.enabled">
<span ng-bind="point.value"></span>
</div>
Ahhhhh.
That works ! Thanks so much for the help.
I also found one hinderance when testing in the Play Area with the code changes. After testing changes / incorrect coding , nothing else seems to work afterwards.
Fix was to make code changes, save and Re-load Webpage to check. Can't believe how much time was lost with that issue.
Much appreciated ! Wanted to accept defeat, but I just coudln't let it go !
You guys are great ! Thanks again.