Change Color on Widget Using Variables

advanced-prototyping
#1

We would like to be able to click a button, and change a widget style or the color of a widget

Example:

  • user inputs color hex code into a text box, clicks submit on the button
  • submit button takes the text on the widget and saves it as a variable then uses the variable to update “color of widget to [variable]” OR (preferred) update “widget style fill color to [variable]”

How can I achieve this?

Change Style on Widget Using Variables (RP 9)
#2

Hi KRLyric,

I’m afraid it isn’t possible to dynamically modify or update a widget style, but I’m going to be logging both points you mention so our team can evaluate them as feature requests.

To a degree, you may be able to simulate the interactive effect by dynamically setting an existing widget style onto a widget–for example, by using Interaction Styles:

https://www.axure.com/support/training/interactive-button-tutorial

Alternatively, using Dynamic Panels may be more scalable as you try simulating this with a handful of predetermined states.
In using this DP approach, you could set up a few walkthroughs that include differently colored panel states that can be built to reflect the hex inputs, which you may specify beforehand to the end-user for demonstrating the idea of the prototype. If you’re unfamiliar with IX styles in the tool and/or using dynamic panels, please let me know and I’ll be happy to elaborate further. Nevertheless, I’ll also be logging these current limitations so our product team can evaluate alongside your workflow. Thank you!

#3

Hi KRLyric, so there is a way to do this but it’s a little bit of a work around. It involves using images as backgrounds for your widgets (ie set image behind the widget and set the actual widget to be transparent, etc)

@Alex_Axure super keen to see this feature in the future.

So here is what you do.

Step 1: Add a placeholder image from the common library and call it something you will remember (ie background_image)

Step 2: Go to a website that creates an image URL based on a hex colour. I use https://dummyimage.com/. So what this lets me do is allocate a value to a colour within the URL parameters. For example https://dummyimage.com/250/ffffff/000000, where the size and colours are specified. Now the only problem with this site is that it shows the dimenstions (ie 250 x 250) in the image. This can be resolved by changing the dimension to 1. This will give you a 1x1 image that doesn’t show the dimensions within the image. ie the URL below:

This also lets you specify a hex colour in the url. So if I want to change this to a shade of pink (#ec70f0)

This now has the image colour I need.

So how does this apply to your prototype.

Step 3 - Create your text field (and label it) for input

Step 4 - Create a trigger button (or onlostfocus or similar event)

  • Add an OnClick event here.

  • Set image and change the Default dropdown from Image to Value and click the fx option to create a expression.

  • Add the URL for the image you created with the colour in the top section

  • Create a new local variable and LVAR1 should = text on widget of the text field the user will enter the hex into

  • Now simply replace the HEX code that is currently in the image URL with the LVAR1 which should look something like https://dummyimage.com/1/[[LVAR1]]/000000

Now save it and test.

What you should find is that when the button is now pressed the background colour of the widget will change. The great thing with this method is that the image placeholder will dictate the size so you can add any X and Y dimension you need.

That is how I am ‘making do’ with allowing my prototype users to change the colour on the fly.

Let me know if you need help with any of the above.

#5

@Wake Created an account just to thank you for this - very slick solution. Worked great.

#6

Hi there,

Has there been any update on this? Would be great to change font colour, border colours as well as fill colours by passing a variable.

Thanks

Niki

#7

Thanks! I’m going to try this later today.

#8

It’s 2020 and still no improvement on this. That shouldn’t be a big issue to achieve on a desktop application.

#9

This works fantastic! Quick question, While in a browser, when i change the adaptive view, the color is stripped. Do you have a work around idea for this?

#10

Worked like a charm!

#11

It’s really disappointing that there still isn’t a simple way to dynamically change styles, but this solution totally saved me. Thank you!!

#13

check this post:

#14

1. Using JavaScript and DOM manipulation:

  • Bind a click event listener to the submit button.
  • Inside the event listener, read the color hex code from the text box using document.getElementById('textboxId').value .
  • Update the widget’s style using document.getElementById('widgetId').style.fillStyle = colorHexCode .

2. Using a CSS framework:

  • Many CSS frameworks like React, Vue, Angular, etc., have state management systems and provide ways to dynamically update styles.
  • You can store the color hex code in a state variable upon submitting the button.
  • Use the state variable to bind the widget’s style directly in your JSX or template code. For example, <Text style={{ fill: ${colorHexCode} }}> in React.

3. Using a widget library:

  • Some widget libraries offer built-in methods to change their properties dynamically.
#15

Wow! Add this into a repeater and you have an auto generated color chart! Awesome!
Also, the background color seems for the font of the sizing. So if you repeat the variable in the url, the sizing will blend in…
…dummyimage.com/500/[[LVAR1]]/[[LVAR1]] or in my case for the repeater:
…dummyimage.com/500/[[Item.Hexa]]/[[Item.Hexa]]

#16

I’m only finding this now years later, but I’m definitely sharing this idea with the rest of my team. So many times I’ve wished I could programmatically control background colours with interactions. Amazing workaround.