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