Ir para o conteúdo

Como Usar o Widget de Organograma

Este artigo fornece uma visão geral do uso do widget Organograma no Vinyl para obter um diagrama Organograma em um painel de um aplicativo.

Nota

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

Exemplo de organograma

Configure o Vinyl para Ser uma API

  1. Vá para Vinyl Control Center > Security Providers no menu Connect

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

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

  3. Navegue até o Vinyl Control Center > no menu Build clique em REST APIs & Webhooks > selecione o aplicativo que você está configurando e clique em Manage Endpoints

  4. Localize o aplicativo na tela resultante que você está configurando e clique no ícone Editar de lápis
  5. Insira o valor onde a API acessará o recurso no campo Endpoint. Por exemplo: 'gráficos'
  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 os Dados do Organograma e defina um valor para o Endpoint. Por exemplo: 'lista'
  8. Clicar no ícone Estrutura permitirá o controle sobre quais campos estão disponíveis na API se você quiser desativar quaisquer colunas que não sejam obrigatórias para o Organograma.
  9. Clicar no ícone pop-up permite definir o número de linhas que a API pode retornar. Aumente se necessário, dependendo do número de níveis no seu Organograma.
  10. Navegue até Vinyl 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 estar 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 que é 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 de Organograma

  1. Carregue o widget Organograma no Vinyl, em uma coleção à qual o aplicativo com o qual você deseja trabalhar tenha acesso.
  2. Configure todos os parâmetros exigidos pelo widget, conforme enumerados 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 do aplicativo configurada acima e clique no ícone do documento correspondente. O URL resultante será parecido com https://localhost/rest/v1/roster/org_chart

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

  1. Os valores de cores do rótulo e da borda estão em \Css\vinyl.orgchart.css. Valores em hexadecimal
  2. Os valores de cores das linhas, cor de foco, etc., estão em \Css\jquery.orgchart.css. Valores em RGB

Adicione o Widget a uma Página de Vinyl

  1. Navegue até a página do aplicativo onde deseja exibir o widget e adicione um painel Linha única 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ê poderá, opcionalmente:

    1. Configure a fonte de dados que o painel está usando para ter um registro que retorne a chave de API, bem como o URL JSON que está sendo usado pelo organograma
    2. Adicione 2 controles de texto ocultos ao painel, que mapeiam para a chave de API e o URL JSON. Você pode armazenar esses valores de uma tabela Param, por exemplo.