Criar aplicativos personalizados para o Workfront com o Adobe App Builder

As extensões de interface do usuário do Workfront, viabilizadas pelo Adobe App Builder, permitem que clientes e parceiros criem experiências de usuário personalizadas. Essas ferramentas aumentam a eficiência, fornecem experiências integradas e conectadas, melhoram significativamente a satisfação do usuário e ajudam as empresas a concretizar sua visão exclusiva.

Por exemplo, sem as extensões da interface do usuário do Workfront, um gerente de projeto pode precisar alternar entre o Workfront e um sistema de rastreamento de tempo separado para registrar horas. Com as extensões da interface do usuário, o rastreamento de tempo pode ser integrado diretamente à experiência do Workfront, simplificando o fluxo de trabalho e economizando tempo. Além disso, você pode adicionar componentes personalizados para melhorar a usabilidade, automatizar tarefas repetitivas e aprimorar o gerenciamento de conteúdo com recursos como marcação de metadados e visualizações de conteúdo. O Adobe App Builder também oferece escalabilidade e gerenciamento de identidade (IMS) robusto, garantindo personalização segura e eficiente em qualquer escala.

As extensões da interface do usuário do Workfront oferecem vários benefícios principais:

Depois que um aplicativo é criado no App Builder do Adobe, um administrador do Workfront pode adicioná-lo ao Menu principal do Workfront e ao painel de navegação esquerdo usando modelos de layout. Um usuário com o modelo de layout que clica no aplicativo vê o aplicativo incorporado no Workfront, em vez de precisar abri-lo separadamente.

Este artigo descreve como acessar o App Builder e usar um template para criar um aplicativo.

Para obter informações sobre como adicionar um aplicativo personalizado a modelos de layout, consulte Personalizar o menu principal usando um modelo de layout e Personalizar o painel esquerdo usando um modelo de layout.

Pré-requisitos

Você deve ter o seguinte:

Acessar o Adobe App Builder

Para criar extensões de interface do usuário, você deve ter acesso ao Adobe App Builder na Adobe Developer Console.

Instruções adicionais estão disponíveis no site do Adobe Developer.

Adicionar desenvolvedores à Adobe Admin Console

Obter acesso ao App Builder

As organizações devem trabalhar com os gerentes de conta para comprar o App Builder.

Se o AppBuilder estiver configurado corretamente, você deverá ver Criar projeto a partir do modelo como parte da criação de um novo projeto.

Criar um novo projeto na Adobe Developer Console

Você deve usar o Adobe Developer Console para criar sua extensão de interface do usuário.

Instruções adicionais estão disponíveis no site do Adobe Developer.

Usar a CLI do Adobe Developer (aio)

O Adobe fornece uma CLI de código aberto que você pode usar para criar o aplicativo do App Builder.

Instruções adicionais estão disponíveis no GitHub e no site do Adobe Developer:

Para obter mais informações sobre as pastas e os arquivos do seu projeto, consulte o site do Adobe Developer.

Criar as extensões no VSCode

A configuração do arquivo App.js é necessária para habilitar a navegação pelo menu principal do Workfront ou pela navegação secundária (painel esquerdo).

A configuração do arquivo ExtensionRegistration.js é necessária para exibir as extensões nos modelos de layout do Workfront.

Os exemplos a seguir mostram como adicionar aplicativos personalizados ao Menu principal do Workfront e ao painel esquerdo de um objeto, usando as Extensões de interface do usuário.

Configurar ExtensionRegistration.js

Para permitir aplicativos personalizados no menu principal do Workfront:

Na função ExtensionRegistration, você deve ver o código a seguir. Esse código foi criado para você pelo modelo. Este código pode ser adicionado para criar itens de menu adicionais. Substitua IDs e URLs.

"
mainMenu: {

getItems() {

return [

{

id: 'main-menu-label',

url: '/index.html#/main-menu-label',

label: 'Rótulo do menu principal',

icon: icon1,

},

];

},

}
"

Permitir aplicativos personalizados na navegação do painel esquerdo do Workfront

Para permitir aplicativos personalizados na navegação do painel esquerdo do Workfront:

Incorporar um aplicativo usando um formulário personalizado do Workfront

O ponto de extensão do widget de formulários é um recurso de extensão de interface do usuário no Adobe Workfront que permite criar widgets personalizados que podem ser incorporados a formulários personalizados do Workfront. Diferentemente de outros pontos de extensão que adicionam itens de navegação ou opções de menu, os widgets fornecem uma maneira de exibir conteúdo personalizado em painéis dedicados dentro de campos de formulário personalizados.

Os widgets são componentes modulares da interface do usuário que podem ser adicionados aos formulários personalizados do Workfront como campos de formulário. Eles fornecem uma maneira de exibir funcionalidades personalizadas, visualizações de dados ou conteúdo externo diretamente em interfaces de formulários personalizadas, permitindo que os usuários interajam com a lógica personalizada ao preencher formulários.

