Page Comparison

...

In addition, a 16 by 16 pixel png icon should be created for the panel.  All images should be placed into a subdirectory under /www/profoundui/htdocs/profoundui/proddata/images/panels.  The name of the subdirectory will be the name of then the panel style.

The second step is to add a panel style by modifying the pui.widgets.panelStyles associative array.  Each entry in pui.widgets.panelStyles is an object with name/value pairs; the following are possible names:

...

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

The "panel style name" will then appear as an option in the Visual Designer under the "tab panel style" property.

The third and final step is to add an entry into the Widgets Toolbox by using the pui.toolbox.add() API.  For more details about this API, refer to the Widgets Development API section of the documentation.  Profound UI provides a special function pui.widgets.getPanelProxy() that can automatically create a drag and drop proxy from the custom panel definition.  This function should be used for the "proxyHTML" configuration option.  The "defaults" configuration option should assign the "panel style" property to the new panel style name. 

...

// 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"
  }
});

...