Dear Community User! We have started the migration process.
This community is now in READ ONLY mode.
Read more: Important information on the platform change.

cancel
Showing results for 
Search instead for 
Did you mean: 
SOLVED

Changing text on a button based on a tag

Changing text on a button based on a tag

ph0010421
New Poster

Hello

Can anyone offer an example, please?

10 REPLIES 10

TheCodeCaptain
Community Moderator
Community Moderator

Hi ph0010421,

could you please give us a little bit more information?

What software are you using in which version?

Where is the text and the tag coming from?

Maybe some screenshots and/or example project?

Many thanks

Hello

I'm using WebIQ 2.13

The tag is an OPC tag i.e. coming from a PLC. 

In the first instance, the text will be On/off or something like that, but I need it selected by a BOOL tag

thanks

webiq-sk
Frequent Contributor

Why don't you use a toggle button or a flip-switch then?
That would also be the semantically correct way to do it from a UX perspective.

Thank you for the reply.

I need to base the text on a feedback tag, not the tag I'm writing to. I thought it might be native functionality but it looks like I have to go off-piste.

HmiGuide
Community Moderator
Community Moderator

Maybe thats a workaround for you: 

Use a iq-label for changing the text by a item and place a button behind e.g.like this:

HmiGuide_0-1681797806770.png

 

webiq-sk
Frequent Contributor

Using an iq-text widget would also be an option

Sgilk
Frequent Contributor

Maybe I am misinterpreting your question, but you can use placeholders and snippets to programatically change widget parameters based on tag value. See: Placeholders and Snippets in WebIQ 

MrAdam1983
Long-established Member

Sgilk - your link is not working.

 

Am I reading these responses right in that we cannot change the appearance of a button based on a tag value? 

We use a two tag structure that gives us logic diagnostics instantly on the button. We send a command through the first tag and look at a second tag for a status feedback; that feedback is based on whether or not the logic completes.  If the logic does not complete then the button does not "Light" indicating something did not complete. That is a standard push button, on multistate indicators we do the same to indicate a selected function but only once the logic completes.

This, to me, seems like a pretty standard function.  It may seem like overkill but you would be suprised how much it reduces claims such as "the HMI doesn't work" and it can also prompt operators to make sure all of the conditions are met. 

webiq-sk
Frequent Contributor

You are using the word "appearance" here. This can mean two different things:
1. Change the text (i.e. contents) of a button (something which cannot be achieved with CSS directly on any website as the text would have to be part of the HTML)
2. Change the styling of a button

If you just want to change the style of a widget you can always do that using CSS and CSS Modifiers. I attached a very simple demo that simply sets the SBool item when you enable the flip switch and turns the button green in that case.

So it really comes down to the exact thing you want to achieve: changing the appearance of a widget is something completely different than changing the contents of a widget.

For simple styling changes you don't need any composite widgets - simply use CSS Modifiers for that.

Sgilk
Frequent Contributor

Sorry about that. I am linking to the WebIQ Designer Manual under "Using Templates and Composite Widgets" -> "Define the Configuration Interface". The information about snippets and placeholders is found there.

Placeholders and Snippets 

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist