Skip to content

D6 Tools & Assets Documentation

Multifield with Multiple Templates

The problem

Sometimes when you provide authors with a dialog, you want them to be able to enter different content based on the data type they are entering. The multifield allows you to configure multiple form fields as a template. But what happens if you want to provide the author with the ability to add item A or add item B?

Our solution

We built an extension/new form field within AEM that allows developers to configure any combination of inputs for different templates. You can have template A, template B, template C, etc. When an author saves the content and reopens the fields, the templates will reload the content correctly.

How to configure it

sling:resourceType dos/authoring/ui/components/coral/multifield
+ fields similar to items for a container
++ multfield_type a unique identifier to specify the template 

Example dialog configuration

  • 
<depends
    granite:class="js-dos-depends-on-panel"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="dos/authoring/ui/components/coral/multifield"
    composite="{Boolean}true"
    fieldDescription="Enter a combination of criterias and based on the users selection this field becomes optional/manditory"
    fieldLabel="Depends On Criteria"
    name="./dependsOn">
    <fields jcr:primaryType="nt:unstructured">
        <add
            jcr:primaryType="nt:unstructured"
            jcr:title="Textfield"
            sling:resourceType="granite/ui/components/foundation/container"
            multifield_type="add"
            name="./dependsOn">
            <items jcr:primaryType="nt:unstructured">
                <select
                    granite:class="js-dos-select-chain js-dos-conditional-show-hide"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                    fieldLabel="Form Field"
                    multiple="{Boolean}false"
                    name="formField"
                    scope="parent">
                    <datasource
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="dos-website-v3/components/forms/datasource/formfields"/>
                    <granite:data
                        jcr:primaryType="nt:unstructured"
                        chain=".js-dos-depends-on-select-value"
                        controls=".js-dos-depends-on-select-value, .js-dos-depends-on-text-value"
                        filter="coral-multifield-item-content"
                        scope="PARENT"
                        show-default=".js-dos-depends-on-text-value"/>
                </select>
                <operation
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                    fieldLabel="Form Operation"
                    multiple="{Boolean}false"
                    name="formOperator">
                    <items jcr:primaryType="nt:unstructured">
                        <equal
                            jcr:primaryType="nt:unstructured"
                            text="="
                            value="=="/>
                        <notequal
                            jcr:primaryType="nt:unstructured"
                            text="!="
                            value="!="/>
                        <gtequal
                            jcr:primaryType="nt:unstructured"
                            text=">="
                            value=">="/>
                        <gt
                            jcr:primaryType="nt:unstructured"
                            text=">"
                            value=">"/>
                        <ltequal
                            jcr:primaryType="nt:unstructured"
                            text="<="
                            value="<="/>
                        <lt
                            jcr:primaryType="nt:unstructured"
                            text="<"
                            value="<"/>
                    </items>
                </operation>
                <value
                    granite:class="js-dos-depends-on-select-value"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                    fieldLabel="Form Value"
                    multiple="{Boolean}false"
                    name="formValue">
                    <datasource
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="dos-website-v3/components/forms/datasource/formvalues"/>
                </value>
                <valuetext
                    granite:class="js-dos-depends-on-text-value"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                    fieldLabel="Form Value"
                    multiple="{Boolean}false"
                    name="formValue"/>
                <mutifieldType
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                    fieldLabel="Title (optional)"
                    name="multifield_type"
                    value="add"/>
            </items>
        </add>
        <open
            jcr:primaryType="nt:unstructured"
            jcr:title="Open Bracket"
            sling:resourceType="granite/ui/components/foundation/container"
            multifield_type="open"
            name="./dependsOn">
            <items jcr:primaryType="nt:unstructured">
                <openbracket
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/text"
                    text="("/>
                <formValue
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                    name="formValue"
                    value="("/>
                <mutifieldType
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                    fieldLabel="Title (optional)"
                    name="multifield_type"
                    value="open"/>
            </items>
        </open>
        <close
            jcr:primaryType="nt:unstructured"
            jcr:title="Close Bracket"
            sling:resourceType="granite/ui/components/foundation/container"
            multifield_type="close"
            name="./dependsOn">
            <items jcr:primaryType="nt:unstructured">
                <openbracket
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/text"
                    text=")"/>
                <formValue
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                    name="formValue"
                    value=")"/>
                <mutifieldType
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                    fieldLabel="Title (optional)"
                    name="multifield_type"
                    value="close"/>
            </items>
        </close>
        <or
            jcr:primaryType="nt:unstructured"
            jcr:title="OR"
            sling:resourceType="granite/ui/components/foundation/container"
            multifield_type="or"
            name="./dependsOn">
            <items jcr:primaryType="nt:unstructured">
                <openbracket
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/text"
                    text="OR"/>
                <formValue
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                    name="formValue"
                    value="OR"/>
                <mutifieldType
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                    fieldLabel="Title (optional)"
                    name="multifield_type"
                    value="or"/>
            </items>
        </or>
    </fields>
</depends>

Dependencies

Digital On Six front-end validation framework

RTE apply classes extension

The rich text editor (RTE) is one of the most powerful authoring tools in AEM. The RTE allows authors or marketers the ability to create complex experiences and gives authors the ability to:

  • Create paragraphs, headings, lists, etc.
  • Add links within content
  • Add tables to webpages
  • Apply certain styles (e.g. bold, italics, underline) to text

The problem

The RTE has one major limitation: visual customization. Most of our customers have a design system that allows them to create a more immersive experience for their users: links in certain colours or styles, lists with checkboxes instead of bullets, varying text sizes, or multiple fonts within their brand guidelines. How do we give marketers the ability to follow their design system for a unified user experience?

What we built

Most RTEs allow content authors to input "CSS classes" onto elements. By allowing authors to put classes on elements, it opens up the ability to create feature-rich experiences. AEM's RTE is a custom component but it lacks the feature of being able to directly add classes to elements.

DO6 Rich Text Editor (RTE)

Our RTE class extension includes the following features which allow you to:

  • Apply CSS classes to any HTML element
  • Define classes per element so developers can specify which classes can go on which elements
  • Apply classes to inner elements and outer elements e.g. a list item (LI) or an entire list (UL)
  • Preview style in the dropdown selection so the author knows exactly what they are applying before they apply the class

DO6 RTE Extensions

Known Limitations

While our current RTE extension is full featured, we plan on enhancing it in the future with the following features:

  • Mutually exclusive classes. When one class is chosen, you should be unable to choose another class.
  • Mutually inclusive classes. When you chose one class, another might be applied automatically.
  • Separation of classes based on class purpose (e.g. separate dropdowns for font size, colour, or style).

Alphabetical Order

AEM has intuitive, easy-to-understand authoring interfaces. But sometimes what looks so good in a demo can require a little refinement in real life.

The Problem

AEM has three different views of content for both assets and webpages: Column view, List view, and Card view. Once you start using AEM at a larger scale, the restrictions in these views can cause issues including:

  • New content appearing first, not in alphabetical order
  • Items only loading 40 at a time
  • Inability to view filename or webpage name in card view, or view alias property 

So while the demo looks great, as soon as you have more than 100 items in a folder, it becomes much harder and messier to work with AEM.

Our Solution

We fixed this minor flaw in AEM by adding support for:

  • Default alphabetical ordering
  • Loading 500 items at once (instead of 40)
  • Displaying the filename as well as the alias property

DO6: AEM Support and Solutions

  • Alphabetical
    ordering

  • Load 500 items
    at once

  • Filename and
    alias display

Last Updated: