pui.addCustomProperty( config )

This function adds a custom designer property.  The property is typically assigned to a specific widget.  Both new and existing widgets will already have standard properties relating to css attributes, JavaScript events, etc.  This function can add additional custom properties.


  • config object - JavaScript object containing configuration properties

Configuration Options:

  • name - property name

  • type - type of property; possible values are:

    • color - provides for a pop-up dialog for selecting a color

    • boolean - applicable for true/false properties

    • image - provides for a pop-up dialog to browse for an image on the IFS

    • list - asks the user to enter a comma separated list; provides for a pop-up dialog to help enter or maintain the list

    • js - JavaScript event

    • file - database file

    • field - database field

    • long - long entry field; provides for a pop-up dialog with a text area to maintain the property

  • help - help text to display at the bottom of the Properties Window in the designer

  • controls - an array of base widget names this property will be applicable to

  • category - the category name to under which the property will appear in the Properties Window; all properties must be categorized; if the specified category doesn't already exist, it is automatically created

  • choices - an array of valid choices to allow the user to select the property value; a special choice of "Other..." will allow the user to specify a custom value that does not appear on the list

  • readOnly - if set to true, the value cannot be changed in the designer; however, it may be bound to a variable

  • hideFormatting - if set to true, the formatting options cannot be selected on the binding dialog

  • validDataTypes - an array that limits the data types that the property can be bound to; for example: validDataTypes: ["indicator", "char", "zoned"]

  • format - default formatting for the property, such as "px" for pixels, "number" for a Number, or "somevalue / someothervalue" for Indicator formatting

  • translate - if set to true, the property can be populated from a phrase in the translation dictionary

  • showDesignValue - if set to true, then a bound, custom property in Visual/Node Designer will be displayed in the form: "[Field0001]". (Available in Profound UI Version 6 Fix Pack 12.0 and later.)

  • bidirectional - if set to true, then custom widgets matching names in the "controls" list can be used for both input and output for the property being added. See also pui.BasicWidget. (Available in Profound UI Version 6 Fix Pack 12.0 and later.)

  • multOccur - when set to true, values of this property can be added multiple times, like with the "css class" widget property. See the "Multiple-Occurrence Example" below. (Available in Profound UI Version 6 Fix Pack 15.0 and later.)


pui.addCustomProperty({ name: "google maps address", type: "long", help: "Specifies the full address to be mapped within Google Maps.", controls: ["google maps"], category: "Field Settings" });

Example Bidirectional Property:

This custom property would be used along with a custom widget, "color picker", which would need to supply the "constr" or "render" and "getValue" properties to pui.widgets.add.

pui.addCustomProperty({ name: "color picker value", help: 'Value to test binding on properties not named "value".', controls: ["color picker"], category: "Field Settings", showDesignValue: true, bidirectional: true });

Multiple-Occurrence Example:

The "multOccur" property allows custom properties to be used like the "css class" property, where each value is stored under a different, numbered property name, as shown below with "css class" and the custom, "custom multOccur" properties:

Adding a custom, multiple-occurrence property requires use of the multOccur flag, as shown below:

pui.addCustomProperty({ name: "custom multOccur", help: "This is a custom multOccur property", controls: ["output field"], multOccur: true, category: "Misc" });