Skip to main content

Settings

Item Options

Interactive Grid

Settings

Here you can set up options of your UC AutoNumeric field. For more options and details please visit the AutoNumeric configurator.

Alignment

Field uses alignment defined by the column attribute.

Padding size

If you use coloring css styles or ranges add class "padding-none" to columns to get full size.
In this plug-in, the default setting per IG column is "padding:0px";

Form item

Usage

It can be used with the following sample :

apex.item("ITEM_NAME").setValue("3432.32");
apex.item("ITEM_NAME").getValue();

Alignment

This is now a declarative option. If not defined, the default setting from Component Settings will be applied.

Item Options & Examples

In this section are some default examples on how to use item options. For more options and details please visit the AutoNumeric Configurator.

Options can be per plug-in instance or a global setting.
Global setting can be in two types :

  1. Global JS variable (page, global)
    Example :
    javascript var an_options = { currencySymbol: " €", currencySymbolPlacement: "s", styleRules: { positive: "u-color-4", negative: "u-color-9" } };
  2. Substitution string (Examples: &AI_AN_OPTIONS., &APP_AN_OPTIONS.)

Default

{
"currencySymbol": " €",
"currencySymbolPlacement": "s"
}

Format 1.000.000,00

{
"currencySymbol": " €",
"currencySymbolPlacement": "s",
"decimalCharacter": ",",
"decimalCharacterAlternative": ".",
"digitGroupSeparator": "."
}

Simple style

{
"styleRules": {
"positive": "u-color-4",
"negative": "u-color-9"
}
}

Range style

{   "currencySymbol": " %",
"currencySymbolPlacement": "s",
"styleRules": {
"ranges": [
{
"min": 0,
"max": 25,
"class": "u-color-2"
},
{
"min": 25,
"max": 50,
"class": "u-color-4"
},
{
"min": 50,
"max": 75,
"class": "u-color-8"
},
{
"min": 75,
"max": 100,
"class": "u-color-9"
}
]
}
}

CSS Style

To use styles or range style add the following css inline

/* Form item */
.apex-item-text.apex-item-autonumeric.u-color-4:focus {
background-color: #3CAF85 !important;
fill: #3CAF85 !important;
color: #f0faf6 !important;
}
.apex-item-text.apex-item-autonumeric.u-color-9:focus {
background-color: #E95B54 !important;
fill: #E95B54 !important;
color: #f0faf6 !important;
}

/* Interactive grid */
.ig-div-autonumeric .apex-item-text:focus.u-color-4:focus {
background-color: #3CAF85 !important;
fill: #3CAF85 !important;
color: #f0faf6 !important;
}

.ig-div-autonumeric .apex-item-text:focus.u-color-9:focus {
background-color: #E95B54 !important;
fill: #E95B54 !important;
color: #f0faf6 !important;
}
.ig-div-autonumeric .apex-item-text:focus.u-color-2:focus {
background-color: #13B6CF !important;
fill: #13B6CF !important;
color: #f0faf6 !important;
}

.ig-div-autonumeric .apex-item-text:focus.u-color-8:focus {
background-color: #ED813E !important;
fill: #ED813E !important;
color: #f0faf6 !important;
}

More on css classes on Universal Theme references.