Adobe Workfront API のリッチテキストフィールド
Adobe Workfront の一部のオブジェクトでは、リッチテキスト形式のテキストを格納できます。Workfront API のリッチテキストは、オープンソースフレームワークの Draft.js を使用して JSON として格納されます。
概要の例
リッチテキスト形式のカスタムフィールドは、Field with rich text と呼ばれ、次の値を関連付けることができます。
例： カスタムフォームフィールド Field with rich text の値を取得する基本的な GET リクエスト：
例： このリクエストは、parameterValue DE:Field with rich text に保存されている JSON の Field with rich text の値を返します。
{
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 オブジェクトは、blocks と entityMaps の 2 つの主要部分で構成されます。
ブロックは、単一行の書式設定されたテキストを表す JSON オブジェクトです。1 つのカスタムフィールドには複数行のテキストを含めることができるため、テキストの各行には独自のブロックがあり、各ブロックは blocks という親配列の要素として表されます。
例： ここでは、カスタムフィールドの各テキスト行が、配列ブロック内のブロック要素にマッピングされます。
各ブロック要素も JSON オブジェクトであるため、各ブロックは、キー、テキスト、タイプ、深さ、inlineStyleRanges、entityRanges、および データ の要素で構成されます。これらの各要素は、次のように機能します。
- キー は、そのブロックの一意の識別子です。キーは、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"
}
],
...
},
entityMaps と entityRanges
データブロックには、カスタムテキストフィールドの外部にあるデータソースに接続される、ハイパーリンクやその他のタイプのスタイル設定された書式などのエンティティが含まれている可能性があります。
例
JSON からのプレーンテキストの取得
リッチテキスト形式のカスタムフィールドが送信されると、すべてのテキストが配列 blocks に格納されます。ただし、全文の各行は、親配列の ブロック を構成する個別のブロック要素内の テキストパラメーター に格納されます。そのため、テキスト全体を取得するには、各個別のテキスト行を抽出し、分析して戻す必要があります。これは、ブロック内のすべての要素をループし、各テキストパラメーターを行区切り文字（\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 を使用してリッチテキストフィールドの次の値を保存するには：
Hello World!!!
This is my first Rich Text
-
取り込もうとするリッチテキストフィールドの値を表す JSON を作成するには、各テキスト行を配列 blocks 内のブロック要素に編成します。
code language-none { "blocks":[ { "key":"0", "text":"Hello World!!!", }, { "key":"1", "text":"This is my first Rich Text", } ] } -
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", } ] } -
2 行目を取り込むには、「Rich Text」というテキストを太字と斜体の両方で書式設定する必要があります。
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 NOTE 最初のリリースでは entityMap 機能はサポートされていませんが、それでもこれは、リクエストでこの JSON を渡すために必要なフィールドです。 -
上記で概要を示した JSON で stringify メソッドを使用して、PUT リクエストを実行し更新を送信します。