Ir para o conteúdo

Como usar o widget de organograma no Jitterbit App Builder

Visão geral

O widget de organograma renderiza dados hierárquicos, como uma estrutura de subordinação, como um organograma interativo em uma página do App Builder. O widget em si não armazena dados: ele chama um endpoint REST que você expõe (seu parâmetro jsonURL) usando uma chave de API que você gera e renderiza qualquer JSON hierárquico que esse endpoint retorna.

Nota

O widget de organograma está disponível na biblioteca de download de widgets.

Orgchartexample

As etapas são:

Configurar o App Builder como uma API

Antes que o widget possa exibir qualquer coisa, ele precisa de um endpoint REST para chamar dados. Para expor seus dados de organograma através da API REST do App Builder, siga as etapas em Publicar um app Jitterbit App Builder como um endpoint de API REST:

  1. Configure uma chave de API do provedor de segurança. Por exemplo, nomeie-a como OrgChartAPI.

  2. Configure um endpoint para sua aplicação. Por exemplo, use charts como o valor do Endpoint.

  3. Publique um recurso para a tabela ou objeto que contém seus dados de organograma. Por exemplo, use roster como o valor do Endpoint do recurso.

    Ao configurar os campos do recurso, desmarque Incluir por padrão para qualquer coluna não necessária para o organograma e defina Limite máximo de GET se necessário, dependendo do número de níveis em seu organograma.

  4. Configure chaves de API para usuários para qualquer pessoa que precise acessar esses dados.

Configurar o widget de organograma

Com seus dados expostos como um endpoint REST, instale o widget em si e aponte-o para esse endpoint:

  1. Faça upload do widget de organograma para o App Builder, em uma coleção à qual o app com o qual você deseja trabalhar tenha acesso.

  2. Configure os parâmetros exigidos pelo widget, conforme enumerado na Biblioteca de Download de Widgets. Os valores inseridos diferenciam maiúsculas de minúsculas. O valor jsonURL segue a convenção de URI da API REST: combine a URL base da API REST da sua instância com o Endpoint da sua aplicação e o Endpoint do recurso. Por exemplo, https://localhost/rest/v1/charts/roster.

Opcionalmente, você pode personalizar as cores do organograma editando os arquivos CSS inclusos no arquivo .zip do widget:

  • As cores de rótulo e borda são definidas em \Css\vinyl.orgchart.css, usando valores hexadecimais.

  • As cores de linha e hover são definidas em \Css\jquery.orgchart.css, usando valores RGB.

Adicionar o widget a uma página do App Builder

Por fim, incorpore o widget configurado em uma página e certifique-se de que ele tenha acesso à chave de API e ao valor jsonURL necessários para chamar seu endpoint:

  1. Navegue até a página do app onde você deseja exibir o widget e adicione um painel de Linha única que sempre retorna um registro. Por exemplo, use a tabela Param ou User.

  2. Adicione um controle de Texto ao painel e, em seguida, adicione o widget de organograma a esse controle.

  3. Se o organograma não for exibido, a fonte de dados do painel pode não estar fornecendo os valores necessários do widget. Opcionalmente:

  4. Configure a fonte de dados que o painel está usando para ter um registro que retorna a chave de API e a jsonURL usada pelo organograma.

  5. Adicione dois controles de Texto ocultos ao painel, mapeados para a chave de API e a jsonURL. Você pode armazenar esses valores em uma tabela de Param, por exemplo.