Ir para o conteúdo

Como Usar o Widget de Organograma

Este artigo fornece uma visão geral do uso do widget Org Chart em App Builder para obter um diagrama de Organograma em um painel em um aplicativo.

Nota

O widget Organograma está disponível na Biblioteca de download de widgets

Exemplo de organograma

Configurar App Builder ser uma API

  1. Vá para o App Builder Centro de controle > Provedores de segurança no menu Conectar

  2. No painel Autenticação do usuário no lado direito, clique em Criar

    1. Dê ao Provedor um Nome. Por exemplo: 'OrgChartAPI'
    2. Para Tipo, selecione Chave API
    3. Clique em Salvar

  3. Navegue até o App Builder Centro de controle > no menu Build, clique em REST APIs e Webhooks > selecione o aplicativo que você está configurando e clique em Gerenciar Endpoints

  4. Localize o aplicativo na tela resultante que você está configurando e clique no ícone de lápis Editar
  5. Insira o valor onde a API acessará o recurso no campo Endpoint. Por exemplo: 'charts'
  6. Clique no x para sair da tela
  7. Clique em Criar em Objetos de Negócios e selecione a Tabela ou Objeto que contém seus Dados do Organograma e defina um valor para o Endpoint. Por exemplo: 'roster'
  8. Clicar no ícone Estrutura permitirá o controle sobre quais campos estarão disponíveis na API caso você queira desativar quaisquer colunas que não sejam necessárias para o Organograma.
  9. Clicar no ícone pop-up permite que você defina o número de linhas que a API pode retornar. Aumente isso se necessário, dependendo do número de níveis no seu Organograma.
  10. Navegue até o App Builder App Workbench > Seguro > Gerenciamento de usuários

  11. Selecione um usuário existente ou crie um novo usuário para usar na chamada de API

    1. O usuário deve ser configurado para o tipo de login interativo
    2. O usuário não precisa ter autenticação local

  12. Na tela pop-up do usuário selecionado/criado, clique em Chaves

  13. Clique em Criar e escolha o Provedor de API criado na Etapa 2. Copie o valor da Chave gerado para o Usuário.
  14. Opcionalmente, configure quaisquer funções/grupos de segurança adicionais para o Objeto que possam ser necessários.

Configurar o Widget do Organograma

  1. Carregue o widget de organograma para App Builder, para uma coleção à qual o aplicativo com o qual você deseja trabalhar tem acesso.
  2. Configure todos os Parâmetros necessários para o widget, conforme enumerado na Biblioteca de Download de Widgets. Os valores inseridos diferenciam maiúsculas de minúsculas, e o valor jsonURL pode ser recuperado em Control Center > REST APIs & Webhooks > localize a entrada Application configurada acima e clique no ícone Doc correspondente. A URL resultante será parecida com https://localhost/rest/v1/roster/org_chart

Se você quiser alterar as cores do Organograma, você precisa modificar os arquivos no arquivo .Zip para o widget

  1. Os valores de cor para o Rótulo e o quadro estão em \Css\vinyl.orgchart.css. Valores em hexadecimal
  2. Os valores de cor para as linhas, cor de foco etc. estão em \Css\jquery.orgchart.css. Valores em RGB

Adicione o Widget a an App Builder página

  1. Navegue até a página do aplicativo onde você quer exibir o Widget e adicione um painel Single Row que sempre retornará um registro. Por exemplo: use a tabela Param ou User.
  2. Adicione um controle de texto e adicione o widget de organograma ao controle

  3. Se o Organograma não estiver sendo exibido, você pode opcionalmente:

    1. Configure a fonte de dados que o painel está usando para ter um registro que retorna a chave da API, bem como a URL JSON que está sendo usada pelo organograma
    2. Adicione 2 Hidden Text Controls ao painel, que mapeiam para a API Key e a JSON Url. Você pode armazenar esses valores de uma tabela Param, por exemplo.