How to Implement below use case related to Content Fragments in aem ?

[msgavali111]

Step 1)  Create a component : Disclosures

Step 2) Enable adding multiple content fragments via dialog bar of above component

Step 3) Create  a content fragment as a dropdown for Editor to select multiple Disclosures to add

By implementing this the multiple items which we are adding into the content fragment model. we have to show them as below using htl 

How to achieve this use case ?

[sarav_prakash]

What has been tried and what is the exact issue faced? Your requirement is bit incorrect. I ll shuffle your order to implement correctly. 

1. Start by creating a Content Fragment Model, "Disclosure Model".
2. Add a text field and change to Multiple field
3. 

4. Create a Content fragment using this model and author the disclosure statements 

   

5. Create a new cq:Component named "disclosure". The authoring dialog will take content fragment reference as input dialog

   

6.  Create a sling model that ll read the authored content fragment path, and returns a List of disclosure strings 

   
7. In your HTL simply iterate the list in <ul> and render the string as <li>
8. Use css to style into grid with required borders

Your requirement looks very straight and easy to implement. Unless you are facing specific issues, this must be quick to implement. 

[msgavali111]

Thanks for the response @sarav_prakash , this is exactly what i required, but i have one doubt in java code. At line no 11, you are trying to get disclosures element, but when you created the CF model you have mentioned the Property Name as disclosure, so my question is it should be same or different like disclosures and disclosure ?

[sarav_prakash]

my b. you are correct @msgavali111 keep the property name in content fragment model as `disclosures` since it is array of multiple disclosures. 

[HrishikeshKa]

Hi @msgavali111 ,

To achieve the use case of creating a component that allows adding multiple content fragments and displaying them as a dropdown, you can follow these steps:

Step 1: Create a Component - Disclosures

• Create a new component in AEM called "Disclosures" using the desired template.
• Define the necessary dialog fields for the component, such as a multifield to add multiple content fragments.

Step 2: Enable Adding Multiple Content Fragments via Dialog

• In the dialog of the "Disclosures" component, add a multifield field to allow adding multiple content fragments.
• Configure the multifield to use a specific xtype, such as "cq/gui/components/authoring/dialog/fieldset" or "granite/ui/components/coral/foundation/form/multifield".
• Within the multifield, configure the individual fields to allow selecting content fragments. You can use the "pathfield" xtype to provide a dropdown for selecting content fragments.

Step 3: Create a Content Fragment as a Dropdown

• Create a content fragment that will serve as the dropdown options for the "Disclosures" component.
• Define the necessary fields in the content fragment, such as a text field for the label and a value field for the actual value.
• Populate the content fragment with the desired options for the dropdown.

Step 4: Display the Selected Disclosures as Dropdown

• In the HTL file of the "Disclosures" component, retrieve the selected content fragments from the dialog's multifield.
• Iterate over the selected content fragments and retrieve the label and value fields from the associated content fragment.
• Use the retrieved data to render the dropdown options in the desired format.

Here's an example of how the HTL code might look like to achieve the desired output:

<select>
    <option value="">Select a Disclosure</option>
    <sly data-sly-list.disclosure="${properties.disclosures}">
        <option value="${disclosure.value}">${disclosure.label}</option>
    </sly>
</select>

In this example, we assume that the multifield in the dialog is named "disclosures" and that each selected content fragment has a "label" field for the display label and a "value" field for the actual value.

Note that the specific implementation may vary depending on your project structure and requirements. Make sure to adjust the code according to your component's dialog field names and the structure of your content fragments.