Refresh Button Widget and Theming

[philcremer]

A while back, marvin.kickuth wrote “Currently it isn’t possible to directly style the refresh button, though it is likely be possible via WebPortal theming. I’ll ask internally; maybe I am missing something.”

To follow up on his internal ask: Is it possible to (oh let’s say) change the yellow color or background-color of the Refresh Button Widget with Theming? My workflow’s background color is set and introducing the Refresh Button Widget introduces all sorts of white and colors that don’t belong. Will theming address these problems?

[ScottF]

Hi @philcremer -

I think you’re referring to this post:

Problems with new Refresh Button

Hi @rafaelfre1, thanks for asking. I also run into the encoding issue and have made the developers aware (internal reference: AP-17800). I’ll keep you posted on updates, especially if we find a workaround. Luckily, this seems to work fine in the WebPortal. Currently it isn’t possible to directly style the refresh button, though it is likely be possible via WebPortal theming. I’ll ask internally; maybe I am missing something. Kind regards Marvin

I’m not sure of the answer; let me check and see if I can find someone who knows.

[DanielBog]

Hey @philcremer,

changing the color of the refresh button is already possible with theming, but the refresh button currently just uses the color of the “primary” button that is defined for the whole WebPortal. Meaning that if you change that variable, all buttons for the WebPortal will change to the new color. If you want to change individual occurrences of the refresh button you can make use of the advanced tab in the layout editor and overwrite the variable definition for this occurrence.

Example to turn one button to red:

{
  "parentLayoutLegacyMode" : false,
  "rows" : [ {
    "type" : "row",
    "additionalStyles" : [ "--theme-button-background-color: red" ],
    "columns" : [ {
      "content" : [ {
        "type" : "view",
        "resizeMethod" : "viewLowestElement",
        "resizeTolerance" : 5,
        "autoResize" : true,
        "scrolling" : false,
        "sizeHeight" : true,
        "sizeWidth" : false,
        "useLegacyMode" : false,
        "nodeID" : "2003"
      } ],
      "widthXS" : 12
    } ]
  } ]
}

Example Workflow:
RefreshButtonStyling.knwf (75.0 KB)

Let be know if you have any further questions.

Greetings,
Daniel