Configuring properties for screens, widgets, and other items with the web UI framework

Use the Properties view in the Designer Workbench to work with the properties of the canvas widgets. The Properties view settings work in conjunction with the settings in the Configure Properties dialog box.

About this task

For more information about widget properties, refer to the Ext JS framework documentation for Version 2.2.1 or Version 3.0.2.

Procedure

  1. Select that widget in the Tree View.
    Note: The button/links present in a base screen will still continue to function unless you provide your action/click handler in the Properties View and click on Refresh Instances to apply those changes (If you directly click on a button/link on the canvas, you might lose your changes if the action redirects you to another page). Hence, it would be best to select and edit these controls through the Tree View instead of the canvas.
  2. Make sure that the tab for that widget is showing in the foreground of the Properties view, and not the tab for the screen (which always shows in either the foreground or the background).

    For example, if you select a trigger widget in the Tree View, tabs will show for both the screen and the widget.

    The Tree View window above the Properties widget
  3. To change the type or value of an existing property, click in the Type or Value field for that property, and make your change.

    For example, for a text field, you could change the Type from string to an expression (expr), and then enter an expression in the Value field.

  4. Add a property.
    1. Use the down arrow by the Add button to select a new property. The dropdown list shows all of the available properties for that widget that are not default properties.
    2. Click the Add button.

      The property appears with the other properties. The default type for that property appears in the Type field.

    3. If necessary, change the default type to an expression (expr).
    4. Enter a value for the property.
    5. Change the property name to a unique name.

    For example, for a button, you could add an enableToggle property, leave its type as boolean, and set its value to true.

  5. Continue working with the screen.