AEM 6.1 将选项卡添加到触控 UI 页面属性

Question

我正在尝试在页面属性中添加新选项卡和删除选项卡/项目。

到目前为止，我已经阅读了这个类似的问题：http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__m3tp-there_is_anarticle.html

这让我找到了这些 Adob​​e 链接和 github 示例：

• https://docs.adobe.com/docs/en/aem/6-1/author/page-authoring/managing-pages.html#Creating%20a%20New%20Page%20-%20Touch-optimized%20UI
• https://docs.adobe.com/docs/en/aem/6-1/develop/extending/customizing-page-properties/page-properties-views.html
• https://github.com/Adobe-Marketing-Cloud/aem-authoring-extension-page-dialog/blob/master/src/main/content/jcr_root/apps/demos/components/page/_cq_dialog/.content.xml

我已经为页面的页面属性复制了 .context.xml 的 github 示例，它没有隐藏任何内容。

我还将 cq:showOnCreate="{Boolean}false" 替换为 cq:hideOnEdit="{Boolean}true" 就像之前的 adobe 帮助论坛建议的那样也不行。

如何隐藏和显示项目？

此外，在过去，我们可以通过经典 UI 执行类似的操作来包含更多选项卡：

<sample
jcr:primaryType="cq:Widget"
path="/apps/company/components/Pages/basePage/sample_tab.infinity.json"
xtype="cqinclude"/>

如何在 Touch UI 中添加类似于 infinity.json 的新标签？花岗岩包括？

Answer 1

您可以像在 Classic 中一样重复使用 Touch 中的选项卡，方法是使用 granite/ui/components/foundation/include 和 path 属性。

在下面的示例中，我们有一个标题组件，其中包括一个普通的文本小部件并拉入一个可重用的组件设置选项卡。我已将共享选项卡放在/apps/mysite/dialogs/granite/tabs 下，但这不是必需的，您可以简单地更新path 属性。

这是/apps/mysite/components/heading/_cq_dialog.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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Heading"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="en/cq/current/wcm/default_components.html#Carousel">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <generalSettings
                jcr:primaryType="nt:unstructured"
                jcr:title="General Settings"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <headingText
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldLabel="Text"
                                name="./text"/>
                        </items>
                    </column>
                </items>
            </generalSettings>
            <componentSettings
                jcr:title="Component Settings"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/include"
                path="mysite/dialogs/granite/tabs/componentSettings"/>
        </items>
    </content>
</jcr:root>

可重复使用的组件设置选项卡位于/apps/mysite/dialogs/granite/tabs/componentSettings.xml：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Settings"
    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">
                <componentId
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                    fieldLabel="Component Id"
                    name="./componentId"/>
            </items>
        </column>
    </items>
</jcr:root>