Champs de texte enrichi dans l’API Adobe Workfront
Créé pour :
- Développeur
Certains objets d’Adobe Workfront permettent d’enregistrer du texte avec un formatage en texte enrichi. Dans l’API Workfront, le texte enrichi est stocké au format JSON à l’aide du framework open source Draft.js.
Exemple de vue d’ensemble
Un champ personnalisé avec mise en forme de texte enrichi est appelé Champ avec texte enrichi et peut être associé aux valeurs suivantes :
Exemple : une requête GET de base pour récupérer la valeur du champ de formulaire personnalisé avec texte enrichi :
<OBJ Code><OBJ ID><OBJ Code><OBJ ID>
Exemple : cette requête renvoie la valeur de Field avec du texte enrichi dans le JSON stocké dans le paramètre value DE:Field avec du texte enrichi
{
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 dans la figure directement 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 de texte enrichi sont composés de deux parties principales : blocs et entityMaps.
Un bloc est un objet JSON qui représente une seule ligne de texte formaté. Puisqu’un seul champ personnalisé peut comporter plusieurs lignes de texte, chaque ligne de texte possède son propre bloc et chaque bloc est représenté sous la forme d’un élément dans un tableau parent appelé blocs.
Exemple : ici, chaque ligne de texte d’un champ personnalisé est mappée à un élément de bloc dans les blocs de tableau.
Comme chaque élément de bloc est également un objet JSON, chaque bloc est composé des éléments suivants : clé, texte, type, profondeur, inlineStyleRanges, entityRanges et données. Chacun de ces éléments fonctionne comme suit :
- Clé : 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.
- Texte : la ligne de contenu texte stockée à partir du 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.
- Listes : actuellement non pris en charge, mais devraient être disponibles prochainement.
- Profondeur : 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.
- inlineStyleRanges : tableau qui décrit le ou les types de mise en forme appliqués à la ligne de texte représentée par le bloc actif.
Exemple : voici un tableau inlineStyleRanges qui décrit chaque style au niveau des caractères. Dans ce cas, le style Gras a été appliqué à 9 caractères (longueur : 9) à partir de l’index 0 (décalage : 0) :
Dans le cas où plusieurs types de mise en forme ont été appliqués à une seule ligne, les styles sont mappés à des éléments supplémentaires dans le tableau inlineStyleRanges .
Exemple : voici à quoi un bloc ressemblerait lors du stockage d’une ligne de texte contenant une mise en forme 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"
}
],
...
},
NOTEentityMaps 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 mise en forme de texte enrichi est envoyé, tout le texte est stocké dans les blocs de tableau. Cependant, chaque ligne du texte intégral est stockée dans le paramètre text au sein de chacun des éléments de bloc distincts qui constituent les blocs de tableau parents. 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 votre JS pourrait ressembler :
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).
-
Créez un fichier JSON qui représente la valeur du champ de texte enrichi que vous essayez de capturer en organisant chaque ligne de texte en un élément de bloc dans les blocs de tableau.
{ "blocks":[ { "key":"0", "text":"Hello World!!!", }, { "key":"1", "text":"This is my first Rich Text", } ] } -
Capturez la mise en forme de texte enrichi à l’aide du paramètre inlineStyleRanges.
{ "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 Texte enrichi doit être mis en forme en gras et en italique.
{ "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":{ } }NOTEBien que la fonctionnalité entityMap ne soit pas prise en charge dans la version initiale, il s’agit toujours d’un champ obligatoire pour transmettre ce JSON dans une requête. -
Utilisez la méthode stringify sur le fichier JSON décrit ci-dessus pour effectuer une requête PUT et envoyer des mises à jour.
<OBJ Code><OBJ ID>