佈景主題自訂 theme-customization

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

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

步驟 steps

  1. 開啟您的專案。

    • 若為iOS,請在Xcode中開啟Capture.xcodeproj
    • 針對Android,請在Eclipse中開啟Android專案。
    • 若是Windows,請在Visual Studio中開啟MWSWindows.sln
  2. 導覽至「範本」資料夾。

    • 在Xcode中,導覽至​ Capture > www > wsmobile > js > runtime > templates ​資料夾。
    • 在Eclipse中,導覽至​ assets > www > wsmobile > js > runtime > templates ​資料夾。
    • 在Visual Studio中,瀏覽至​ MWSWindows > www > wsmobile > js > runtime > templates ​資料夾。
  3. 開啟 template.html 檔案進行編輯。

  4. 找出下列字串:

    code language-jsp
    <%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-jsp
    <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-jsp
    task.availableCommands.directCommands[1]%>">
    <%= task.availableCommands.directCommands[1]%>
    </li>
    
  7. 導覽至css資料夾。

    • 在Xcode中,瀏覽至​ Capture > www > wsmobile > css
    • 在Eclipse中,導覽至​ 資產> www > wsmobile > css
    • 在Visual Studio中,瀏覽至​ MWSWindows > www > wsmobile > css
  8. 開啟 _style.css 檔案進行編輯。

  9. 背景影像請將#323232變更為#fff

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

  11. 開啟AEM Forms應用程式

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2