HTML コードおよび CSS ファイルをカスタマイズし、AEM forms ワークスペースアプリケーションに組織固有の明確なルック&フィールを提供することができます。たとえば、タスクまたはスタートポイントの背景色や高さを変更できます。次のことを変更する手順を、以下に例で示します。
- 背景諧調色
- タスクの高さまたはスタートポイント
- 表示ルート数
- 説明の代わりに手順を表示する
- Xcode で Capture.xcodeproj プロジェクトを開きます。
- Capture/www/wsmobile/js/runtime/templates フォルダーに行きます。
- task.html ファイルを開いて編集します。
- 次の行を探して<%
<%if ( (task.description !== "") && (task.description !== null) && (typeof task.description !== null) && (typeof task.description !== 'undefined') ){%> <%= task.description %> <%}
else に置き換えます。 - task.html ファイル内の次のコードを探します。
- 次の列をコメントアウトし、ファイルを保存します。
- Capture>www>wsmobile>css まで移動します。
- _style.css ファイルを開いて編集します。
- 次のコードを検索します:
#wrapper .task {
- 高さを 80px から 150px に変更します。
- 背景画像に対して、#1d1d1d を #fff に変更します。
- 変更を保存し、_style.css ファイルを閉じます。
- AEM forms ワークスペースアプリケーションを開きます。
<ul>
<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>
</ul>
</div>
<li class="reject last" title="<%=
task.availableCommands.directCommands[1]%>" data-routename="<%=
task.availableCommands.directCommands[1]%>">
<%= task.availableCommands.directCommands[1]%>
</li>