Change the card name in multifield component

[HanL]

Hi 
I have an AEM component which uses multifield,

<cardsTab jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container"
                jcr:title="Card Configuration">
                <items jcr:primaryType="nt:unstructured">
                    <cards jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        fieldLabel="Cards">
                        <field jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./cards">
                            <items jcr:primaryType="nt:unstructured">
                                <cardFieldset jcr:primaryType="nt:unstructured"
                                    jcr:title="cardFieldset"
                                    sling:resourceType="granite/ui/components/foundation/layouts/collapsible"
                                    collapsed="{Boolean}false">
                                    <items jcr:primaryType="nt:unstructured">
                                        <cardTitle
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            allowBulkEdit="{Boolean}true"
                                            fieldLabel="Card Title"
                                            name="./cardTitle"
                                            renderReadOnly="{Boolean}true" />
                                        <editorialImage
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            allowBulkEdit="{Boolean}true"
                                            fieldLabel="Image"
                                            name="./fileReference"
                                            renderReadOnly="{Boolean}true"/>
                                        <cardDescription
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceSuperType="/apps/fidelity/common/common-dialog/rich-text/text"
                                            sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                            externalStyleSheets="[/apps/fidelity/common/clientlibs/clientlib-site/css/site.css]"
                                            fieldLabel="Editorial Card Description"
                                            name="./cardDescription"
                                            required="{Boolean}false"
                                            useFixedInlineToolbar="{Boolean}true"/>
                                        <timeToCompleteGroup
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
                                            fieldLabel="Time to Complete"
                                            columns="2">
                                            <items jcr:primaryType="nt:unstructured">
                                                <!-- 1. Text Field for the numeric input -->
                                                <timeToCompleteValue
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    name="./timeToCompleteValue"
                                                    fieldLabel="Duration"
                                                    allowBulkEdit="{Boolean}true"
                                                    renderReadOnly="{Boolean}true"
                                                    cq:showOnCreate="{Boolean}true"
                                                    />
                                                <!-- 2. Drop-down (Select) for choosing Hours or Days -->
                                                <timeUnit
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                    name="./timeUnit"
                                                    fieldLabel="Unit"
                                                    allowBlank="{Boolean}false"
                                                    cq:showOnCreate="{Boolean}true">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <hours
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Hours"
                                                    value="hours"/>
                                                    <days
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Days"
                                                    value="days"/>
                                                </items>
                                                </timeUnit>
                                            </items>
                                        </timeToCompleteGroup>
                                        <authorName
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            emptyText="AuthorName"
                                            fieldLabel="AuthorName"
                                            multiple="{Boolean}true"
                                            name="./authorName"/>
                                        <authorTitle
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            emptyText="AuthorTitle"
                                            fieldLabel="AuthorTitle"
                                            multiple="{Boolean}true"
                                            name="./authorTitle"/>
                                        <originalPublished
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                            fieldDescription="published date of the document"
                                            fieldLabel="Original Published Date"
                                            name="./originalPublished"
                                            type="datetime"/>
                                        <filter
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="cq/gui/components/coral/common/form/tagfield"
                                            allowBulkEdit="{Boolean}true"
                                            autocreateTag="{Boolean}true"
                                            fieldLabel="Filter"
                                            multiple="{Boolean}true"
                                            name="./filter"/>
                                        <media
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                            emptyText="Please select an optional media type"
                                            fieldLabel="Media Type"
                                            name="./mediaType">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <video
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Video"
                                                        value="video"/>
                                                    <podcast
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Podcast"
                                                        value="podcast"/>
                                                </items>
                                        </media>
                                        <redirect
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            jcr:title="Redirect Options"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                            <items jcr:primaryType="nt:unstructured">
                                                <redirectTarget
                                                    cq:showOnCreate="{Boolean}true"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                    fieldLabel="Redirect Target"
                                                    name="./redirectTarget"
                                                    required="{Boolean}false"/>
                                                <redirectStatus
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                    fieldDescription="The redirect status tells the user if this is a permanent change or temporary"
                                                    fieldLabel="Redirect Status"
                                                    name="./redirectStatus"
                                                    required="{Boolean}true">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <permanent
                                                            jcr:primaryType="nt:unstructured"
                                                            text="Permanent"
                                                            value="301"/>
                                                        <temporary
                                                            jcr:primaryType="nt:unstructured"
                                                            text="Temporary"
                                                            value="302"/>
                                                    </items>
                                                </redirectStatus>
                                            </items>
                                        </redirect>
                                    </items>
                                </cardFieldset>
                            </items>
                        </field>
                    </cards>
                </items>
            </cardsTab>

