테마 사용자 지정

HTML 코드 및 CSS 파일을 사용자 지정하여 AEM Forms 앱에 고유한 룩앤필을 제공할 수 있습니다. 예를 들어 작업의 배경색과 높이를 변경하거나 시작점을 변경할 수 있습니다. 다음 예제에서는 변경 지침을 제공합니다.

• 설명 대신 표시 지침
• 표시 경로 수
• 배경 그레이디언트 색상

단계

1. 프로젝트를 엽니다.

   • iOS의 경우 Xcode에서 Capture.xcodeproj을(를) 엽니다.
   • Android의 경우 Eclipse에서 Android 프로젝트를 엽니다.
   • Windows의 경우 Visual Studio에서 MWSWindows.sln을 엽니다.

2. 템플릿 폴더로 이동합니다.

   • Xcode에서 캡처 > www > 모바일 > js > 런타임 > templates 폴더로 이동합니다.
   • Eclipse에서 자산 > www > 모바일 > js > 런타임 > templates 폴더로 이동합니다.
   • Visual Studio에서 MWSWindows > www > Mobile > js > 런타임 > templates 폴더로 이동합니다.

3. 편집할 template.html 파일을 엽니다.

4. 다음 문자열을 찾습니다.

   <%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 파일에서 다음 코드를 찾습니다.

   <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. 다음 줄의 주석을 달고 파일을 저장합니다.

   task.availableCommands.directCommands[1]%>">
   <%= task.availableCommands.directCommands[1]%>
   </li>
   

7. css 폴더로 이동합니다.

   • Xcode에서 캡처 > www > 동영상 > css​로 이동합니다.
   • Eclipse에서 자산 > www > 모바일 > css​로 이동합니다.
   • Visual Studio에서 MWSWindows > www > Mobile > css​로 이동합니다.

8. 편집할 _style.css 파일을 엽니다.

9. 배경 이미지의 경우 #323232을 #fff(으)로 변경합니다.

10. 변경 내용을 저장하고 _style.css 파일을 닫습니다.

11. AEM Forms 앱을 엽니다.

    이제 AEM Forms 앱에 설명 대신 지침이 표시됩니다.