Show Menu
トピック×

Customizing the task details page

タスクの詳細ページには、タスクおよびそのプロセスに関する情報が含まれています。しかしながら、タスクの詳細ページをカスタマイズして情報を追加したり、削除したりすることができます。
次の情報をタスクの詳細ページに追加することができます。
タスクの詳細ページをカスタマイズするには:
  1. To show any additional information, add corresponding key-value pairs to the translation.json file at todo block > details block > app block > #.
    The # refers to available blocks, such as the task block for task information, process block for process information, and currentpendingtask block for pending tasks information.
    たとえば、タスクの詳細ページに必要なルート選択に関する情報を追加するには、以下のキーと値のペアを task ブロックに追加することができます。
    "todo" : {
        .
        .
        .
        "details" : {
            .
            .
            "task" : {
                .
                .
                "RouteSelectionRequired" : "Route Selection Required"
            }
        }
    }
    
    
    対応するキーと値のペアをすべてのサポートされている言語に追加します。
  2. /libs/ws/js/runtime/templates/taskdetails.html /apps/ws/js/runtime/templates/taskdetails.html にコピーします。
    に追加新しい情報を追加し /apps/ws/js/runtime/templates/taskdetails.html ます。 次に例を示します。
    <div class="detailsContainer">
        .
        .
        <ul>
            .
            .
            <li>
                <label for="routeSelectionRequired" title="<%= $.t('todo.details.task.RouteSelectionRequired')%>"><%= $.t('todo.details.task.RouteSelectionRequired')%></label>
                <div>
                    <span id="routeSelectionRequired"><%= isRouteSelectionRequired != null ? isRouteSelectionRequired : ''%></span>
                </div>
            </li>
            .
            .
        </ul>
    </div>
    
    
  3. /apps/ws/js/registry.js を開いて編集します。
    Search and replace text!/lc/libs/ws/js/runtime/templates/taskdetails.html with text!/lc/apps/ws/js/runtime/templates/taskdetails.html .
To customize the task details page with tasks created in the Start Process ​tab of AEM Forms workspace, add the new information to /apps/ws/js/runtime/templates/startprocess.html .
To add new styles for the information added in the details page, modify the CSS file by using the User interface changes section in Workspace Customization .