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

[ShaileshPa]

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. 

[Anil_Chennapragada]

hi @ShaileshPa ,

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

• Leverage cq:template https://www.aem-blog.com/post/how-to-pre-populate-values-in-aem-component
• If your project not supporting MSM (multiple locales) add the value in htl using ternary operator

         variable : "authored value" : "default value"

• If the project supports MSM. add the value in i18n and read the default values from the i18n (https://www.aem-blog.com/post/how-to-pre-populate-values-in-aem-component)

Thanks,

Anil

[ShaileshPa]

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? 

[Anil_Chennapragada]

hi @ShaileshPa ,

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

[aanchal-sikka]

@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. 

[ShaileshPa]

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 ? 

[kapil_rajoria · Accepted solution]

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..."

[ShaileshPa]

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.