Use Interactivity to dynamically switch between applied Widget Styles?

[brooksie]

I’d like to know if there’s any way to use Interactivity to dynamically switch a widget between applied Widget Styles?

Say I have a widget and it has “WidgetTestStyle1” applied to it… it’s a blue bg, a red border and 10pt rounded corners.

I want to click a button and switch the Widget’s style to “WidgetTestStyle2” and change to a red bg, black border, and 5pt rounded corners.

I’ve been testing for an hour or so and I can’t find any way to do this.

Ultimately, I’d like that button click to dynamically switch every Widget in a given Project to a different Style so I can mimic Light/Dark themes in my prototypes.

I don’t want to use Style Switching, visibility on/off, or Dynamic Panels… that will mean too much manual updating… fine for a given, single widget or two but not fine for a big project. I’m trying to use Axure to build a component-based design library for a huge and massively complex Enterprise application.

If there is no way to do this I’d love if this can be suggested to the Product Team… this would be a VERY useful function in terms of trying to create switchable Themes in a Project.

[mbc66]

To suggest new features, complain about current features, etc. send an email to support@axure.com --they don’t like us to use the forum for that anymore. I guess we’re collectively too much like fourth graders Ha ha! Loved that comment in your other post… Seriously though, they are good at responding to emails.

In the meantime, I recommend using a Selected state for each of your widgets. The default/normal/unselected state can be set to “WidgetTestStyle1” and the selected state can be set to “WidgetTestStyle2” Then your button can have an action to “Set Selected of [widget] to toggle” for each widget. The selected styling will carry across to Masters and Widget Libraries.

If you are concerned with having to select every widget on a page as targets for your button click action, and then having to repeat on all your pages, then I can think of a few approaches you could try…

Once you are done designing a page, group all the widgets on the page (Ctrl+A then Ctrl+G) and then have your button set this group to “selected.” This may not work so well for “massively complex” prototypes.

Or, build a conditional case into each widget so it can take care of itself, in an object-oriented fashion. I would try using the Loaded event with a conditional case to test the value of a global variable, like OnLoadVariable. In your case it might look something like, “IF value of OnLoadVariable equals “dark” Set This to Selected.” You can copy and paste this Loaded event from widget to widget as you are building your widget library. Then, your “theme button” can simply set OnLoadVariable to “dark” (or blank for a default Light Theme) and reload the current page. Subsequent pages would keep the current theme as they load, as long as the widgets are dragged in from your library with their Loaded event.

Here’s a couple recent threads on this:

Switchable (dark / light) theme on widgets

Axure doesn’t allow you to set a specific style–like, from a style sheet, but there are a few ways you could go about this… Use the widget’s “Selected” style for one of the themes. Say the default theme is Light --style all your widgets for that theme. Then create a Selected style (in the Style Effects dialog) and style the widget as it should look in the Dark theme. To switch to Dark theme, just select all your widgets. To make this more automatic, the OnLoad event for each widget can set it…

Maintaining a single prototype for multiple versions

To keep branded versions in one prototype, I would create an initial branching page (e.g, “Home” in the sitemap) with buttons or a droplist for each “brand”. Choosing a brand (clicking a button or selecting a list option) would set a global variable to that brand name or identifier. Each page would then have an OnPageLoad action to test this global variable and set things accordingly. To make it easier, put all the “branded content” on each page in a dynamic panel (or set of dynamic panels if t…

[brooksie]

@mbc66… thanks for the thoughtful and informative response. i’ll look into these suggestions today

[MurrayEaton]

You could possibly do this with the CSS as a plugin and JS to switch classes but it would be very difficult as you cant see the application of this css until runtime.

Extending Axure's Interaction Design with CSS3

[brooksie]

That was an interesting article, thanks for sharing.

Too much work though.

Adding “Widget Style” as a target for inline interactivity seems like it ought to be relatively easy and I am pretty sure people would use it extensively.

[Stiggy]

This.
Please mail a feature request to support@axure.com. I already did this and got a decent reply, but not much has been happening. If more people ask for it, perhaps it will get higher priority.

[brooksie]

Good suggestion. Done