HTML コードおよび CSS ファイルをカスタマイズし、AEM forms ワークスペースアプリケーションに組織固有の明確なルック&フィールを提供することができます。たとえば、タスクまたはスタートポイントの背景色や高さを変更できます。次のことを変更する手順を、以下に例で示します。

  • 背景諧調色
  • タスクの高さまたはスタートポイント
  • 表示ルート数
  • 説明の代わりに手順を表示する

手順

  1. Xcode で Capture.xcodeproj プロジェクトを開きます。
  2. Capture/www/wsmobile/js/runtime/templates フォルダーに行きます。
  3. task.html ファイルを開いて編集します。
  4. 次の行を探して<%

    <%if ( (task.description !== "") && (task.description !== null) && (typeof task.description !== null) && (typeof task.description !== 'undefined') ){%> <%= task.description %> <%}
    else 
      に置き換えます。
  5. task.html ファイル内の次のコードを探します。
  6. <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>

  7. 次の列をコメントアウトし、ファイルを保存します。
  8. <li class="reject last" title="<%=
    task.availableCommands.directCommands[1]%>" data-routename="<%=
    task.availableCommands.directCommands[1]%>">
    <%= task.availableCommands.directCommands[1]%>
    </li>

  9. Capture>www>wsmobile>css まで移動します。
  10. _style.css ファイルを開いて編集します。
  11. 次のコードを検索します:

    #wrapper .task {

  12. 高さを 80px から 150px に変更します。
  13. 背景画像に対して、#1d1d1d を #fff に変更します。
  14. 変更を保存し、_style.css ファイルを閉じます。
  15. AEM forms ワークスペースアプリケーションを開きます。
AEM forms ワークスペースアプリケーションには、説明の代わりに手順が表示されるようになっています。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー