テーマのカスタマイズ theme-customization
HTMLコードと CSS ファイルをカスタマイズして、AEM Formsアプリに組織固有の独自のルックアンドフィールを提供できます。 例えば、タスクや Startpoint の背景色や高さを変更できます。 次の例に、変更手順を示します。
- 説明の代わりに手順を表示
- 表示ルート数
- 背景のグラデーションの色
手順 steps
-
プロジェクトを開きます。
- iOS の場合、Xcode で
Capture.xcodeproj
を開きます。 - Android の場合、Eclipse で Android プロジェクトを開きます。
- Windows の場合、Visual Studio で
MWSWindows.sln
を開きます。
- iOS の場合、Xcode で
-
テンプレートフォルダーに移動します。
- Xcode では、Capture/www/wsmobile/js/runtime/templates フォルダーに移動します。
- Eclipse では、assets/www/wsmobile/js/runtime/templates フォルダーに移動します。
- Visual Studio では、MWSWindows/www/wsmobile/js/runtime/templates フォルダーに移動します。
-
template.html
ファイルを開いて編集します。 -
次の文字列を探します。
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
<%
に置き換えます。 -
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>
-
次の行にコメントをつけ、ファイルを保存します。
code language-jsp task.availableCommands.directCommands[1]%>"> <%= task.availableCommands.directCommands[1]%> </li>
-
css フォルダーに移動します。
- Xcode では、Capture/www/wsmobile/css に移動します。
- Eclipse では、assets/www/wsmobile/css に移動します。
- Visual Studio では、MWSWindows/www/wsmobile/css に移動します。
-
_style.css
ファイルを開いて編集します。 -
背景画像は、
#323232
を#fff
に変更します。 -
変更を保存し、
_style.css
ファイルを閉じます。 -
AEM Formsアプリを開きます。
AEM Formsアプリに、説明ではなく手順が表示されるようになりました。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2