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

Question

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.

kapil_rajoria · Accepted Answer

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

aanchal-sikka · Answer

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

@Default annotation

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded