Adobe Workfront API のリッチテキストフィールド

Adobe Workfront の一部のオブジェクトでは、リッチテキスト形式のテキストを格納できます。 Workfront APIでは、オープンソースフレームワークのDraft.jsを使用して、リッチテキストがJSONとして保存されます。

概要の例

リッチテキスト形式のカスタムフィールドは、リッチテキスト付きフィールドと呼ばれ、次の値を関連付けることができます。

​ リッチテキストの例

例:リッチテキストカスタムフォームフィールドを使用してフィールドの値を取得するための基本的なGET リクエスト:

GET /attask/api-internal/<OBJ Code>/<OBJ ID>?fields=parameterValues#
OR
GET /attask/api/v12.0/<OBJ Code>/<OBJ ID>?fields=parameterValues

例:このリクエストは、リッチテキストを含むparameterValue DE:Fieldに格納されたJSON内のリッチテキストを含むFieldの値を返します

{
data: {
    ID: "5e85e3f10000b99e8cef10af4e5c6c7b",
    name: "Zoom Integration Test",
    objCode: "PROJ",
    parameterValues: {
        "DE:Field with rich text": "{"blocks":[{"key":"dpfce","text":"This is a regular text","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"a9ic6","text":"Bold text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":9,"style":"BOLD"}],"entityRanges":[],"data":{}},{"key":"1b2a4","text":"Italic text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":11,"style":"ITALIC"}],"entityRanges":[],"data":{}},{"key":"4dle1","text":"Underline text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":14,"style":"UNDERLINE"}],"entityRanges":[],"data":{}},{"key":"10mip","text":"With all formating and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":18,"style":"BOLD"},{"offset":0,"length":18,"style":"ITALIC"},{"offset":0,"length":18,"style":"UNDERLINE"}],"entityRanges":[],"data":{}}],"entityMap":{}}",
        "DE:Other Type of Field": "Value",
        }
    }
}

例:これは、上の図に示されている応答の書式設定されたバージョンです。

{
   "blocks":[
      {
         "key":"dpfce",
         "text":"This is a regular text",
         "type":"unstyled",
         "depth":0,
         "inlineStyleRanges":[

         ],
         "entityRanges":[

         ],
         "data":{

         }
      },
      {
         "key":"a9ic6",
         "text":"Bold text and regular text",
         "type":"unstyled",
         "depth":0,
         "inlineStyleRanges":[
            {
               "offset":0,
               "length":9,
               "style":"BOLD"
            }
         ],
         "entityRanges":[

         ],
         "data":{

         }
      },
      {
         "key":"1b2a4",
         "text":"Italic text and regular text",
         "type":"unstyled",
         "depth":0,
         "inlineStyleRanges":[
            {
               "offset":0,
               "length":11,
               "style":"ITALIC"
            }
         ],
         "entityRanges":[

         ],
         "data":{

         }
      },
      {
         "key":"4dle1",
         "text":"Underline text and regular text",
         "type":"unstyled",
         "depth":0,
         "inlineStyleRanges":[
            {
               "offset":0,
               "length":14,
               "style":"UNDERLINE"
            }
         ],
         "entityRanges":[

         ],
         "data":{

         }
      },
      {
         "key":"10mip",
         "text":"With all formating and regular text",
         "type":"unstyled",
         "depth":0,
         "inlineStyleRanges":[
            {
               "offset":0,
               "length":18,
               "style":"BOLD"
            },
            {
               "offset":0,
               "length":18,
               "style":"ITALIC"
            },
            {
               "offset":0,
               "length":18,
               "style":"UNDERLINE"
            }
         ],
         "entityRanges":[

         ],
         "data":{

         }
      }
   ],
   "entityMap":{

   }
}

ブロック

リッチテキストコンテンツを格納するJSON オブジェクトは、ブロックとentityMapsの2つの主要な部分で構成されます。

ブロックは、単一行の書式設定されたテキストを表す JSON オブジェクトです。 1つのカスタムフィールドには複数のテキスト行を含めることができるため、各テキスト行には独自のブロックがあり、各ブロックはブロックと呼ばれる親配列の要素として表されます。

例:ここでは、カスタムフィールドの各テキスト行が、配列ブロック内のブロック要素にマッピングされます。

​ リッチテキストマッピング ​

各ブロック要素もJSON オブジェクトなので、各ブロックは、key、text、type、depth、inlineStyleRanges、entityRanges、dataなどの要素で構成されます。 これらの各要素は、次のように機能します。

  • キー:そのブロックの一意のID。 キーは、entityMaps を介してテキスト行をマッピングするために使用されます。 entityMaps について詳しくは、このドキュメントの entityMaps の節を参照してください。
  • テキスト:カスタムフィールドから保存されるテキストコンテンツの行。
  • タイプ:表示されるテキストのタイプを示します。 例えば、ブロックに格納されているテキスト行は、リストの一部である可能性があります。 その行が順序なしリストの一部である場合、そのタイプは unordered-list-item と定義されます。
  • リスト:現在はサポートされていませんが、近日中に利用可能になる予定です。
  • 深さ:行が順序付きリストまたは順序付きリストのネストされた部分である場合の行の深さを定義するパラメーター。
  • inlineStyleRanges:現在のブロックで表されるテキスト行に適用された書式の種類を表す配列。

