文件AEM 6.4Forms 指南

主題自訂 theme-customization

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

建立對象：

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

您可以自訂HTML程式碼和CSS檔案，為AEM Forms應用程式提供獨特的組織專屬外觀和風格。 例如，您可以更改任務或起始點的背景顏色和高度。 下列範例提供變更的指示：

  • 顯示說明以取代說明
  • 顯示路由數
  • 背景漸層顏色

步驟 steps

  1. 開啟您的專案。

    • iOS，開啟 Capture.xcodeproj 在Xcode中
    • 若為Android，請在Eclipse中開啟Android專案。
    • 對於Windows，請開啟 MWSWindows.sln 在Visual Studio。

  2. 導覽至範本資料夾。

    • 在Xcode中，導覽至 擷取> www > wsmobile > js >執行階段>範本 檔案夾。
    • 在Eclipse中，導覽至 「資產」 > 「www」 > 「js」 > 「執行階段」 檔案夾。
    • 在Visual Studio中，導覽至 MWSwindows > www > wsmobile > js > runtime >範本 檔案夾。

  3. 開啟 template.html 檔案進行編輯。

  4. 找出下列字串：

    code language-none 
    <%if ( (task.description !== "") && (task.description !== null) && (typeof task.description !== null) && (typeof task.description !== 'undefined') ) {%>
               <div class="description_details">
                 <%= task.description %>
               </div>
              <%} else

    替換為 <%.

  5. 在 template.html 檔案：

    code language-none 
    <ul id="task_menu_list">
                                <li class="approve" title="<%= task.availableCommands.directCommands[0]%>" data-routename="<%= task.availableCommands.directCommands[0]%>">
                                    <%= task.availableCommands.directCommands[0]%>
                                </li>
                                <li class="reject last" title="<%= task.availableCommands.directCommands[1]%>" data-routename="<%= task.availableCommands.directCommands[1]%>">
                                    <%= task.availableCommands.directCommands[1]%>
                                </li>

  6. 對下一行加上註解並儲存檔案。

    code language-none 
    task.availableCommands.directCommands[1]%>">
<%= task.availableCommands.directCommands[1]%>
</li>

  7. 導覽至CSS資料夾。

    • 在Xcode中，導覽至 Capture > www > wsmobile > css.
    • 在Eclipse中，導覽至 assets > www > wsmobile > css.
    • 在Visual Studio中，導航至 MWSWindows > www > wsmobile > css.

  8. 開啟 _style.css 檔案進行編輯。

  9. 若為背景影像，請變更 #323232 to #fff.

  10. 儲存變更並關閉 _style.css 檔案。

  11. 開啟AEM Forms應用程式。

    AEM Forms應用程式現在會顯示指示，而非說明。

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