Adobe Workfront API のリッチテキストフィールド
作成対象:
- 開発者
Adobe Workfront の一部のオブジェクトでは、リッチテキスト形式のテキストを格納できます。Workfront API では、オープンソースフレームワークの Draft.js を使用して、リッチテキストが JSON として保存されます。
概要の例
リッチテキスト形式のカスタムフィールドは、リッチテキスト付きフィールドと呼ばれ、次の値を関連付けることができます。
例:リッチテキストカスタムフォームフィールドを含むフィールドの値を取得する基本的なGET リクエスト:
<OBJ Code><OBJ ID><OBJ Code><OBJ ID>
例:このリクエストは、リッチテキストを含む parameterValue DE:Field に保存されているリッチテキストを含む Field の値を JSON で返します
{
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 と entityMap の 2 つの主要な部分で構成されています。
ブロックは、単一行の書式設定されたテキストを表す JSON オブジェクトです。単一のカスタムフィールドに複数の行のテキストを含めることができるので、テキストの各行には独自のブロックがあり、各ブロックは、ブロックと呼ばれる親配列の要素として表されます。
例:この例では、カスタムフィールドの各行のテキストは、配列ブロック内のブロック要素にマッピングされています。
各ブロック要素も JSON オブジェクトなので、各ブロックは、key、text、type、depth、inlineStyleRanges、entityRanges、data の要素で構成されます。 これらの各要素は、次のように機能します。
- キー:そのブロックの一意の ID。 キーは、entityMaps を介してテキスト行をマッピングするために使用されます。entityMaps について詳しくは、このドキュメントの entityMaps の節を参照してください。
- テキスト:カスタムフィールドから保存されるテキストコンテンツの行。
- タイプ:表示されるテキストのタイプを表します。 例えば、ブロックに格納されているテキスト行は、リストの一部である可能性があります。その行が順序なしリストの一部である場合、そのタイプは unordered-list-item と定義されます。
- リスト:現在はサポートされていませんが、近日中に利用可能になる予定です。
- 深さ:行が順序付きリストまたは順不同リストのネストされた部分である場合の行の深さを定義するパラメーター。
- inlineStyleRanges:現在のブロックが表すテキスト行に適用された書式の種類を記述する配列です。
例:文字レベルで各スタイルを説明する inlineStyleRanges 配列を示します。 この場合、インデックス 0 (オフセット:0)から始まる 9 文字(長さ:9)には、スタイル Bold が適用されています。
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 からのプレーンテキストの取得
リッチテキスト形式のカスタムフィールドが送信されると、すべてのテキストが配列ブロックに保存されます。 ただし、完全なテキストの各行は、親配列ブロックを構成する個別のブロック要素内のテキストパラメーターに保存されます。 そのため、テキスト全体を取得するには、各個別のテキスト行を抽出し、分析して戻す必要があります。これは、ブロック内のすべての要素をループし、各テキストパラメーターを行区切り文字(\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":[ { "key":"0", "text":"Hello World!!!", }, { "key":"1", "text":"This is my first Rich Text", } ] }
-
inlineStyleRanges パラメーターを使用してリッチテキスト形式を取得します。
{ "blocks":[ { "key":"0", "text":"Hello World!!!", "inlineStyleRanges": [ { "offset":6, "length":11, "style":"BOLD" } ] }, { "key":"1", "text":"This is my first Rich Text", } ] }
-
2 行目をキャプチャするには、テキスト リッチテキスト を太字と斜体の両方で書式設定する必要があります。
{ "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
entityMap 機能は最初のリリースではサポートされていませんが、この JSON をリクエストで渡すには必須フィールドです。 -
上記の JSON に対して stringify メソッドを使用して、PUT リクエストを実行し、更新を送信します。
<OBJ Code><OBJ ID>