例:次に、文字レベルで各スタイルを説明するinlineStyleRanges配列を示します。 この場合、インデックス 0 (オフセット:0)から始まる9文字(長さ:9)に太字スタイルが適用されています。

​ リッチテキストマッピング ​

1行に複数のタイプの書式が適用されている場合、スタイルはinlineStyleRanges配列の追加の要素にマッピングされます。

例:太字と斜体のテキストを含むテキスト行を保存すると、ブロックがどのように表示されるかを次に示します。

{
         "key":"a9ic6",
         "text":"Bold text and Italics",
         "type":"unstyled",
         "depth":0,
         "inlineStyleRanges":[
            {
               "offset":0,
               "length":21,
               "style":"BOLD"
            },
            {
               "offset":14,
               "length":7,
               "style":"ITALIC"
            }
         ],
         ...
      },
NOTE
20.3 リリース以降のすべてのバージョンでは、太字、斜体および下線の書式設定オプションがサポートされます。

entityMaps と entityRanges

データブロックには、カスタムテキストフィールドの外部にあるデータソースに接続される、ハイパーリンクやその他のタイプのスタイル設定された書式などのエンティティが含まれている可能性があります。

JSON からのプレーンテキストの取得

リッチテキスト形式のカスタムフィールドが送信されると、すべてのテキストが配列ブロックに保存されます。 ただし、フルテキストの各行は、親配列ブロックを構成する個別のブロック要素内のテキストパラメーターに格納されます。 そのため、テキスト全体を取得するには、各個別のテキスト行を抽出し、分析して戻す必要があります。 これは、ブロック内のすべての要素をループし、各テキストパラメーターを行区切り文字(\n)で連結することで実現できます。

例:次に、JSの例を示します。

const parameterValue = JSON.parse('{"blocks":[{"key":"dpfce","text":"This is a regular text","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"a9ic6","text":"Bold text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":9,"style":"BOLD"}],"entityRanges":[],"data":{}},{"key":"1b2a4","text":"Italic text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":11,"style":"ITALIC"}],"entityRanges":[],"data":{}},{"key":"4dle1","text":"Underline text and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":14,"style":"UNDERLINE"}],"entityRanges":[],"data":{}},{"key":"10mip","text":"With all formating and regular text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":18,"style":"BOLD"},{"offset":0,"length":18,"style":"ITALIC"},{"offset":0,"length":18,"style":"UNDERLINE"}],"entityRanges":[],"data":{}}],"entityMap":{}}');
let plainText = "";
parameterValue.blocks.forEach((block) => {
        plainText = plainText.concat(block.text, "\n");
})
console.log(plainText)

Workfront API を使用したリッチテキストフィールド値の保存

Workfront API を使用してリッチテキストフィールドの次の値を保存するには:

         ワールド 様こんにちは!!!
        これが最初の リッチテキスト です
  1. テキストの各行を配列ブロック内のブロック要素に整理することで、キャプチャしようとしているリッチテキストフィールドの値を表すJSONを作成します。

    code language-none
    {
        "blocks":[
                    {
                        "key":"0",
                        "text":"Hello World!!!",
                    },
                    {
                        "key":"1",
                        "text":"This is my first Rich Text",
                    }
                ]
    }
    
    
  2. inlineStyleRanges パラメーターを使用して、リッチテキスト形式をキャプチャします。

    code language-none
    {
        "blocks":[
                    {
                        "key":"0",
                        "text":"Hello World!!!",
                        "inlineStyleRanges": [
                                                {
                                                    "offset":6,
                                                    "length":11,
                                                    "style":"BOLD"
                                                }
                                            ]
                    },
                    {
                        "key":"1",
                        "text":"This is my first Rich Text",
                    }
                ]
    }
    
  3. 2行目をキャプチャするには、テキスト リッチテキスト​を太字と斜体の両方で書式設定する必要があります。

    code language-none
    {
        "blocks":[
                    {
                        "key":"0",
                        "text":"Hello World!!!",
                        "inlineStyleRanges": [
                                                {
                                                    "offset":6,
                                                    "length":11,
                                                    "style":"BOLD"
                                                }
                                            ]
                    },
                    {
                        "key":"1",
                        "text":"This is my first Rich Text",
                        "inlineStyleRanges": [
                                                {
                                                    "offset":17,
                                                    "length":26,
                                                    "style":"BOLD"
                                                },
                                                {
                                                    "offset":17,
                                                    "length":26,
                                                    "style":"ITALIC"
                                                }
                                            ]
                    }
                ],
        "entityMap":{
    
                    }
    }
    
    
    note
    NOTE
    entityMap機能は最初のリリースではサポートされていませんが、このJSONをリクエストに渡すには必須フィールドです。
  4. 上記のJSONのstringify メソッドを使用して、PUT リクエストを行い、更新を送信します。

    <OBJ Code><OBJ ID>
    
recommendation-more-help
workfront-help-quicksilver