文件AEM 6.4Forms 指南

建立最適化表單的自訂版面元件 creating-custom-layout-components-for-adaptive-forms

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • User
CAUTION
AEM 6.4已結束延伸支援，本檔案不再更新。 如需詳細資訊，請參閱 技術支援期. 尋找支援的版本 此處.

必備條件 prerequisite

了解版面，可讓您建立/使用自訂版面。 請參閱 更改面板佈局.

適用性表單面板版面元件 adaptive-form-panel-layout-component

「最適化表單面板配置」元件可控制面板中相對於使用者介面的最適化表單元件佈局方式。

建立自訂面板版面 creating-a-custom-panel-layout

  1. 導覽至位置 /crx/de.
  2. 從位置複製面板版面 /libs/fd/af/layouts/panel (例如， tabbedPanelLayout) /apps (例如， /apps/af-custom-layout)。
  3. 重新命名您複製到的版面 customPanelLayout. 更改節點的屬性 qtip 和 jcr:description. 例如，將其變更為 Custom layout - Toggle tabs.

自訂面板配置CRX DE快照

NOTE
設定屬性 guideComponentType的值 fd/af/layouts/panel 確定佈局為面板佈局。

  1. 重新命名檔案 tabbedPanelLayout.jsp 在「customPanelLayout.jsp的新佈局」下。

  2. 若要引入新樣式和行為，請在 etc 節點。 例如，在/etc/af-custom-layout-clientlib位置，建立節點client-library。 讓節點擁有categories屬性af.panel.custom。 它有下列.css和.js檔案：

    code language-css 
    /** CSS defining new styles used by custom layout **/

.menu-nav {
    background-color: rgb(198, 38, 76);
    height: 30px;
 width: 30px;
 font-size: 2em;
 color: white;
    -webkit-transition: -webkit-transform 1s;  /* For Safari 3.1 to 6.0 */
 transition: transform 1s;
}

.tab-content {
 border: 1px solid #08b1cf;
}

.custom-navigation {
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s;  /* For Safari 3.1 to 6.0 */
 transition: width 1s, height 1s, transform 1s;
}

.panel-name {
    padding-left: 30px;
    font-size: 20px;
}

@media (min-width: 992px) {
 .nav-close {
  width: 0px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
 .nav-close {
  height: 0px;
    }
}

@media (max-width: 767px) {
 .menu-nav, .custom-navigation {
     display: none;
    }
}
    code language-none 
    /** function for toggling the navigators **/
var toggleNav = function () {

    var nav = $('.custom-navigation');
    if (nav) {
        nav.toggleClass('nav-close');
    }
}

/** function to populate the panel title **/
$(window).on('load', function() {
    if (window.guideBridge) {
        window.guideBridge.on("elementNavigationChanged",
        function (evntName, evnt) {
                    var activePanelSom = evnt.newText,
                        activePanel = window.guideBridge._guideView.getView(activePanelSom);
                    $('.panel-name').html(activePanel.$itemNav.find('a').html());
                }
        );
    }
});

  3. 若要增強外觀和行為，您可以包含 client library.

    此外，更新.jsp檔案中包含指令碼的路徑。 例如，請更新 customPanelLayout.jsp 檔案如下：

    code language-none 
    <%-- jsp encapsulating navigator container and panel container divs --%>

<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
<cq:includeClientLib categories="af.panel.custom"/>
<div>
    <div class="row">
        <div class="col-md-2 col-sm-2 hidden-xs menu-nav glyphicon glyphicon-align-justify" onclick="toggleNav();"></div>
        <div class="col-md-10 col-sm-10 hidden-xs panel-name"></div>
    </div>
    <div class="row">
        <div class="col-md-2 hidden-xs guide-tab-stamp-list custom-navigation">
            <cq:include script = "/apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jsp" />
        </div>
        <div  class="col-md-10">
            <c:if test="${fn:length(guidePanel.description) > 0}">
                <div class="<%=GuideConstants.GUIDE_PANEL_DESCRIPTION%>">
                    ${guide:encodeForHtml(guidePanel.description,xssAPI)}
                        <cq:include script="/libs/fd/af/components/panel/longDescription.jsp"/>
                </div>
            </c:if>
            <cq:include script = "/apps/af-custom-layout/customPanelLayout/panelContainer.jsp"/>
        </div>
    </div>
</div>

    此 /apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jsp 檔案：

    code language-none 
    <%-- jsp governing the navigation part --%>

<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
<%@ page import="com.adobe.aemds.guide.utils.StyleUtils" %>
<%-- navigation tabs --%>
<ul id="${guidePanel.id}_guide-item-nav-container" class="tab-navigators tab-navigators-vertical in"
    data-guide-panel-edit="reorderItems" role="tablist">
    <c:forEach items="${guidePanel.items}" var="panelItem">
        <c:set var="isNestedLayout" value="${guide:hasNestablePanelLayout(guidePanel,panelItem)}"/>
        <li id="${panelItem.id}_guide-item-nav" title="${guide:encodeForHtmlAttr(panelItem.navTitle,xssAPI)}" data-path="${panelItem.path}" role="tab" aria-controls="${panelItem.id}_guide-item">
            <c:set var="panelItemCss" value="${panelItem.cssClassName}"/>
            <% String panelItemCss = (String) pageContext.getAttribute("panelItemCss");%>
            <a data-guide-toggle="tab" class="<%= StyleUtils.addPostfixToClasses(panelItemCss, "_nav") %> guideNavIcon nested_${isNestedLayout}">${guide:encodeForHtml(panelItem.navTitle,xssAPI)}</a>
            <c:if test="${isNestedLayout}">
                <guide:initializeBean name="guidePanel" className="com.adobe.aemds.guide.common.GuidePanel"
                    resourcePath="${panelItem.path}" restoreOnExit="true">
                    <sling:include path="${panelItem.path}"
                                   resourceType="/apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jsp"/>
                </guide:initializeBean>
            </c:if>
            <em></em>
        </li>
    </c:forEach>
</ul>

    已更新 /apps/af-custom-layout/customPanelLayout/panelContainer.jsp:

    code language-none 
    <%-- jsp governing the panel content --%>

<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>

<div id="${guidePanel.id}_guide-item-container" class="tab-content">
    <c:if test="${guidePanel.hasToolbar && (guidePanel.toolbarPosition == 'Top') }">
        <sling:include path="${guidePanel.toolbar.path}"/>
    </c:if>

<c:forEach items="${guidePanel.items}" var="panelItem">
    <div class="tab-pane" id="${panelItem.id}_guide-item" role="tabpanel">
        <c:set var="isNestedLayout" value="${guide:hasNestablePanelLayout(guidePanel,panelItem)}"/>
        <c:if test="${isNestedLayout}">
            <c:set var="guidePanelResourceType" value="/apps/af-custom-layout/customPanelLayout/panelContainer.jsp" scope="request"/>
        </c:if>
        <sling:include path="${panelItem.path}" resourceType="${panelItem.resourceType}"/>
    </div>
</c:forEach>
<c:if test="${guidePanel.hasToolbar && (guidePanel.toolbarPosition == 'Bottom')}">
    <sling:include path="${guidePanel.toolbar.path}"/>
</c:if>
</div>

  4. 在製作模式中開啟最適化表單。 定義的面板佈局將添加到清單中以配置面板佈局。

    「自訂面板配置」會顯示在面板配置清單中 使用自訂面板版面的最適化表單螢幕擷取畫面 螢幕截圖演示自定義佈局的切換功能

自訂面板版面的範例ZIP，以及使用它的最適化表單。

取得檔案

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da