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