And it looks like this 

 Is there a way to change "Card Fieldset" title to actual card title

Thank you

[HanL]

Or, is there a way to manually enter the name to each nodes instead of using ""Card Fieldset" ?

[Tethich]

Hi @HanL 

I am assuming you want to see a list of items each with its own title for easy editing.

Have you tried to remove the jcr:title="cardFieldset" from dialog definition, and then dynamically set this property on each multifield item within JCR, either by using maybe a custom js clientlib or maybe a listener, setting its value equal to the  card title field value ?

[Shiv_Prakash_Patel]

Hi @HanL ,

You can achieve this with custom JavaScript to dynamically updates the corresponding card title.

Example:

Update your dialog XML's multifield has uniquely selectable child nodes and identifiers for scripting.

<dialog
    xmlns="http://www.w3.org/ns/jcr"
    jcr:primaryType="nt:unstructured"
    title="Multifield Example">
    <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <multifield
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                class="custom-multifield">
                <field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container">
                    <items jcr:primaryType="nt:unstructured">
                        <text
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            name="./cardName"
                            class="card-name-field"
                            fieldLabel="Card Name"/>
                    </items>
                </field>
            </multifield>
        </items>
    </content>
</dialog>

Create a custom clientlib at the dialog level to listen for changes in the cardName field and dynamically update the card title.

$(document).on("dialog-ready", function () {
    // Target the custom multifield
    const multifieldSelector = ".custom-multifield";
    const cardNameFieldSelector = ".card-name-field";

    $(multifieldSelector).on("change", cardNameFieldSelector, function () {
        const $field = $(this);
        const newName = $field.val();

        // Find the corresponding card title
        const $card = $field.closest(".coral-Multifield-item");
        if ($card.length) {
            $card.find(".coral-Multifield-title").text(newName);
        }
    });
});

Regards,

[konstantyn_diachenko · Accepted solution]

Hi @HanL ,

I see that you mixed up Coral 2 and Coral 3 components in the dialog. I know alternative for collapsible. Below you can find a code:

<cardsTab jcr:primaryType="nt:unstructured"
          sling:resourceType="granite/ui/components/coral/foundation/container"
          jcr:title="Card Configuration">
    <items jcr:primaryType="nt:unstructured">
        <cards jcr:primaryType="nt:unstructured"
               sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
               composite="{Boolean}true"
               fieldLabel="Cards">
            <field jcr:primaryType="nt:unstructured"
                   sling:resourceType="granite/ui/components/coral/foundation/accordion"
                   name="./cards">
                <items jcr:primaryType="nt:unstructured">
                    <cardFieldset jcr:primaryType="nt:unstructured"
                                  jcr:title="cardFieldset"
                                  sling:resourceType="granite/ui/components/coral/foundation/container"
                                  collapsed="{Boolean}false">
                        <granite:data jcr:primaryType="nt:unstructured"
                                      child-title-control-selector=".child-title-control">

                        </granite:data>
                        <items jcr:primaryType="nt:unstructured">
                            <cardTitle
                                    granite:class="child-title-control"
                                    cq:showOnCreate="{Boolean}true"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    allowBulkEdit="{Boolean}true"
                                    fieldLabel="Card Title"
                                    name="./cardTitle"
                                    renderReadOnly="{Boolean}true" />
                            <editorialImage
                                    cq:showOnCreate="{Boolean}true"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    allowBulkEdit="{Boolean}true"
                                    fieldLabel="Image"
                                    name="./fileReference"
                                    renderReadOnly="{Boolean}true"/>
                            <cardDescription
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceSuperType="/apps/fidelity/common/common-dialog/rich-text/text"
                                    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                    externalStyleSheets="[/apps/fidelity/common/clientlibs/clientlib-site/css/site.css]"
                                    fieldLabel="Editorial Card Description"
                                    name="./cardDescription"
                                    required="{Boolean}false"
                                    useFixedInlineToolbar="{Boolean}true"/>
                            <timeToCompleteGroup
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
                                    fieldLabel="Time to Complete"
                                    columns="2">
                                <items jcr:primaryType="nt:unstructured">
                                    <!-- 1. Text Field for the numeric input -->
                                    <timeToCompleteValue
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            name="./timeToCompleteValue"
                                            fieldLabel="Duration"
                                            allowBulkEdit="{Boolean}true"
                                            renderReadOnly="{Boolean}true"
                                            cq:showOnCreate="{Boolean}true"
                                    />
                                    <!-- 2. Drop-down (Select) for choosing Hours or Days -->
                                    <timeUnit
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                            name="./timeUnit"
                                            fieldLabel="Unit"
                                            allowBlank="{Boolean}false"
                                            cq:showOnCreate="{Boolean}true">
                                        <items jcr:primaryType="nt:unstructured">
                                            <hours
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Hours"
                                                    value="hours"/>
                                            <days
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Days"
                                                    value="days"/>
                                        </items>
                                    </timeUnit>
                                </items>
                            </timeToCompleteGroup>
                            <authorName
                                    cq:showOnCreate="{Boolean}true"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    emptyText="AuthorName"
                                    fieldLabel="AuthorName"
                                    multiple="{Boolean}true"
                                    name="./authorName"/>
                            <authorTitle
                                    cq:showOnCreate="{Boolean}true"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    emptyText="AuthorTitle"
                                    fieldLabel="AuthorTitle"
                                    multiple="{Boolean}true"
                                    name="./authorTitle"/>
                            <originalPublished
                                    cq:showOnCreate="{Boolean}true"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                    fieldDescription="published date of the document"
                                    fieldLabel="Original Published Date"
                                    name="./originalPublished"
                                    type="datetime"/>
                            <filter
                                    cq:showOnCreate="{Boolean}true"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="cq/gui/components/coral/common/form/tagfield"
                                    allowBulkEdit="{Boolean}true"
                                    autocreateTag="{Boolean}true"
                                    fieldLabel="Filter"
                                    multiple="{Boolean}true"
                                    name="./filter"/>
                            <media
                                    cq:showOnCreate="{Boolean}true"
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                    emptyText="Please select an optional media type"
                                    fieldLabel="Media Type"
                                    name="./mediaType">
                                <items jcr:primaryType="nt:unstructured">
                                    <video
                                            jcr:primaryType="nt:unstructured"
                                            text="Video"
                                            value="video"/>
                                    <podcast
                                            jcr:primaryType="nt:unstructured"
                                            text="Podcast"
                                            value="podcast"/>
                                </items>
                            </media>
                            <redirect
                                    cq:showOnCreate="{Boolean}true"
                                    jcr:primaryType="nt:unstructured"
                                    jcr:title="Redirect Options"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                <items jcr:primaryType="nt:unstructured">
                                    <redirectTarget
                                            cq:showOnCreate="{Boolean}true"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                            fieldLabel="Redirect Target"
                                            name="./redirectTarget"
                                            required="{Boolean}false"/>
                                    <redirectStatus
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                            fieldDescription="The redirect status tells the user if this is a permanent change or temporary"
                                            fieldLabel="Redirect Status"
                                            name="./redirectStatus"
                                            required="{Boolean}true">
                                        <items jcr:primaryType="nt:unstructured">
                                            <permanent
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Permanent"
                                                    value="301"/>
                                            <temporary
                                                    jcr:primaryType="nt:unstructured"
                                                    text="Temporary"
                                                    value="302"/>
                                        </items>
                                    </redirectStatus>
                                </items>
                            </redirect>
                        </items>
                    </cardFieldset>
                </items>
            </field>
        </cards>
    </items>
</cardsTab>

Example of JS library (categories=[cq.authoring.dialog.all]):

(function (document, $) {
    'use strict';

    $(document).on("foundation-contentloaded", function (e) {
        $('[data-child-title-control]').each(function() {
            var $this = $(this);
            var childTitleControlSelector = $this.data('child-title-control-selector');
            var $input = $this.find(childTitleControlSelector);
            if (!$input || !$input.val()) {
                return
            }

            var $accordionItem = $this.closest('._coral-Accordion-item')[0];
            if (!$accordionItem) {
                return
            }
            $accordionItem.label.textContent = $input.val()
        });
    });

})(document, Granite.$);

 Best regards,

Kostiantyn Diachenko.

[kapil_rajoria]

Hi @HanL , it is not worth it to make the field names dynamic. Even if you are able to it would cost you a huge amount of time and efforts.
Instead, I would suggest you to make a new component of whatever inside is multifield and then use data-sly-resource to add that component inside data-sly-list.
You can then easily dynamically give the title of each multifield element using HTL.
On clicking the + sign, one field will be card title and other will be component. When you put the appropriate titles and click ok, you will get the required titles along with the containers.
This way the UI(authoring perspective) will also remain nice.
Let me know if you need any help!

[kautuk_sahni]

@HanL Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!