Widgets

Os widgets consistem em um agrupamento de elementos para gerar uma visões gráfica e exibir os dados indexados na plataforma.

Criar um Widget

Acesse a área administrativa e navegue para área: "Widgets". Clique no botão de mais para criar um novo widget, preencha todos os campos e clique em "salvar".

Uma vez criado o novo widget clique para navegar para a página de detalhes.

Estrutura Básica

Um widget é um código JSON que possúi quatro atributos principais: Container, Conteúdos, Camadas e Fontes de Dados.

{
  "container": {...},
  "contents": [...],
  "layers": [...],
  "datasources": [...]
}

Dito isso para criar um novo widget devemos obrigatóriamente definir pelo menos um conteúdo contendo ao menos um elemento. O sistema define automaticamente as configurações básicas do container e uma camada com o código root.

INFO

O atributo de classe (class) deve utilizar a biblioteca Tailwind CSS como referência.

Já para definir o valor do atributo estilo (style) deve utilizar a notação padrão de CSS.

Container

• Tag: container
• Tipo: object
• Atributos: class | style | elevation | click | height | width

O Container funciona para definidir configurações que serão realizadas no agrupador de todas as camadas, conteúdos e elementos do Widget. Mesmo que não seja definido um container a plataforma vai criar um container automaticamente.

{
  "container": {
    "elevation": 2,
    "height": "190px",
    "style": "background-color: unset !important;",
    "width": "170px"
  }
}

Container Click

• Tag: click
• Tipo: object
• Atributos: content | title | type | height | width

O atrubuto click é utilizado para definir o comportamento da ação de click no widget como um topo.

Para definir

{
  "container": {
    "click": {
      "content": {
        "type": "widget",
        "widgetCode": "dash-principal-program-modal"
      },
      "title": "Programa Corporativo",
      "type": "contentModal",
      "width": "1300px"
    }
  }
}

Camadas

• Tag: layers
• Tipo: array
• Atributos: code | class | style | full | top | right | bottom | left

Uma camada é utilizada para agrupar conteúdos, importante lembrar que as camadas sao posicionadas de forma empilhada uma sobre a outra, quem vem primeiro na no array vai estar acima das outras camadas. Mesmo que não seja definida uma camada a plataforma vai criar uma automaticamente.

Caso o atributo full seja definido a camada vai ter o tamanho total do container do widget. Também é possível utilizar os atributos top, right, bottom, left para definir a posição da camada dentro do container, mas para isso o atributo full deve ser definido como falso.

{
  "layers": [
    {
      "code": "root",
      "full": true
    },
    {
      "class": "flex flex-wrap items-center",
      "code": "box",
      "style": "background: #FFFFFF; margin-top: 105px; width: 100%;"
    }
  ]
}

Conteúdos

• Tag: contents
• Tipo: array
• Atributos: class | style | layer | elements

Um conteúdo é um agrupador de elementos. Além da lista de elementos ele pode receber atributos de classe e estilo. Clique aqui para acessar a lista de elementos disponíveis.

Por padrão todo conteúdo é definido dentro da camada root caso seja necessário colocar o conteúdo em outra camada dve ser utilizado o atributo layer com o código da camada desejada.

Exemplo:

{
  "contents": [
    {
      "class": "flex justify-center items-center",
      "elements": [
        {
          "data": "Rótulo",
          "type": "text"
        }
      ],
      "style": "width: 100%; height: 100%;"
    }
  ]
}

Origem dos Dados

• Tag: datasources
• Tipo: array
• Atributos: code | type

As fontes de dados são responsáveis por carregar os conteúdos que serão exibidos pelo widget. O mesmo widget pode exibir dados de fontes diferentes, essa definição de onde virão os dados é realizada quando utilizamos o widget em um slot. Clique aqui para saber mais sobre a configuração das origens dos dados.

{
  "datasources": [
    {
      "code": "active",
      "type": "boolean"
    },
    {
      "code": "total",
      "type": "number"
    },
    {
      "code": "label",
      "type": "string"
    },
    {
      "code": "project",
      "type": "object"
    },
    {
      "code": "results",
      "type": "array"
    }
  ]
}