TODO リストでの追加のデータの表示

デフォルトで、AEM Forms Workspace TODO リストにタスクの表示名および説明が表示されます。しかしながら、作成日や締切日などのその他の情報を追加することができます。また、アイコンを追加したり、表示のスタイルを変更することもできます。

デフォルト設定を表示する HTML Workspace の「TODO」タブ

この記事では、TODO リストの各タスクに情報を追加する手順について説明します。

追加できる情報

サーバーによって送信された task.json にある情報を追加することができます。情報は、平文テキストとして追加することも、スタイルを使用して情報をフォーマットすることもできます。

JSON オブジェクトの説明についての詳細は、この記事を参照してください。

タスクでの情報の表示

  1. AEM Forms Workspace のカスタマイズの一般的な手順」に従います。

  2. タスクに追加の情報を表示するには、対応するキーと値のペアを translation.json のタスクブロック内に追加する必要があります。

    例えば、英語の場合は/apps/ws/locales/en-US/translation.jsonを次のように変更します。

    "task" : {
            "reminder" : {
                "value" : "Reminder",
                "tooltip" : "This is reminder __reminderCount__, for this task."
            },
            "deadlined" : {
                "value" : "Deadlined",
                "tooltip" : "This task has deadlined"
            },
            "save" : {
                "message" : "Task has been saved successfully"
            },
            "status" : {
                "deadlined" : "Deadlined",
                "created" : "Created",
                "assignedsaved" : "Draft from assigned task",
                "terminated" : "Terminated",
                "assigned" : "Assigned",
                "unknown" : "Unknown",
                "createdsaved" : "Draft from created task",
                "completed" : "Completed"
            },
            "draft" : {
                "value" : "Saved",
                "tooltip" : "This task is marked as a draft"
            },
            "escalated" : {
                "value" : "Escalated",
                "tooltip" : "This task has been escalated"
            },
            "forward" : {
                "value" : "Forwarded",
                "tooltip" : "This task was forwarded"
            },
            "priority" : {
                "highest" : "Highest priority",
                "normal" : "Normal priority",
                "high" : "High priority",
                "low" : "Low priority",
                "lowest" : "Lowest priority"
            },
            "claimed" : {
                "value" : "Claimed",
                "tooltip" : "This task has been claimed"
            },
            "locked" : {
                "value" : "Locked",
                "tooltip" : "This task is locked"
            },
            "consulted" : {
                "value" : "Consulted",
                "tooltip" : "This task has been consulted"
            },
            "returned" : {
                "value" : "Returned",
                "tooltip" : "This task was returned back"
            },
            "multiplesubmitbuttons" : {
                "message" : "The form associated with this task has multiple submit buttons so the Workspace Complete button will be disabled. Click the appropriate button on the form to submit it."
            },
            "nosubmitbutton" : {
                "message" : "The form associated with this task does not appear to have submit buttons. You may need to upgrade your Adobe Reader version to 9.1 or greater and enable the Reader Submit option in your process."
            },
            "icon" : {
                "tooltip" : "open the task __taskName__"
            }
        }
    
    メモ

    対応するキーと値のペアをすべてのサポートされている言語に追加します。

  3. たとえば、次のようにしてタスクブロック内に情報を追加します。

    "stepname" : {
                "value" : "Step Name",
                "tooltip" : "This task belongs to __stepName__ step"
    }
    

新規プロパティでの CSS の定義

  1. タスクに追加された情報(プロパティ)にスタイルを適用できます。これを行うには、/apps/ws/css/newStyle.cssに追加された新しいプロパティにスタイル情報を追加する必要があります。

    たとえば、以下を追加します。

    .task .taskProperties .stepname{
        width: 25px;
        background: url(../images/stepname.png) no-repeat; /*-------- Or just reuse background image / image-sprite defined .task .taskProperties span of style.css---------------------*/
        background-position: 0px 0px; /*-------- Dummy values, need to be configured as per user background image / image-sprite ---------------------*/
    }
    

HTML テンプレートへのエントリの追加

最後に、タスクに追加する各プロパティの開発パッケージにエントリを含める必要があります。作成する方法については、「AEM Forms Workspace コードの構築」を参照してください。

  1. コピー task.html:

    • 追加の: /libs/ws/js/runtime/templates/
    • を: /apps/ws/js/runtime/templates/
  2. 追加/apps/ws/js/runtime/templates/task.htmlに対する新しい情報。

    例えば、div class="taskProperties"の下に次を追加します。

    <span class="stepname" alt="<%= $.t('task.stepname.value')%>" title = '<%= $.t("task.stepname.tooltip",{stepName:stepName})%>'/>
    

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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