Visão geral

Ao migrar da interface antiga para a nova interface do AEM Guides, as atualizações do ui_config devem ser convertidas em configurações de interface mais flexíveis e modulares. Esta estrutura ajuda a adotar as alterações facilmente na barra_de_ferramentas_do_editor e em outras barras de ferramentas. O processo também suporta a modificação de outras visualizações e widgets no aplicativo.

Edição de JSON para telas diferentes

Arquivos JSON podem ser adicionados à seção Configuração da interface do editor XML para várias telas e widgets. Veja abaixo uma lista de widgets amplamente usados e suas IDs:

Estrutura geral de cada JSON

Cada JSON segue uma estrutura consistente:

Exemplo de estrutura JSON:

{
  "id" : "editor_toolbar",
  "view": {
    "items": [
      {
        ...,
        "targetEditor": {
          "mode": [
            "preview"
          ],
          "editor": [
            "xml"
          ]
        },
        "target": {
          "key": "label",
          "value": "Table",
          "viewState": "prepend"
        },
        ...
      },
    ]
  }
}

Compreendendo as propriedades de targetEditor

Abaixo está um detalhamento de cada propriedade, sua finalidade e valores compatíveis.

mode

Define o modo operacional do editor.

Valores com suporte: author, source, preview, layout (anteriormente toc), split

displayMode (opcional)

Controla a visibilidade ou a interatividade dos componentes da interface do usuário. O valor padrão é definido como show, se não for especificado.

Valores com suporte: show, hide, enabled, disabled

Exemplo:

 {
        "icon": "textBulleted",
        "title": "Custom Insert Bulleted",
        "on-click": "$$AUTHOR_INSERT_REMOVE_BULLETED_LIST",
        "key": "$$AUTHOR_INSERT_REMOVE_BULLETED_LIST",
        "targetEditor": {
          "documentType": [
            "ditamap"
          ],
          "mode": [
            "author"
          ],
          "displayMode": "hide"
        }
      },

editor

Especifica o tipo de documento primário no editor.

Valores com suporte: ditamap, bookmap, subjectScheme, xml, css, translation, preset, pdf_preset

documentType

Indica o tipo de documento principal.

Valores com suporte: dita, ditamap, bookmap, subjectScheme, css, preset, ditaval, reports, baseline, translation, html, markdown, conditionPresets

Valores adicionais podem ser suportados para casos de uso específicos.

Exemplo:

 {
        "icon": "textNumbered",
        "title": "Custom Numbered List",
        "on-click": "$$AUTHOR_INSERT_REMOVE_NUMBERED_LIST",
        "key": "$$AUTHOR_INSERT_REMOVE_NUMBERED_LIST",
        "targetEditor": {
          "documentType": [
            "dita",
            "ditamap"
          ],
          "mode": [
            "author",
            "source"
          ]

        }
      },

documentSubType

Classifica ainda mais o documento com base em documentType.

Valores adicionais podem ser suportados para casos de uso específicos.

Exemplo:

 {
        "icon": "rename",
        "title": "Custom Rename",
        "on-click": "$$PUBLISH_PRESETS_RENAME",
        "label": "Custom Rename",
        "key": "$$PUBLISH_PRESETS_RENAME",
        "targetEditor": {
          "documentType": [
            "preset"
          ],
          "documentSubType": [
            "nativePDF",
            "aemsite",
            "json"
          ]

        }
      },

flag

Indicadores booleanos para o estado ou os recursos do documento.

Valores com suporte: isOutputGenerated, isTemporaryFileDownloadable, isPDFDownloadable, isLocked, isUnlocked, isDocumentOpen

Além disso, você também pode criar um sinalizador personalizado dentro de extensionMap que é usado como um sinalizador em targetEditor. Aqui, extensionMap é uma variável global usada para adicionar chaves personalizadas ou valores observáveis.

Exemplo:

 {
        "icon": "filePDF",
        "title": "Custom Export pdf",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "documentType": [
            "markdown"
          ],
          "mode": [
            "preview"
          ],
          "flag": ["isPDFDownloadable"]

        }
      },

Exemplos

Veja abaixo um exemplo de como adicionar, excluir ou substituir um botão na barra de ferramentas do editor.

Adição de um botão

Adicionando um novo botão Inserir Tabela Personalizada em editor_toolbar para adicionar uma tabela simples que seja visível somente no modo de visualização.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "table",
        "title": "Insert Custom Table",
        "on-click": {
          "name": "$$AUTHOR_INSERT_ELEMENT",
          "args": [
            "simpletable",
            "table",
            "choicetable"
          ]
        },
        "key": "$$AUTHOR_INSERT_ELEMENT",
        "targetEditor": {
          "mode": [
            "preview"
          ],
        },
        "target": {
          "key": "label",
          "value": "Table",
          "viewState": "prepend"
        }
      }
    ]
  }
}

Excluir um botão

Excluir um botão da barra de ferramentas. Aqui removemos o botão de adição de imagens da barra de ferramentas do editor.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "hide": true,
        "target": {
          "key": "label",
          "value": "Image",
          "viewState": "replace"
        }
      }
    ]
  }
}

Substituição de um botão

