自定义任务详细信息页面 customizing-the-task-details-page

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
自适应表单

创建对象：

用户
开发人员

任务详细信息页面包含有关任务及其流程的信息。但是，您可以自定义“任务详细信息”页面来添加或删除信息。

可以将以下信息添加到任务详细信息页面：

任务的JSON对象中的可用信息(AEM Forms工作区JSON对象描述中的任务部分)
进程实例的JSON对象中的可用信息(AEM Forms工作区JSON对象说明中的进程实例部分)

要自定义任务详细信息页面，请执行以下操作：

执行AEM Forms工作区自定义的一般步骤。

要显示任何其他信息，请将相应的键值对添加到translation.json文件中todoblock > detailsblock > appblock > [requiredblock]。

[required块]引用了可用的块，例如任务信息的任务块、进程信息的进程块和挂起任务信息的当前挂起任务块。

例如，要在任务详细信息页面中添加有关“需要路由选择”的信息，您可以在任务块中添加以下键值对：

code language-json
`"todo" : { . . . "details" : { . . "task" : { . . "RouteSelectionRequired" : "Route Selection Required" } } }`

note note
NOTE
为所有支持的语言添加相应的键值对。

将/libs/ws/js/runtime/templates/taskdetails.html复制到/apps/ws/js/runtime/templates/taskdetails.html。

将新信息添加到/apps/ws/js/runtime/templates/taskdetails.html。例如：

code language-css

code language-css
`<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>`

<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>

打开/apps/ws/js/registry.js进行编辑。

搜索并将text!/lc/libs/ws/js/runtime/templates/taskdetails.html替换为text!/lc/apps/ws/js/runtime/templates/taskdetails.html。

NOTE

若要使用在AEM Forms工作区的 启动进程 选项卡中创建的任务自定义任务详细信息页面，请将新信息添加到/apps/ws/js/runtime/templates/startprocess.html。

要为详细信息页面中添加的信息添加新样式，请使用Workspace自定义中的 用户界面更改 部分修改CSS文件。

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2