Champs de texte enrichi dans l’API Adobe Workfront
Certains objets d’Adobe Workfront permettent d’enregistrer du texte avec un formatage en texte enrichi. Dans l’API Workfront, le texte enrichi est enregistré sous forme de JSON à l’aide du framework open source Draft.js.
Exemple de vue d’ensemble
Un champ personnalisé avec formatage en texte enrichi est appelé Field with rich text et peut être associé aux valeurs suivantes :
Exemple : requête GET de base pour récupérer la valeur du champ de formulaire personnalisé Field with rich text :
Exemple : cette requête renverra la valeur de Field with rich text en JSON stockée dans parameterValue DE: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",
}
}
}
Exemple : il s’agit d’une version formatée de la réponse présentée ci-dessus.
{
"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":{
}
}
Blocs
Les objets JSON qui stockent le contenu en texte enrichi sont composés de deux parties principales : blocks et entityMaps.
Un bloc est un objet JSON qui représente une seule ligne de texte formaté. Étant donné qu’un seul champ personnalisé peut comporter plus d’une ligne de texte, chaque ligne de texte a son propre bloc et chaque bloc est représenté comme un élément d’un tableau parent appelé blocks.
Exemple : ici, chaque ligne de texte d’un champ personnalisé correspond à un élément du tableau blocks.
Étant donné que chaque élément de bloc est également un objet JSON, chaque bloc est composé des éléments suivants : key, text, type, depth, inlineStyleRanges, entityRanges, et data. Chacun de ces éléments fonctionne comme suit :
- Key est l’identifiant unique de ce bloc. La clé est utilisée pour mapper une ligne de texte via entityMaps. Des informations détaillées sur entityMaps sont disponibles dans la section de ce document consacrée aux entityMaps.
- Text est la ligne de texte stockée dans le champ personnalisé.
- Type décrit le type de texte représenté. Par exemple, une ligne de texte stockée dans un bloc peut faire partie d’une liste. Si cette ligne de texte faisait partie d’une liste non ordonnée, son type serait défini comme suit : unordered-list-item.
- Les listes ne sont actuellement pas prises en charge, mais devraient l’être prochainement.
- Depth est un paramètre qui définit la profondeur de la ligne lorsque celle-ci est une partie imbriquée d’une liste ordonnée ou non ordonnée.
- inlineStyleRanges est un tableau décrivant le(s) type(s) de formatage appliqué(s) à la ligne de texte représentée par le bloc actuel.
Exemple : voici un tableau inlineStyleRanges qui décrit chaque style au niveau du caractère. Dans ce cas : 9 caractères (longueur : 9) à partir de l’index 0 (décalage : 0) ont le style Gras appliqué :
Dans le cas où plusieurs types de formatage ont été appliqués à une seule ligne, les styles seront associés à des éléments supplémentaires dans le tableau inlineStyleRanges.
Exemple : voici à quoi ressemblerait un bloc qui stocke une ligne de texte contenant un formatage mixte : texte en gras et italique.
{
"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 et entityRanges
Un bloc de données peut potentiellement contenir des entités telles que des hyperliens ou d’autres types de formatage stylisé liés à des sources de données situées en dehors du champ de texte personnalisé.
Exemples
Récupérer du texte brut à partir de JSON
Lorsqu’un champ personnalisé avec formatage en texte enrichi est soumis, tout le texte est stocké dans le tableau blocks. Cependant, chaque ligne du texte intégral est stockée dans le paramètre de texte dans chacun des éléments de bloc séparés qui constituent le tableau parent blocks. Ainsi, pour récupérer le texte intégral, chaque ligne de texte doit être extraite et recomposée. Cela peut être réalisé en parcourant tous les éléments des blocs et en concaténant tous les paramètres de texte ensemble, avec un délimiteur de ligne (\n).
Exemple : voici à quoi pourrait ressembler votre 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)
Enregistrer la valeur d’un champ de texte enrichi à l’aide de l’API Workfront
Pour enregistrer les valeurs suivantes d’un champ de texte enrichi à l’aide de l’API Workfront, procédez comme suit :
Hello World!!!
This is my first Rich Text (Il s’agit de mon premier texte enrichi).
-
Élaborer du JSON qui représente la valeur du champ de texte enrichi que vous essayez de capturer en organisant chaque ligne de texte dans un élément de bloc, dans le tableau blocks
code language-none { "blocks":[ { "key":"0", "text":"Hello World!!!", }, { "key":"1", "text":"This is my first Rich Text", } ] } -
Capturer le formatage du texte enrichi à l’aide du paramètre 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", } ] } -
Pour capturer la deuxième ligne, le texte « Ricj Text » doit être formaté en gras et en italique.
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 Bien que la fonctionnalité entityMap ne soit pas prise en charge dans la version initiale, il est toujours nécessaire de transmettre ce JSON dans une requête. -
Utiliser la méthode stringify sur le JSON décrite ci-dessus pour effectuer une requête PUT et envoyer des mises à jour