psImageCSSClass - cWebColumnImage

Specifies the CSS class to use for setting static column images

Type: Property
Access: Read/Write
Data Type: String
Parameters: None

Syntax

{ WebProperty=Client }
Property String psImageCSSClass

Access Type	Syntax
Read Access:	WebGet psImageCSSClass to StringVariable
Write Access:	WebSet psImageCSSClass to StringVariable/Value

Description

The psImageCSSClass property allows you to specify the image to display in this column via CSS. Set psImageCSSClass to the name of the CSS class you wish to use. This CSS class should set the background-image property to specify the URL of the image you wish to be displayed.

In order to use the psImageCSSClass property, you must ensure that the following additional properties are set:

(i) pbImageByCSS must be set to True. (ii) pbDynamic must be set to False.

Specifying the Image Size

When specifying the image via the CSS background-image, you need to also specify the height and width for the image. The background-image style property of an HTML element is not considered 'content', thus the browser will render it with a zero size unless the element is given a fixed size.

There are two ways to assign a fixed size for displaying images via CSS:

(i) You can set the DataFlex piImageHeight and piImageWidth properties, (ii) You can set the height and width CSS properties in the CSS class you are using.

Sample

This example demonstrates how to declare a CSS class that specifies a background-image URL where the image height and width are also specified in the CSS class. This CSS class would normally be declared in the workspace's application.css file. Below the CSS class declaration is an example cWebColumnImage object declaration that displays its image by referencing this CSS class.

#OWEBAPP .DemoCustomerIcon{
    background-image: url('../Images/Order.png');
    width: 16px;
    height: 16px;
}

Object oWebColumnImage1 is a cWebColumnImage
    Set pbImageByCSS to True
    Set psImageCSSClass to "DemoCustomerIcon"
    Set piWidth to 50
End_Object

Sample

This example demonstrates how to declare a CSS class that specifies a background-image URL where the height and width are specified in the DataFlex object. The CSS class would normally be declared in the workspace's application.css file.

Below the CSS class declaration is an example cWebColumnImage object declaration that displays its image by referencing this CSS class. Note that the piImageHeight and piImageWidth properties are set in the DataFlex object to specify the size of the image to be displayed. The piWidth property declares the width of the actual column and is independent of the image size.

#OWEBAPP .DemoCustomerIcon{
    background-image: url('../Images/Order.png');
}

Object oWebColumnImage1 is a cWebColumnImage
    Set pbImageByCSS to True
    Set psImageCSSClass to "DemoCustomerIcon"
    Set piWidth to 50
    Set piImageHeight to 16
    Set piImageWidth to 16
End_Object

About Web Properties

Each web property maintains two values: The regular property value is set during object creation and should not be changed during the lifetime of that object. To access that value, use the standard property Get and Set syntax.

The web property value is the local value stored at each client. This is synchronized to the client's local value whenever a server call is being processed. To access the web property value, use the WebGet and WebSet syntax above instead of the standard Get and Set syntax.

About Web Properties

Each web property maintains two values: The regular property value is set during object creation and should not be changed during the lifetime of that object. To access that value, use the standard property Get and Set syntax.

The web property value is the local value stored at each client. This is synchronized to the client's local value whenever a server call is being processed. To access the web property value, use the WebGet and WebSet syntax above instead of the standard Get and Set syntax.