pui.toolbox.add( config )



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