テーマのカスタマイズ

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

  • 説明の代わりに手順を表示する
  • 表示ルート数
  • 背景諧調色

手順

  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. 次の文字列を探します。

    <%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で、Capture > www > wsmobile > css​に移動します。
    • Eclipseで、assets > www > wsmobile > css​に移動します。
    • Visual Studioで、MWSWindows > www > wsmobile > css​に移動します。
  8. _style.cssファイルを開いて編集します。

  9. 背景画像の場合は、#323232#fffに変更します。

  10. 変更を保存し、_style.cssファイルを閉じます。

  11. AEM Forms アプリケーションを開きます。

    AEM Forms アプリケーションには、説明の代わりに手順が表示されるようになっています。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now