Extensões personalizadas da interface do usuário: índice do artigo

O Fusion pode exibir sua própria interface da Web dentro da interface. Você cria um pequeno aplicativo web, chamado de extensão, publica-o no Adobe e ele aparece como um botão na navegação do Fusion. Quando um usuário clica nele, sua interface do usuário é carregada na área principal do Fusion e recebe automaticamente informações sobre quem está conectado, em qual organização e equipe ele está trabalhando e muito mais.

Esta seção da documentação de fusão o orienta por todo o processo, sem assumir a experiência anterior com o Adobe App Builder ou estruturas de front-end. Também inclui o código necessário, juntamente com explicações desse código.

Quando usar este guia

Use este guia se quiser adicionar uma tela ou ferramenta personalizada ao Fusion. Você não precisa ser um desenvolvedor especialista. Você precisa se sentir confortável copiando comandos em um terminal e editando alguns arquivos de texto.

Para criar uma extensão de interface do usuário personalizada, você precisará de uma Adobe ID e acesso a uma organização da Adobe (o mesmo tipo de acesso que você usa para fazer logon no Fusion).

O que você vai criar

Ao final deste guia você terá:

  1. Um projeto Adobe App Builder gratuito. É aqui que sua extensão fica.
  2. Um pequeno aplicativo Web que renderiza sua interface personalizada.
  3. Esse aplicativo web se conectou a um dos pontos de extensão do Fusion para que apareça na navegação do Fusion.
  4. Sua interface do usuário lendo o contexto em tempo real do Fusion, como o usuário, a organização e a equipe atuais, e reagindo quando o usuário alterna entre organização ou equipe.
  5. A extensão foi publicada para que outros usuários da organização possam visualizá-la.

Índice

Leia as páginas em ordem na primeira vez. Mais tarde você pode pular direto para o que você precisa.

#
Página
O que ele cobre
1
Visão geral e principais conceitos
O vocabulário, a arquitetura e para que serve cada ponto de extensão do Fusion.
2
Configurar as ferramentas e a conta do Adobe
Node.js, a CLI do Adobe I/O, fazendo logon e criando seu projeto na Adobe Developer Console.
3
Criar o projeto e configurá-lo para Fusion
Gere um projeto App Builder genérico com a linha de comando aio (não um modelo específico do produto). Em seguida, aponte seu projeto para um ponto de extensão do Fusion e registre seu widget.
5
Criar a interface
Renderize sua tela personalizada e conclua a conexão (“handshake”) com o Fusion.
6
A referência de contexto do Fusion
Cada campo do Fusion envia a você, o que significa e como reagir a alterações.
7
Publicar sua extensão
Crie, implante e torne sua extensão visível no Fusion.
8
Solução de problemas
Correções para os erros mais comuns.
9
Apresentação de demonstração
Um script linear de copiar e colar: scaffold do modelo genérico do Shell da Experience Cloud → redirecionar para o Fusion → implantar no Stage → executar no Fusion. Melhor para uma demonstração ao vivo.
10
Chamada de APIs do Workfront e Fusion
Chame APIs de back-end a partir de sua extensão sem acessar o CORS do navegador, usando um proxy de ação de tempo de execução. Abrange require-adobe-auth, cabeçalhos Fusion v3 e um exemplo trabalhado.

Nota de disponibilidade

Atualmente, o Fusion expõe esses pontos de extensão:

  • fusion/nav-organization/1 — aparece na seção Organização.
  • fusion/nav-team/1 — aparece na seção Equipe.

Antes de publicar em um desses, o ponto de extensão deve ser integrado para sua organização da Adobe. Se a etapa de publicação falhar informando que o ponto de extensão “não existe”, consulte Solução de problemas.

Documentação oficial do Adobe

Este guia é específico do Fusion. Para a plataforma subjacente, as referências canônicas são:

recommendation-more-help
workfront-fusion-help-workfront-fusion