AEM 将新选项卡添加到 OOTB 页面组件触摸 UI 对话框的对话框

Question

我想向 OOTB 页面组件触摸 UI 对话框 (/libs/foundation/components/page) 添加一个新选项卡，以便从该 OOTB 组件继承的所有页面都将具有这些字段。

不幸的是，仅将选项卡添加到每个模板组件不是一个选项，因为我正在构建一个插件而不是一个实现。

我一直在尝试覆盖 /libs/foundation/components/page/_cq_dialog/content/items/tabs/items/ 并将我的选项卡添加到该叶 items 节点，但是它不会拉动其余的 OOTB 选项卡。我认为这是因为它不是叶节点，并且在进行叠加时它想要成为。所以我需要以某种方式将我定义的内容与 OOTB 触摸 ui 对话框合并。

这是我的/apps/foundation/components/page/_cq_dialog 节点：

<?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"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Page"
          sling:resourceType="cq/gui/components/authoring/dialog"
          extraClientlibs="[cq.common.wcm,cq.siteadmin.admin.properties]"
          mode="edit">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/container"
            class="cq-dialog-content-page">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container"
                    rel="cq-siteadmin-admin-properties-tabs">
                <layout
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/layouts/tabs"
                        type="nav"/>
                <items jcr:primaryType="nt:unstructured">
                    <custom
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Custom"
                            sling:resourceType="granite/ui/components/foundation/section">
                        <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/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <customsection
                                            jcr:primaryType="nt:unstructured"
                                            jcr:title="Custom field"
                                            sling:resourceType="granite/ui/components/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <customfield
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                    fieldLabel="custom field"
                                                    name="customField"/>
                                        </items>
                                    </customsection>
                                </items>
                            </column>
                        </items>
                    </custom>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

谢谢！

Answer 1

您没有从基础页面组件中看到其余选项卡的原因是因为您是 overlaying 所有选项卡的根 items 节点。当您覆盖时，您正在重新定义libs 组件的功能并优先考虑被覆盖的组件。如果您还想拥有其余选项卡，则必须将它们全部复制到覆盖的组件中，这是强烈不推荐，因为您将失去对组件的升级当您升级 AEM 或安装服务包时。

我会推荐extending 组件，而不是通过在您网站的基本页面组件中将sling:resourceType 的值设置为foundation/components/page。这样，您只需添加额外的自定义选项卡并从libs 继承其余选项卡。很可能（如果遵循 aem 最佳实践），您的站点将已经有一个具有此属性的基本页面组件，并且其余模板将从该组件继承。将下面的 _cq_dialog 添加到该页面组件，您应该会在所有页面中看到新标签。

.content.xml 您的基本页面组件。 /apps/<<prj>>/templates 的主要模板之一将有一个 sling:resourceType 链接到此页面组件。

<?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"
    jcr:primaryType="cq:Component"
    jcr:title="Base Page Component"
    sling:resourceSuperType="foundation/components/page"
    componentGroup=".hidden"/>

_cq_dialog - 重用你的代码，除了一个新的道具 - sling:orderBefore="cloudservices"，订购你的新标签

<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured">
    <content jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <custom
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Custom"
                        sling:orderBefore="cloudservices"
                        sling:resourceType="granite/ui/components/foundation/section">
                        <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/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <customsection
                                        jcr:primaryType="nt:unstructured"
                                        jcr:title="Custom field"
                                        sling:resourceType="granite/ui/components/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <customfield
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                fieldLabel="custom field"
                                                name="customField"/>
                                        </items>
                                    </customsection>
                                </items>
                            </column>
                        </items>
                    </custom>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

截图

更多关于组件层次结构和继承here