10 Replies Latest reply on Sep 28, 2018 7:12 AM by arnork43932762

    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.

        • 1. Re: AEM 6.4 Touch UI Page Properties
          smacdonald2008 Adobe Employee

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

          • 2. Re: AEM 6.4 Touch UI Page Properties
            Arun Patidar Experience Cloud MVP

            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

            • 3. Re: AEM 6.4 Touch UI Page Properties
              James Appleby Level 1

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

              • 4. Re: AEM 6.4 Touch UI Page Properties
                Arun Patidar Experience Cloud MVP

                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

                • 5. Re: AEM 6.4 Touch UI Page Properties
                  James Appleby Level 1

                  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?

                  • 6. Re: AEM 6.4 Touch UI Page Properties
                    Arun Patidar Experience Cloud MVP

                    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

                    • 7. Re: AEM 6.4 Touch UI Page Properties
                      James Appleby Level 1

                      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>
                      
                      • 8. Re: AEM 6.4 Touch UI Page Properties
                        Arun Patidar Experience Cloud MVP

                        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

                        • 9. Re: AEM 6.4 Touch UI Page Properties
                          James Appleby Level 1

                          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?

                          • 10. Re: AEM 6.4 Touch UI Page Properties
                            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.