This function adds an entry to the left-hand side Widgets Toolbox of the Visual Designer. More than one entry can be added for the same base widget – this would be applicable if we vary the widget's default properties.
Parameter:
- config object - JavaScript object containing configuration properties
Configuration Options:
- category - specifies a widget category; this can be an existing category or a new one; if the category does not yet exist, it is automatically created in the Toolbox
- widget - the base widget name; also referred to as the "field type" property
- text - the text that will appear in the Widget Toolbox for this entry
- icon - the icon that will appear in the Widget Toolbox for this entry
- proxyHeight - proxy height in pixels (the proxy is the element or image that is shown while we drag the widget onto the designer canvas); the proxy height should typically be made the same as the height of the widget when it is first dropped onto the canvas
- proxyWidth - proxy width in pixels; the proxy width should typically be made the same as the width of the widget when it is first dropped onto the canvas
- proxyHTML - the HTML code in string format used to create the proxy; alternatively, this can be a reference to a function, which will return the appropriate HTML or return a reference to a DOM element
- defaults - an object with name/value pairs for default property settings for this widget entry
Example:
pui.toolbox.add({
category: "Custom Widgets",
widget: "google maps",
text: "Google Maps Widget",
icon: "/profoundui/proddata/images/icons/google_maps.png",
proxyHeight: 302,
proxyWidth: 402,
proxyHTML: '<img src="/profoundui/proddata/images/GoogleMaps.jpg" style="width: 400px; height: 300px;">',
defaults: {
"z index": 30
}
});