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 and 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 the 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 you 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 the user access, the 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