AEM 6.4 Touch UI Page Properties

[James_Appleby]

I'm trying to add additional fields to a page component that is extending /libs/wcm/foundation/components/basicpage/v1/basicpage

I have tried following the official documentation:

Customizing Views of Page Properties

GitHub - Adobe-Marketing-Cloud/aem-authoring-extension-page-dialog

This does not seem to work.  On both Edit and Create, I see the default fields only, and not the additional fields I've created.

Has the process for adding fields changed in AEM 6.4?  I have noticed that the configuration for the tabs has been moved from the cq:dialog node and now have individual nodes in a folder called tabs in the root of the component.  Could this be why I am unable to extend the dialog?

Here is what I have inside my page in cq:dialog:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:rep="internal"
          jcr:primaryType="nt:unstructured">
    <content
        jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <basic jcr:primaryType="nt:unstructured">
                        <layout
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                            margin="{Boolean}false"/>
                        <items jcr:primaryType="nt:unstructured">
                            <column jcr:primaryType="nt:unstructured">
                                <items jcr:primaryType="nt:unstructured">
                                    <moretitles jcr:primaryType="nt:unstructured">
                                        <items jcr:primaryType="nt:unstructured">
                                            <twitterTitle
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                fieldLabel="Twitter Title"
                                                name="./twitterTitle"
                                                cq:showOnCreate="{Boolean}true" />
                                            <facebookTitle
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                fieldLabel="Facebook Title"
                                                name="./facebookTitle"
                                                cq:showOnCreate="{Boolean}true" />
                                            <facebookDescription
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/form/textarea"
                                                fieldLabel="Facebook Description"
                                                name="./facebookDescription"
                                                cq:showOnCreate="{Boolean}true" />
                                        </items>
                                    </moretitles>
                                </items>
                            </column>
                        </items>
                    </basic>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Any help will be greatly appreciated.

[smacdonald2008]

Did you try to create a proxy core component using the Page Core component? Then provide additional props.

[arunpatidar]

Hi,

In 6.4 dialogs are created using Coral3 (Granite UI), so you can difference in node structure but adding new features in dialog is same as before. for example page core component(/apps/core/wcm/components/page/v2/page) inherits wcm foundation page component(/libs/wcm/foundation/components/basicpage/v1/basicpage). if you will create new page component by inherit wcm core page components, you'll see extra tab (Social Media) which is custom added tab in page dialog as part of core component. You can also do same for your components.

[James_Appleby]

/apps/mycompany/core/commons/renderers/pageRenderer/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:isContainer="{Boolean}false"
    cq:noDecoration="{Boolean}false"
    jcr:primaryType="cq:Component"
    jcr:title="Basic Renderer"
    sling:resourceType="foundation/components/page/pageRenderer"
    sling:resourceSuperType="foundation/components/page"
    allowedParents=""/>

The dialog and cq:dialog are on this component.  No pages use this directly.  It is an abstract component used by all the other page components.

/apps/mycompany/core/commons/renderers/articleRenderer/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          cq:isContainer="{Boolean}false"
          cq:noDecoration="{Boolean}false"
          jcr:primaryType="cq:Component"
          jcr:title="Article Renderer"
          sling:resourceSuperType="mycompany/core/commons/renderers/pageRenderer"
          allowedParents=""/>

This has a (classic) dialog but does not have a cq:dialog.  This is the one my template is using.

I have also tried moving the cq:dialog to the articleRenderer page component, but that didn't make a difference.

I have tried changing the super type of the pageRenderer to wcm/foundation/components/basicpage/v1/basicpage as well, because it is a HTL component, but that didn't change anything.

[arunpatidar]

Can you try to inherit core page component(core/wcm/components/page/v2/page) instead of sling:resourceSuperType="mycompany/core/commons/renderers/pageRenderer"

Then create cq:dailog for touchn UI.It is recommendated that, should be using HTL for AEM 6.4

[James_Appleby]

My environment only has the default installation of AEM and does not have the core-components add on.  It will a significant amount of effort to get this package added into my company's environments.  Is there any way of making this work without that?

[arunpatidar · Accepted solution]

Yes, you can try create page using /libs/wcm/foundation/components/basicpage/v1/basicpage if you don't have core components.

I tried in 6.4 works fine.

If you want to edit existing tabs, just copy that that dialog(or create new) and  when you inherite use dialog path as your custom dialog path.

[James_Appleby]

I've attempted to replicate adding a separate tab, and that is working.

Unfortunately that wasn't what I was trying to do.  I am still unable to add (and remove) fields from existing tabs.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:rep="internal"
          jcr:primaryType="nt:unstructured">
    <content
        jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <socialmedia jcr:primaryType="nt:unstructured"
                            jcr:title="Social Media"
                            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                        <layout
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                            margin="{Boolean}false"/>
                        <items jcr:primaryType="nt:unstructured">
                            <column jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <titles jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <twitterTitle
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                fieldLabel="Twitter Title"
                                                name="./twitterTitle"
                                                cq:showOnCreate="{Boolean}true" />
                                        </items>
                                    </titles>
                                </items>
                            </column>
                        </items>
                    </socialmedia>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

[arunpatidar]

Hi,

Could you please let me know which field you are trying to remove.

For existing field you need to create dialog with the Tab which you are updating e.g. if you are changing

/libs/wcm/foundation/components/basicpage/v1/basicpage/cq:dialog/content/items/tabs/items/basic then

/apps/AEM64App/components/structure/demo-page/cq:dialog/content/items/tabs/items/basic

then copy child nodes from /libs/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic to your component node.

Or create a tab folder and create basic tab and change the reference in /apps/AEM64App/components/structure/demo-page/cq:dialog/content/items/tabs/items/basic

Thanks

Arun

[James_Appleby]

There are no child nodes under /libs/wcm/foundation/components/basicpage/v1/basicpage/cq:dialog/content/items/tabs/items/basic.  Instead in AEM 6.4 it has include instructions.

The include path is: /mnt/overlay/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic

I assume this resolves to: /libs/wcm/foundation/components/basicpage/v1/basicpage/tabs/basic

Obviously I could copy all of the child nodes from here into my base page component, but that ruins the inheritance that was available in previous versions.  Any future changes would not be applied if I duplicate the dialog as suggested.

I believe it is the moving of the nodes from within the cq:dialog to a separate place which is preventing me overriding elements in it.  I tried creating a tabs folder in my page component and replicating the structure of the basic tab under there with just the addition and remove fields, and that didn't work.

I haven't tested it, but it's possible that creating /apps/wcm ... for the tabs could work, but I want it for my specific project code and not in a universal path.

I'm not familiar with the /mnt/overlay functionality.  Is there a way of overloading this for /apps/myproject?

[arnork43932762]

@James Appleby, did you find a good solution?

I am using core components and have tried everything you mentioned. What is left is either to make new tabs for the custom fields or to overwrite the basic or the advanced tab, neither of which is a satisfying solution; new features of future updates will not appear on overwritten tabs.

[Clemente-3SHARE]

Same here arnork43932762 James Appleby!

Any solution?

Not sure why there's an answer marked as correct if it is not solving the actual problem.

Thanks.