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
Solved! Go to Solution.
Views
Replies
Total Likes
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.
Or, is there a way to manually enter the name to each nodes instead of using ""Card Fieldset" ?
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 ?
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,
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.
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!
@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!
Views
Replies
Total Likes