Configurar uma extensão de widget

Assim como os pontos de extensão da interface do usuário para o Menu Principal e a navegação secundária, o ponto de extensão dos "widgets" é configurado no objeto de métodos do componente ExtensionRegistration, geralmente no campo ExtensionRegistration.js. Isso significa que o uso do widget de formulários requer apenas a adição de um item "widget" em extesionregistration com uma rota válida em seu app.js:

javascript


Apply to ExtensionReg...

widgets: {

  getItems() {

    return [

      {

        id: "test2",

        url: "/index.html#/widgets1",

        label: "Test Widget with dimensions",

        dimensions: {

          height: 450,

          width: 300,

          maxHeight: 600,

          maxWidth: 400,

        },

      },

      {

        id: "test",

        url: "/index.html#/widgets1",

        label: "Test Widget without dimensions",

      },

    ];

  },

},

Propriedades de configuração do widget

Propriedades Necessárias

Propriedades Opcionais

Propriedades do Dimension

O objeto dimensions permite controlar as restrições de tamanho e layout do widget:

Exemplo de configurações do Dimension

// Fixed size widget

dimensions: {

  height: 300,

  width: 250,

}

// Flexible height with width constraint

dimensions: {

  width: 300,

  maxHeight: 500,

}

// Height constraint only

dimensions: {

  height: 400,

  maxWidth: 350,

}

// No dimensions - uses default sizing

{}

Dados de contexto

Os widgets têm acesso ao mesmo contexto compartilhado que outros pontos de extensão, incluindo:

Adicionar um widget a um formulário personalizado do Workfront

Um aplicativo pode ser incorporado em um formulário personalizado do Workfront usando o tipo de campo "Extensões de interface do usuário". Depois de adicionar o campo, selecione um widget de formulários. A lista de widgets é baseada em aplicativos ativos na sua organização IMS ou aplicativo ativo localmente quando extensionoverride=TRUE.

Configurar App.js

Para obter mais informações sobre como desenvolver e executar o aplicativo, consulte o site do desenvolvedor do Adobe.

Contexto compartilhado

O contexto compartilhado é usado para compartilhar dados do Workfront com uma extensão da interface do usuário. Os dados disponíveis por meio do contexto compartilhado incluem os dados do usuário e o contexto do aplicativo.

Usuário

As extensões de interface do usuário do Workfront compartilham dados do usuário. O objeto do usuário disponível por meio do contexto compartilhado inclui uma ID de usuário do Workfront e o endereço de email do usuário.

user = (conn?.sharedContext?.get("user")); // {ID: '1', email: 'test@aaa.com'} userID = user.ID userEmail = user.email

Contexto do aplicativo

Ao adicionar um aplicativo personalizado usando um ponto de extensão de Navegação secundário, é comum que o aplicativo personalizado use dados de contexto como uma ID de projeto ou ID de documento. Para esses dados, o contexto compartilhado inclui um código de objeto e uma ID de objeto.

Este é um exemplo para obter o contexto do aplicativo para documentos:

context = conn?.sharedContext; // Using the connection created above, grab the document details from the host tunnel. // conn?.host?.document?.getDocumentDetails().then(setDocDetails);

Testar o aplicativo no Workfront

Ao desenvolver seu aplicativo do App Builder para o Workfront, talvez seja necessário testar seu aplicativo no Workfront sem publicá-lo.

No aplicativo App Builder, você pode iniciar o aio app run para desenvolvimento local. Isso fornece a você uma URL, normalmente algo como https://localhost:9080. Como alternativa, você pode executar aio app deploy para obter um domínio estático do Adobe. Anote esses URLs para uso futuro.

Em seguida, navegue até a página específica em que deseja desenvolver no navegador. Abra as ferramentas do desenvolvedor e acesse o Armazenamento local workfront.com ou workfront.adobe.com. Aqui, você deve adicionar uma entrada. Use extensionOverride como chave e a URL da App Builder anotada anteriormente como o valor.

Se a configuração foi concluída corretamente, ao recarregar a página de modelo de layout no Workfront, você verá os botões do aplicativo App Builder. Adicione os botões do aplicativo ao Menu principal e ao painel esquerdo para um objeto e verifique se eles são exibidos corretamente nessas áreas.

Instruções adicionais estão disponíveis no site do Adobe Developer, com um exemplo do AEM: https://developer.adobe.com/uix/docs/guides/preview-extension-locally/

Desabilitar sinalizador para permitir testes locais no Chrome versão 142 e posterior

A versão 142 do Chrome introduz Restrições de acesso à rede local. Essas restrições podem interferir nos ambientes de teste locais.

Para resolver o problema, você deve desabilitar a Verificação de Acesso à Rede Local desativando o sinalizador correspondente nas configurações do Chrome: chrome://flags/#local-network-access-check.

Para desativar o sinalizador

Publicar aplicativos e aprovar o envio

Para publicar o aplicativo e aprová-lo, siga as instruções no site do Adobe Developer.