Need help custom Widget rename true/false into anything

Apps & Services HABPanel
1

Hello
I need help with programming a custum widget.

Here is the current code:

<div class="" ng-if="(config.top_label)">{{config.top_label}}</div>
  
<widget-icon iconset="config.item_icon_iconset" icon="config.item_icon" size="30"></widget-icon>  
  
<span ng-if="(config.string1_label)">{{config.string1_label}}</span>  
    
<span>{{itemValue(config.string1_item)}}</span>

I would like to show the status of devices in the network.
I have reached the point where the value read out from the data point is displayed.

Now I do not want to have true or false but online / offline.

How do I do it ?

Thanks for Help.

2

Assuming your item is a String item, you can do this:

{{ itemValue(config.string1_item) == "true" ? "online" : "offline" }}

This structure is called a ternary operator, basically an inline if-else statement.

If at some point you would have a Numer item, you can basically do the same thing:

{{ itemValue(config.number1_item) == 1 ? "online" : "offline" }}
2 Likes
3

Thanks for your help. It works.

Now I have one more question.

Here is my code:

> <div style="color: rgb(255, 123, 0)">
> <div ng-if="(config.top_label)">{{config.top_label}}</div>
>   
> <widget-icon iconset="config.item_icon_iconset" icon="config.item_icon" size="30"></widget-icon>  
> <br>
> <div style="color: rgb(0, 204, 102)"> 
> <span ng-if="(config.string1_label)">{{config.string1_label}}</span>  
>     
> <span>{{ itemValue(config.string1_item) == "true" ? "online" : "offline" }}</span>
> 
> </div>

Currently the text color is green no matter if the device is online or offline.

I would like the text to be green when the device is online and red when offline.

Unfortunately, I can not program so well and try to teach myself with copy past the whole thing.

Thanks for Help

4

You can do the same there as for the value:

<div style="color:  {{ itemValue(config.string1_item) == 'true' ? 'rgb(0, 204, 102)' : 'rgb(255, 0, 0)' }}">
5

Her is my code:

<div style="color: rgb(255, 123, 0)">
<div ng-if="(config.top_label)">{{config.top_label}}</div>
  
<widget-icon iconset="config.item_icon_iconset" icon="config.item_icon" size="30"></widget-icon>  
<br>

<div style="color:{{ itemValue(config.string1_item) == 'true' ? 'rgb(050, 205, 050)' : 'rgb(178, 034, 034)'">  
<span ng-if="(config.string1_label)">{{config.string1_label}}</span>  
   
<span>{{ itemValue(config.string1_item) == "true" ? "online" : "offline" }}</span>
  
</div>

Where do I make a mistake. Unfortunately, it is not.

6

Apologies, I forgot to add the closing accolades. See my edit in the answer above.

7

Thanks for help :slight_smile: