Campos de rich text na API do Adobe Workfront

Alguns objetos no Adobe Workfront permitem o armazenamento de texto com formatação rich text. No Workfront API, o rich text é armazenado como JSON usando a estrutura de código aberto Draft.js.

Exemplo de visão geral

Um campo personalizado com formatação rich text é chamado de Campo com rich text e pode ter os seguintes valores associados a ele:

Exemplo: uma solicitação básica do GET para recuperar o valor do campo de formulário personalizado Campo com rich text:

<OBJ Code><OBJ ID><OBJ Code><OBJ ID>

Exemplo: esta solicitação retornará o valor de Campo com rich text em JSON armazenado no parameterValue DE:Campo com 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",
        }
    }
}

Exemplo: esta é uma versão formatada da resposta mostrada na figura acima

{
   "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":{

   }
}

Blocos

Os objetos JSON que armazenam o conteúdo rich text são compostos de duas partes principais: blocos e entityMaps.

Um bloco é um objeto JSON que representa uma única linha de texto formatado. Como um único campo personalizado pode ter mais de uma linha de texto, cada linha de texto tem seu próprio bloco, e cada bloco é representado como um elemento em uma matriz pai chamada blocos.

Exemplo: Aqui, cada linha de texto de um campo personalizado mapeia para um elemento de bloco nos blocos de matriz

Como cada elemento de bloco também é um objeto JSON, cada bloco é composto pelos elementos: key, text, type, depth, inlineStyleRanges, entityRanges e data. Cada um desses elementos funciona da seguinte maneira:

  • Chave é o identificador exclusivo desse bloco. A chave é usada para mapear uma linha de texto via entityMaps. Detalhes sobre entityMaps podem ser encontrados na seção entityMaps neste documento.
  • Texto é a linha de conteúdo de texto que está sendo armazenada a partir do campo personalizado.
  • Tipo descreve o tipo de texto que está sendo representado. Por exemplo, uma linha de texto que está sendo armazenada em um bloco pode fazer parte de uma lista. Se essa linha de texto fosse parte de uma lista não ordenada, seu tipo seria definido como: unordered-list-item.
  • As listas não são compatíveis no momento, mas devem estar disponíveis em breve.
  • Profundidade Esse parâmetro define a profundidade da linha quando ela é uma parte aninhada de uma lista ordenada ou não ordenada.
  • inlineStyleRanges é uma matriz que descreve o(s) tipo(s) de formatação que foram aplicados à linha de texto representada pelo bloco atual.

Exemplo: Aqui está uma matriz inlineStyleRanges que descreve cada estilo no nível de caractere. Neste caso: 9 caracteres (comprimento: 9) a partir do índice 0 (deslocamento: 0) tiveram o estilo Negrito aplicado:

Caso vários tipos de formatação tenham sido aplicados a uma única linha, os estilos serão mapeados para elementos adicionais na matriz ​ inlineStyleRanges.

Exemplo: Esta é a aparência de um bloco ao armazenar uma linha de texto que contém a formatação mista: Negrito e Itálico

{
         "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
Todas as versões após a versão 20.3 oferecerão suporte às opções de formatação em negrito, itálico e sublinhado.

entityMaps e entityRanges

Um bloco de dados pode conter entidades como hiperlinks ou outros tipos de formatação estilizada que estão conectadas a fontes de dados localizadas fora do campo de texto personalizado.

Exemplos

Recuperando texto sem formatação do JSON

Quando um campo personalizado com formatação rich text é enviado, todo o texto é armazenado na matriz blocos. No entanto, cada linha do texto completo é armazenada no parâmetro de texto em cada um dos elementos de bloco separados que compõem a matriz pai blocos. Portanto, para recuperar o texto completo, cada linha de texto separada precisa ser extraída e separada novamente. Isso pode ser feito fazendo um loop sobre todos os elementos em blocos e concatenando cada parâmetro de texto, com um delimitador de linha (\n).

Exemplo: Veja como o JS pode ser:

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)

Salvamento de um valor de campo de rich text usando a API do Workfront

Para salvar os seguintes valores de um campo rich text usando a API do Workfront:

        Olá Mundo!!!
        Este é meu primeiro Rich Text
  1. Construir JSON que representa o valor do campo de rich text que você está tentando capturar organizando cada linha de texto em um elemento de bloco, na matriz blocos

    code language-none
    {
        "blocks":[
                    {
                        "key":"0",
                        "text":"Hello World!!!",
                    },
                    {
                        "key":"1",
                        "text":"This is my first Rich Text",
                    }
                ]
    }
    
    
  2. Capture a formatação de rich text usando o parâmetro 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. Para capturar a segunda linha, o texto "Rich Text" deve ser formatado em negrito e itálico.

    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
    Embora a funcionalidade entityMap não seja compatível durante a versão inicial, ela ainda é um campo obrigatório para transmitir esse JSON em uma solicitação
  4. Use o método stringify no JSON descrito acima para fazer uma solicitação PUT e enviar atualizações

    <OBJ Code><OBJ ID>
    
recommendation-more-help
5f00cc6b-2202-40d6-bcd0-3ee0c2316b43