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?


#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.