Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

AEM 6.4 Touch UI Page Properties

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

Screen Shot 2018-08-01 at 12.08.11 PM.pngScreen Shot 2018-08-01 at 12.07.59 PM.png



Arun Patidar

View solution in original post

11 Replies

Avatar

Level 10

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

Avatar

Community Advisor

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.

Screen Shot 2018-07-31 at 9.43.14 PM.png

Screen Shot 2018-07-31 at 9.47.50 PM.png



Arun Patidar

Avatar

Level 2

/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.

Avatar

Community Advisor

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



Arun Patidar

Avatar

Level 2

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?

Avatar

Correct answer by
Community Advisor

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.

Screen Shot 2018-08-01 at 12.08.11 PM.pngScreen Shot 2018-08-01 at 12.07.59 PM.png



Arun Patidar

Avatar

Level 2

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>

Avatar

Community Advisor

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



Arun Patidar

Avatar

Level 2

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?

Avatar

Level 1

@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.

Avatar

Level 2

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.