Substituindo o botão Multimídia da barra de ferramentas pelo botão de inserção de link do Youtube, que só é visível no modo de autor.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "s2youtube",
        "title": "Youtube",
        "on-click": {
          "name": "$$AUTHOR_INSERT_ELEMENT",
          "args": "<object data='http://youtube.com'></object>"
        },
        "targetEditor": {
          "mode": [
            "author"
          ]
        },
        "target": {
          "key": "elementId",
          "value": "toolbar-multimedia",
          "viewState": "replace"
        }
      }
    ]
  }
}

Adição de um botão no modo de visualização

De acordo com o design, a visibilidade do botão é gerenciada separadamente para modos bloqueados e desbloqueados (somente leitura) para manter uma experiência do usuário clara e controlada. Por padrão, qualquer botão recém-adicionado fica oculto quando a interface está no modo somente leitura.
Para tornar um botão visível no modo somente leitura, você deve especificar um destino que o coloque dentro de uma subseção da barra de ferramentas que permaneça acessível mesmo quando a interface estiver bloqueada.
Por exemplo, ao especificar o destino como Baixar como PDF, você pode garantir que o botão apareça na mesma seção que um botão visível existente, tornando-o acessível no modo desbloqueado.

"target": {
  "key": "label",
  "value": "Download as PDF",
  "viewState": "prepend"
}

Adicionando um botão Exportar como PDF no modo Visualização, que estará visível no modo de bloqueio e desbloqueio.

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "filePDF",
        "title": "Export as PDF",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "editor": [
            "ditamap",
            "xml"
          ],
          "mode": [
            "preview"
          ]
        },
        "target": {
          "key": "label",
          "value": "Download as PDF",
          "viewState": "prepend"
        }
      },
      {
        "icon": "filePDF",
        "title": "Export as PDF",
        "on-click": "$$DOWNLOAD_TOPIC_PDF",
        "key": "$$DOWNLOAD_TOPIC_PDF",
        "targetEditor": {
          "editor": [
            "ditamap",
            "xml"
          ],
          "mode": [
            "preview"
          ]
        }
      }
    ]
  }
}

O trecho a seguir mostra o botão Exportar como PDF com o cenário de bloqueio.

Além disso, o botão Exportar como PDF com o cenário de desbloqueio pode ser visto no trecho abaixo.

Personalizar as opções que aparecem na lista suspensa Menu da barra de ferramentas do Editor

Você pode anexar, ocultar, substituir e adicionar opções personalizadas na lista suspensa Menu usando os exemplos a seguir.

Anexando

Anexar uma opção ao menu suspenso Aqui nós acrescentamos o botão de menu personalizado nas opções de Menu

{
        "icon": "specialCharacter",
        "title": "Custom menu button",
        "on-click": "$$AUTHOR_INSERT_SYMBOL",
        "targetEditor": {
          "editor": [
            "ditamap"
          ],
          "mode": [
            "author"
          ]
        },
        "target": {
          "key": "label",
          "value": "Version label",
          "viewState": "append"
        }
      }

Substituindo

Substituição de uma opção exibida na lista suspensa Menu. Aqui estamos substituindo Criar tarefa de revisão por Botão de menu personalizado 3.

{
        "icon": "specialCharacter",
        "title": "Custom menu button 3",
        "on-click": "$$AUTHOR_INSERT_SYMBOL",
        "target": {
          "key": "label",
          "value": "Create review task",
          "viewState": "replace"
        }

      }

Ocultar

Ocultar uma opção que aparece na lista suspensa Menu. Aqui estamos ocultando a opção Localizar e substituir do Menu.

{
        "hide": true,
        "target": {
          "key": "label",
          "value": "Find and replace",
          "viewState": "replace"
        }
      }

Adição de opção personalizada no submenu

Adicionar uma opção no submenu dentro da lista suspensa Menu.

{
        "icon": "viewAllTags",
        "title": "Toggle Tags View Goziamasu",
        "key": "AUTHOR_TOGGLE_TAG_VIEW",
        "target": {
          "key": "label",
          "value": "Track changes",
          "viewState": "replace"
        },
        "targetEditor": {
          "documentType": [
            "dita"
          ],
          "mode": [
            "author"
          ]
        }

      }

Como fazer upload de JSONs personalizados

Como fazer upload de CSS personalizado

Você também pode adicionar css para personalizar a aparência dos botões adicionados personalizados ou widgets ou botões já existentes na interface do usuário.

Para um botão personalizado recém-adicionado, adicione uma classe_de_extração ao botão ou componente personalizado dentro do JSON.
Para uma classe antiga, você também pode inspecionar o elemento e modificar as classes existentes.

{
  "icon": "table",
  "title": "Insert Custom Table",
  "extraclass": "custom-css",
  "key": "$$AUTHOR_INSERT_ELEMENT",
  "targetEditor": {
    "mode": [
      "preview"
    ],
  },
  "target": {
    "key": "label",
    "value": "Table",
    "viewState": "prepend"
  }
}

Exemplo para personalizar o css do botão

Aqui adicionamos um novo botão Inserir Tabela Personalizada na editor_toolbar para adicionar uma tabela simples que é visível somente no modo de visualização e aplicar um css personalizado a ela.
Esse css modifica o plano de fundo do botão e o tamanho da fonte de seu título.

#editor_toolbar {
  .custom-css {
    background-color: burlywood;
    font-size: 2rem;
  }
}

{
  "id": "editor_toolbar",
  "view": {
    "items": [
      {
        "icon": "table",
        "title": "Insert Custom Table",
        "extraclass": "custom-css",
        ...
      }
    ]
  }
}

Etapas para converter a configuração da interface do usuário em Json modulares