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 panel or dialog.

...

Code Block
javascript
javascript

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

...

Code Block
javascript
javascript

// Add a new panel style
pui.widgets.panelStyles["Custom Panel"] = {
  left: 10,
  right: 10,
  top: 33,
  bottom: 9,
  background: "gray",
  textColor: "#000000",
  textBackground: "#f6d47a",
  textTopPadding: "7px"
}

// Now, add an entry to the Widgets Toolbox
pui.toolbox.add({
  category: "Custom Widgets",
  widget: "panel",
  text: "Custom Panel",
  icon: "/profoundui/proddata/images/panels/Custom Panel/icon.png",

  proxyHeight: 100,
  proxyWidth: 200,
  proxyHTML: function(defaults) {
    return pui.widgets.getPanelProxy(defaults);
  },

  defaults: {
    "panel style": "Custom Panel",
    "color": "#000000"
  }
});

...