Managing Web Control Visibility

Positioning and Layout of Controls
Styling Web Applications

---

There are three properties that can be used to manage the visibility of a Web Control. Those properties are: - pbEnabled - pbVisible - pbRender

These properties are understood by every Web control, including cWebForm, cWebButton, cWebMenuItem, and so on. Here we will look at each of these properties and how they can be used to progressively remove the control from the user interface.

Consider these cWebForm objects from the WebCustomer.vw view:

Object oAddressTabPage is a cWebTabPage
    Set psCaption to "Address"
    Set piColumnCount to 6

    Object oCustomer_Address is a cWebForm
        Entry_Item Customer.Address
        Set psLabel to "Street Address:"
        Set piColumnSpan to 4
        Set peLabelAlign to alignRight
    End_Object

    Object oCustomer_City is a cWebForm
        Entry_Item Customer.City
        Set psLabel to "City / State / Zip:"
        Set peLabelAlign to alignRight
        Set piColumnSpan to 2
    End_Object

    Object oCustomer_State is a cWebCombo
        Entry_Item Customer.State
        Set piColumnIndex to 2
        Set peLabelAlign to alignRight
        Set pbShowLabel to False
    End_Object

    Object oCustomer_Zip is a cWebForm
        Entry_Item Customer.Zip
        Set piColumnIndex to 3
        Set peLabelAlign to alignRight
        Set pbShowLabel to False
    End_Object
End_Object

By default, all four cWebForms are enabled, visible, and rendered. In the running application, they will appear like this:

pbEnabled

The pbEnabled property is used to control user access to a web control. If pbEnabled is set to False, then the user cannot give focus to the control or edit any data that it is displaying. The control is still visible, but it will be rendered in a lighter color (according to the CSS theme you are using).

Here is what happens when pbEnabled is set to False in the oCustomer_Address object:

Object oCustomer_Address is a cWebForm
    Entry_Item Customer.Address
    Set psLabel to "Street Address:"
    Set piColumnSpan to 4
    Set peLabelAlign to alignRight
    Set pbEnabled to False
End_Object

Note how the Street Address data is rendered using the disabled-text color.

pbVisible

The pbVisible property controls user access and visibility of a web control. If pbVisible is set to False, then the user cannot give focus to the control, cannot edit any of the control’s data, and cannot see the control or its label. However, the space that the control occupies in the flow-layout is still occupied (but empty).

You should set pbVisible to False when you want to make a control invisible but do not want to affect the layout of other sibling controls.

Here is what happens when pbVisible is set to False in the oCustomer_Address object:

Object oCustomer_Address is a cWebForm
    Entry_Item Customer.Address
    Set psLabel to "Street Address:"
    Set piColumnSpan to 4
    Set peLabelAlign to alignRight
    Set pbVisible to False
End_Object

Note how the Street Address is now invisible but the position of the other controls has not changed.

pbRender

The pbRender property controls user access, visibility, and the web control’s space in the flow-layout. If pbRender is set to False, then the user cannot give focus to the control, cannot edit any of the control’s data, cannot see the control, and the space that the control would occupy in the flow-layout is relinquished to its sibling controls.

You should set pbRender to False when you want to completely remove a control from the user interface and allow its space to be occupied. cWebMenuItem is one case where you would want to set pbRender to False instead of using pbVisible. This would hide the menu item without leaving a ‘gap’.

Here is what happens when pbRender is set to False in the oCustomer_Address object:

Object oCustomer_Address is a cWebForm
    Entry_Item Customer.Address
    Set psLabel to "Street Address:"
    Set piColumnSpan to 4
    Set peLabelAlign to alignRight
    Set pbRender to False
End_Object

Note how the Street Address is invisible and the other controls have moved up to occupy that space.

---

Previous Topic: Positioning and Layout of Controls
Next Topic: Styling Web Applications

See Also

Developing Web Applications