Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.



Note
titleContent Freeze

As of July 25th, 2023, there is a content freeze on this page.

There are 3 steps to creating a custom styled button.

...

Code Block
javascript
javascript

pui.widgets.buttonStyles["button style name"] = {
  property1: value1, property2: value2, etc.
}

...

Code Block
javascript
javascript

// Add a custom button style
pui.widgets.buttonStyles["Custom Button"] = {
  left: 23,
  right: 23,
  top: 10,
  bottom: 10,
  hasOverState: false,
  hasClickState: false,
  textColor: "#000000",
  editBackgroundColor: "#eca430",
  width: 125
}

// Now, add an entry to the Widgets Toolbox
pui.toolbox.add({
  category: "Custom Widgets",
  widget: "styled button",
  text: "Custom Styled Button",
  icon: "/profoundui/proddata/images/buttons/Custom Button/icon.png",

  proxyHeight: 23,
  proxyWidth: 125,
  proxyHTML: function(defaults) {
    return pui.widgets.getStyledButtonProxy(defaults);
  },

  defaults: {
    "button style": "Custom Button",
    "width": "125px",
    "color": "#000000"
  }
});

...