Refresh Button Widget and Theming

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

2 Likes