Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

default field valur in dialog does not appear for an existing component

Avatar

Level 2

Hi , 

 

I am trying to enhance one of my custom component by adding an additional field on dialog . Nature of field is mandatory ( i.e. required="{Boolean}true" ) and hence we have put default text ( value="some text" . But this mechanism works only when the enhanced component is dragged ( and dropped ) newly on a page. For an existing instace the default values do not get populated ( even if I try to open the dialog and edit ). Some event is triggered for new instance (drag-n-drop) but not able to capture that event in edit-config or somewhere else. Also there is a potential risk that if I am able to find that event and trigger it using custom js function the other existing fields values as well will be overwritten ( or made blank). Anyone faced this issue especially enhancement of existing dialog ? can this be addressed by making use of design-dialog  ? 

 

Regards

Shailesh

 

sample code 

 

<title
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Field Description"
fieldLabel="Title"
maxlength="{Long}50"
name="./title"
required="{Boolean}true"
value="Default Text in case Author does not want to put anything"/>
 
the value field is not getting populated in existing instances of component. 
Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 6

Hi @ShaileshPa did you try by writing a custom JS on the dialog to populate some text in RTE/textfield?
You can use something like: (chatGPT generated code)

;(function (window, $) {
    'use strict';
    var RichTextDefaultContent = function () {
        var CONST = {
            TARGET_GRANITE_UI: '.coral-RichText-editable'
        };

        function init() {
            $(document).on('foundation-contentloaded', function () {
                $(CONST.TARGET_GRANITE_UI).each(function() {
                    var $rteField = $(this);
                    var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
                    var defaultContent = $field.attr('data-default') || 'Enter your default content here...';

                    if ($rteField.text().trim().length === 0) {
                        $rteField.html(defaultContent);
                        $rteField.data('default-set', true);
                    }
                });
            });

            // Register the validator
            $(window).adaptTo('foundation-registry').register('foundation.validation.validator', {
                selector: CONST.TARGET_GRANITE_UI,
                validate: function (el) {
                    var $rteField = $(el);
                    var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
                    var defaultContent = $field.attr('data-default') || 'Enter your default content here...';

                    if ($rteField.text().trim().length === 0) {
                        $rteField.html(defaultContent);
                    }
                    return null; // No validation logic needed for default content
                }
            });

            // Ensure default content is saved
            $(document).on('submit', 'form', function () {
                $(CONST.TARGET_GRANITE_UI).each(function() {
                    var $rteField = $(this);
                    var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
                    var defaultContent = $field.attr('data-default') || 'Enter your default content here...';

                    if ($rteField.text().trim() === defaultContent) {
                        $rteField.empty(); // Prevent submitting default content as actual value
                    } else {
                        $field.val($rteField.html()); // Save the actual RTE content
                    }
                });
            });
        }
        return {
            init: init
        }
    }();
    RichTextDefaultContent.init();
})(window, Granite.$);

In the dialog's XML, make sure to add the extraClientlibs on top and data-default attribute inside RTE/textfield tag. For Example: data-default = "default content..."

View solution in original post

7 Replies

Avatar

Level 4

hi @ShaileshPa ,

please consider other simpler options (few below)  to achieve this rather than customizations 

         variable : "authored value" : "default value"

Thanks,

Anil

Avatar

Level 2

Hi Anil, 

 

thanks for the quick responce , I will try these options although a quick question is all these solutions will work on "include of the component" i.e. when the component is dropped newly , but I already have high number of instances where this new field is added, and i want these existing instances also to have this value populated, how will that work? 

Avatar

Level 4

hi @ShaileshPa ,

yes, second/3rd option  changes are being made on HTL. So it will work for the existing components as well 

Avatar

Community Advisor

@ShaileshPa 

 

It may be easier to manage the Default Value by Sling Models.

 @Default annotation

@Default allows to specify default value for fields (including arrays)

@ValueMapValue
@Default(values="Contact Us")
private String title;

@ValueMapValue @Default(intValues={1,2,3,4})
private int[] integers;

Ref: https://techrevel.blog/2017/03/18/sling-model-annotations/

 

For new instances, the UI will ascertain that value is persisted. For old, you can use a default value. You can also make the default value configurable, by configuring it via policies. 

 


Aanchal Sikka

Avatar

Level 2

Hi Aanchal,

 

as you said

For new instances, the UI will ascertain that value is persisted. For old, you can use a default value. You can also make the default value configurable, by configuring it via policies. 

 

For old instances @default did not work to populate value on component node , as this is an enhancement to existing content/node , will @default work to populate value ? 

Avatar

Correct answer by
Level 6

Hi @ShaileshPa did you try by writing a custom JS on the dialog to populate some text in RTE/textfield?
You can use something like: (chatGPT generated code)

;(function (window, $) {
    'use strict';
    var RichTextDefaultContent = function () {
        var CONST = {
            TARGET_GRANITE_UI: '.coral-RichText-editable'
        };

        function init() {
            $(document).on('foundation-contentloaded', function () {
                $(CONST.TARGET_GRANITE_UI).each(function() {
                    var $rteField = $(this);
                    var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
                    var defaultContent = $field.attr('data-default') || 'Enter your default content here...';

                    if ($rteField.text().trim().length === 0) {
                        $rteField.html(defaultContent);
                        $rteField.data('default-set', true);
                    }
                });
            });

            // Register the validator
            $(window).adaptTo('foundation-registry').register('foundation.validation.validator', {
                selector: CONST.TARGET_GRANITE_UI,
                validate: function (el) {
                    var $rteField = $(el);
                    var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
                    var defaultContent = $field.attr('data-default') || 'Enter your default content here...';

                    if ($rteField.text().trim().length === 0) {
                        $rteField.html(defaultContent);
                    }
                    return null; // No validation logic needed for default content
                }
            });

            // Ensure default content is saved
            $(document).on('submit', 'form', function () {
                $(CONST.TARGET_GRANITE_UI).each(function() {
                    var $rteField = $(this);
                    var $field = $rteField.closest('.richtext-container').find('input.coral-Form-field');
                    var defaultContent = $field.attr('data-default') || 'Enter your default content here...';

                    if ($rteField.text().trim() === defaultContent) {
                        $rteField.empty(); // Prevent submitting default content as actual value
                    } else {
                        $field.val($rteField.html()); // Save the actual RTE content
                    }
                });
            });
        }
        return {
            init: init
        }
    }();
    RichTextDefaultContent.init();
})(window, Granite.$);

In the dialog's XML, make sure to add the extraClientlibs on top and data-default attribute inside RTE/textfield tag. For Example: data-default = "default content..."

Avatar

Level 2

yeah, finally we opted to create our own js function which load on on-dialog-open and then detect the mandatory field and then fill them with desired value. although its a workaround its working now as expected.