AEM Granite UI Coral 3 Number Field Default Value

AEM Touch UI
briankasingli

AEM Granite UI Coral 3 Number Field Default Value

This article is for how can we set the default positive or negative integer value for the Granite UI 1.0 Coral 3 numberfield, granite/ui/components/coral/foundation/form/numberfield.

Apparently the Granite UI 1.0 documentation for the granite/ui/components/coral/foundation/form/numberfield, does not support default value configuration for the numberfield. Keep reading…

I mean, they do… you can set a default value for the granite/ui/components/coral/foundation/form/numberfield by setting the value property with a positive or negative integer; this works well when a new component is dragged into your editable page, but components that are already exist in the authored page will not be able to set this default value.

This is an example of the Touch UI XML configuration, set with the value of 100; this works well when a new component is dragged into your editable page, but components that are already exist in the authored page will not be able to set this default value. This is a problem for existing components because this configuration will set the value to BLANK, when the component is being saved.

Follow this blog below to solve this problem.
Here you can see line:9 it has a value set to 100.

1
2
3
4
5
6
7
8
9
10
<numberfieldExample
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
   allowDecimals="false"
   allowNegative="true"
   fieldLabel="Number Field"
   name="./numberfieldExample"
   required="{Boolean}true"
   value="100">
</numberfieldExample>

Example of existing components not able to make visible, the value property (default value); however, for all new components that are dragged on the page, the default value is set accordingly.
Example of existing components not able to make visible, the value property (default value); however, for all new components that are dragged on the page, the default value is set accordingly.

Solving this problem with Custom Code

We can solve this problem by introducing a new client library to the author’s editor.html. The client library should have dependencies=”[cq.authoring.editor.sites.page] and categories=”[cq.authoring.editor.sites.page.hook].

What is actually happening in the code below is that it tries to find all coral3-NumberInput, input fields, from the Touch UI popup. And then, for each input field element, wether if the element is empty and has a non-empty data-default value (HTML data attribute). When this condition is met, the empty input field will set the defaultValue. If a value exists for the input field element, it will be left alone.

The code is very simple, take a look at the implementation below:
Custom JavaScript to the editor.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function (document, $) {
    "use strict";
    // trigger function after foundation-contentloaded
    $(document).on("foundation-contentloaded", function (e) {
        // find all coral3-NumberInput from the Touch UI popup from the editor.html
        setDefaultValue($(".coral3-NumberInput", e.target));
    });
    function setDefaultValue(el) {
        el.each(function (i, element) {
            var $el = $(element);
            if ($el.length > 0) {
                var fieldVal = $el.val();
                var defaultVal = $el.data('defaultvalue');
                if (!fieldVal && defaultVal) {
                    $el.val(defaultVal);
                }
            }
        })
    }
})(document, Granite.$);
AEMaaCS Changes:
I realized AEMaaCS uses difference CSS classes when the granite/ui/components/coral/foundation/form/numberfield is rendered on the touch UI, and the Javascript above needs to be improved. Please try to use the JS below to get it working as expected, when working with AEMaaCS. line:6 is the change where we are targeting the coral-numberinput element instead.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function (document, $) {
    "use strict";
    // trigger function after foundation-contentloaded
    $(document).on("foundation-contentloaded", function (e) {
        // find all <coral-numberinput> from the Touch UI popup from the editor.html
        setDefaultValue($("coral-numberinput", e.target));
    });
    function setDefaultValue(el) {
        el.each(function (i, element) {
            var $el = $(element);
            if ($el.length > 0) {
                var fieldVal = $el.val();
                var defaultVal = $el.data('defaultvalue');
                if (!fieldVal && defaultVal) {
                    $el.val(defaultVal);
                }
            }
        })
    }
})(document, Granite.$);

XML Touch UI configuration
Please notice the granite:data field that has been added from line 9-11. The custom JavaScript will read the defaultValue property from this block of code, and will use it to configure the default integer for this field.

1
2
3
4
5
6
7
8
9
10
11
12
<numberfieldExample
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
   allowDecimals="false"
   allowNegative="true"
   fieldLabel="Number Field"
   name="./numberfieldExample"
   required="{Boolean}true">
    <granite:data
       jcr:primaryType="nt:unstructured"
       defaultValue="100"/>
