| Value | Description |
|---|---|
| ClassName | HTML class selector that can be formatted by a CSS style definition. |
True
|
ClassName is added to the
list of classes specified by the class attribute of the HTML element bound to a
Uniface object. |
False
|
ClassName is removed from
the list of classes specified by the class attribute |
Usage
| Dynamic? | Yes |
| Dependencies: | Widget must support the html:class property |
Description
The
class:ClassName property enables you to change the styling of
HTML elements that are bound to Uniface objects, without replacing the complete value of the
class attribute. You can add or remove a class in the list, without affecting
other classes. This is in contrast to the html:class property, which replaces
the entire list of classes.
Changing the Classes in the HTML Class Attribute
By its very nature,
class:ClassName is a dynamic property, which can be manipulated
in ProcScript and JavaScript. It can be set in ProcScript $fieldproperties for field-level
DSP widgets (including the AttribtuesOnly widget) or $occproperties to set
occurrence properties.
In JavaScript, you can use the following JavaScript API functions on the uniface.Field or uniface.Occurrence object, as applicable:
- getProperty
- getProperties
- setProperty
- setProperties
- clearProperty
- clearProperties
Note: Although you can set
class:ClassName in the More Properties
dialog box, this is not recommended. Adding a class here makes it a static property and forces the
ClassName to uppercase. To specify static classes, it is better to use the
Style Class (html:class) property.
To add a class to the HTML class attribute of an
occurrence, set the property to true. For example:
putitem/id $occproperties (MYENT), "class:selected","True"
vOcc.setProperty("class:selected","true")
To remove a class from an element's classes (in
this case a field), set it to false:
putitem/id $fieldproperties (FLD1.MYENT), "class:selected", "false"
vField.setProperty("class:selected","false")
To reset the class attribute to its original
values, preface the class:ClassName with an exclamation mark:
putitem $fieldproperties (FLD1.MYENT), "!class:selected"
vField.setProperty("!class:selected")
Case Sensitive Class Names
Unlike other types of properties, the
ClassName is case-sensitive, although the class prefix is not.
Thus, CLASS:myClass and class:myClass describe the same property,
whereas class:MYCLASS and class:myclass describe different
properties.
When using putitem/id with the
ProcScript $fieldpropertiesand $occproperties functions, you can
use the
/case switch to make the property (including class prefix)
case sensitive.
Styling Odd and Even Occurrences
Assume that you have a CSS in which the class
names background-even and class:background-odd are used to style
rows in a table. The following code adds the class for each occurrence depending on whether it is
even-numbered or odd-numbered:
; Determine whether current occurrence number is even
if (($curocc(<$entname>)%2) = 0)
;If it is, add the class background-even
putitem/id $occproperties("<$entname>"), "class:background-even", "true"
else
;Otherwise, add the class background-odd
putitem/id $occproperties("<$entname>"), "class:background-odd", "true"
endif
Applies To
All DSP widgets that support the html:class property:
