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.