Campos de rich text na API do Adobe Workfront

Alguns objetos no Adobe Workfront permitem o armazenamento de texto com formatação rich text. Na API do Workfront, 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 Campo com rich text e pode ter os seguintes valores associados a ele:

Exemplo de rich text

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

GET /attask/api-internal/<OBJ Code>/<OBJ ID>?fields=parameterValues#
OR
GET /attask/api/v12.0/<OBJ Code>/<OBJ ID>?fields=parameterValues

Exemplo: essa solicitação retornará o valor de Campo com rich text em JSON armazenado no parameterValue DE:Field 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 apresentada na figura diretamente 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 principal chamada blocos.

Exemplo: aqui, cada linha de texto de um campo personalizado é mapeada para um elemento de bloco nos blocos de matriz.

Mapeamento de rich text

Como cada elemento de bloco também é um objeto JSON, cada bloco é composto pelos elementos: chave, texto, tipo, profundidade, inlineStyleRanges, entityRanges e dados. 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 do conteúdo de texto que está sendo armazenada no 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.
  • Listas: não compatível no momento, mas deverá estar disponível em breve.
  • Profundidade: um parâmetro que 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: esta é uma matriz inlineStyleRanges que descreve cada estilo no nível de caractere. Nesse caso: 9 caracteres (comprimento: 9) a partir do índice 0 (deslocamento: 0) tinham o estilo Negrito aplicado:

Mapeamento de rich text

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, Texto 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 nos blocos de matriz. No entanto, cada linha do texto completo é armazenada no parâmetro text em cada um dos elementos de bloco separados que compõem os blocos de matriz principais. 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: esta é a aparência do seu 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)

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 nos blocos de matriz.

    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 do PUT e enviar atualizações.

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