</numberfieldExample>

Example of existing components now able to set the default value accordingly.
Example of existing components now able to set the default value accordingly.

Installing the Custom Code to the Editor.html

If you would like to skip all the steps below, download the entire client library example, click here (please understand that this code is not deployable to AEM).

Step 1.
Create a new folder in your project like
path: /apps/sourcedcode/clientlibs/clientlib-authoring-numberfield-example

Step 2.
Create an .content.xml file right under the folder with contents like:
path: /apps/sourcedcode/clientlibs/clientlib-authoring-numberfield-example/.content.xml

1
2
3
4
5
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    dependencies="[cq.authoring.editor.sites.page]"
    categories="[cq.authoring.editor.sites.page.hook]"/>

Step 3.
Create an empty css.txt file right under the folder like:
path: /apps/sourcedcode/clientlibs/clientlib-authoring-numberfield-example/css.txt

Step 4.
Create a js.txt file right under the folder like below with the contents:
path: /apps/sourcedcode/clientlibs/clientlib-authoring-numberfield-example/js.txt

1
2
#base=js
granite-ui-numberfield-default-value.js
If you would like to skip all the steps below, download the entire client library example, click here (please understand that this code is not deployable to AEM).

Step 5.
Create an empty js folder under that folder that just have been created like:
path: /apps/sourcedcode/clientlibs/clientlib-authoring-numberfield-example/js

Step 6.
Create a JavaScript file within the js folder with the contents:
path: /apps/sourcedcode/clientlibs/clientlib-authoring-numberfield-example/js/granite-ui-numberfield-default-value.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function (document, $) {
    "use strict";
    // trigger function after foundation-contentloaded
    $(document).on("foundation-contentloaded", function (e) {
        // find all coral3-NumberInput from the Touch UI popup from the editor.html
        setDefaultValue($(".coral3-NumberInput", e.target));
    });
    function setDefaultValue(el) {
        el.each(function (i, element) {
            var $el = $(element);
            if ($el.length > 0) {
                var fieldVal = $el.val();
                var defaultVal = $el.data('defaultvalue');
                if (!fieldVal && defaultVal) {
                    $el.val(defaultVal);
                }
            }
        })
    }
})(document, Granite.$);
AEMaaCS Changes:
I realized AEMaaCS uses difference CSS classes when the granite/ui/components/coral/foundation/form/numberfield is rendered on the touch UI, and the Javascript above needs to be improved. Please try to use the JS below to get it working as expected, when working with AEMaaCS. line:6 is the change where we are targeting the coral-numberinput element instead.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function (document, $) {
    "use strict";
    // trigger function after foundation-contentloaded
    $(document).on("foundation-contentloaded", function (e) {
        // find all <coral-numberinput> from the Touch UI popup from the editor.html
        setDefaultValue($("coral-numberinput", e.target));
    });
    function setDefaultValue(el) {
        el.each(function (i, element) {
            var $el = $(element);
            if ($el.length > 0) {
                var fieldVal = $el.val();
                var defaultVal = $el.data('defaultvalue');
                if (!fieldVal && defaultVal) {
                    $el.val(defaultVal);
                }
            }
        })
    }
})(document, Granite.$);

Step 7.
Use your maven skills to push the code into AEM.

If you would like to download the entire client library example, click here (please understand that this code is not deployable to AEM).
Hello, I am an enthusiastic Adobe Community Advisor and a seasoned Lead AEM Developer. I am currently serving as an AEM Technical Lead at MNPDigital.ca, bringing over a decade of extensive web engineering experience and more than eight years of practical AEM experience to the table. My goal is to give back to the AEM Full Stack Development community by sharing my wealth of knowledge with others. You can connect with me on LinkedIn.
Website https://www.linkedin.com/in/briankasingli

4 thoughts on “AEM Granite UI Coral 3 Number Field Default Value”

Leave a Reply

Your email address will not be published. Required fields are marked *


Related Posts

Back To Top