Origem dos Dados do Widget

Como o objetivo principal de um Widget é criar uma visão gráfica para exibir os dados indexados pela plataforma, é muito importante tratarmos quais serão esses dados que estarão disponíveis para os elementos do Widget.

Os dados para os widgets são definidos quadno alocamos um Widget em um Slot. Sendo assim o mesmo Widget pode exibir dados distintos se for utilizado em slots diferentes. Para saber mais sobre a configuração do widget no slot clique aqui.

Nova Origem de Dados

Pra criar uma nova origem dos dados devemos incluir na configuração de layout do widget o elemento datasources com a difinição de cada uma das orignes de dados que estarão disponíveis posteriormente no slot.

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

ATENÇÃO

Ao definir suas fontes de dados fique alerta para o tipo de dado para que não haja um problema na hora de processar os dados do Widget.

Utilizando o Mock

Durante o processo de construção de um Widget é importante termos acesso ao conjunto de dados que representará os valores que teremos quando o Widget estiver associado a um Slot e carregando diretamente da plataforma. Para isso vamos utilizar a definição de Mock para incluir dados de teste que serão utilizados durante o processo de desenvolvimento.

Devemos definir o código que vai representar os nossos dados de teste clicando na aba MOCK e entrando com o código JSON.

{
  "ds": {
    "label": "Avaliação dos Clientes",
    "rate": 2.5
  },
  "size": {
    "height": "300px",
    "width": "600px"
  }
}

O atributo ds define os dados disponíveis para serem cosumidos pelos elementos do Widget.

O Atributo size define uma altura e largura que deve simular o tamanho do slot onde esse widget será utilizado.

INFO

Caso seja necessário simular valores para URL, Módulo, Instância Pai e Instância podemos utilizar o atributo page e colocar os valores para esses objetos dentro.

{
  "ds": {...},
  "size": {...},
  "page": {
    "module": {
      "label": "Projeto XPTO"
    },
    "url": {
      "structure": "project"
    },
    "instance": {
      "custom": {
        "status": "approved"
      }
    }
  }
}

Acessando os Dados

Uma vez definidas as fontes de dados é necessário incluir nas configuraçoes dos elementos o código para acessar os valores. Sempre que vamos utilizar um valor dinâmico nos nossos elementos devemos utilizar a notação com dolar e chaves, lembrando que os dados estão dentro do elemento ds.

"data": "${ds.label}"

Para acessar os dados dinâmicos temos algumas variáveis do sistema que disponibilizam dados para serem consumidos:

• ds, disponibilia todos os valores de todas as fontes de dados que estão associadas ao Widget.
• user, disponibiliza um objeto com os dados do usuário logado
• module, disponibiliza um objeto com os dados do módulo onde o widget se encontra
• instance, disponibiliza um objeto com os dados da instância onde o widget se encontra
• parent, disponibiliza um objeto com os dados do parent da instancia que está carregada
• url, acessa os dados da URL onde o widget se encontra
  • host: string
  • scope: string
  • path: string
  • hierarchy: any
  • structure: string
  • id?: string
  • service?: string
  • sid?: string
  • servicePath?: string
  • parent?: string
  • parentPath?: string
  • pid?: string
  • query?: any
  • isAdmin?: boolean
  • from?: paramsInterface
• hrz, traz algumas informações do sistema como:
  • now, representa a data atual
  • darkMode, valor boleano se está ou não com o modo escuro ativado
  • resolution, retorna "full" ou "standard" de acordo com a resolução do usuário
  • onlineUsers, retorna um array com os dodes dos usuários online
  • systemSettings, retorna um objeto com as configurações do sistema

INFO

Lembre-se que os dados do Módulo, Parent e Instance so estarão acessiveis caso o Widget esteja posicionado dentro de uma página que pertença a uma estrutura.

Além das variáveis temos algumas funções que podem ser utilizadas:

• datasetResult(código da fonte de dados, código do item), retorna o objeto com todas os atributos da opção.
• documentURL(objeto de documento), retorna a URL baseado em um objeto do tipo documento.
• IsEmpty(any), utilizado para testar se é vazio.
• t(objeto ou string), retorna o valor traduzido de acordo com o idioma selecionado pelo usuário.
• pattern, utilizado para formatar dados numéricos e datas. Saiba mais sobre a função de pattern clicando aqui.

Formatação dos Dados

A plataforma disponibiliza a função pattern para poder formatar os dados. Ela pode ser utilizada com dados numéricos e com datas de acordo com as definições a seguir:

Números

Para formatar os números devemos utilizar a função pattern seguida da função number, definir o valor que queremos formatar e depois aplicar um padrão de formatação. A plataforma utiliza uma biblioteca para poder formatar números, para saber mais clique aqui.

Nesse exemplo estamos formatando o número que está na variavel ds.pessoasImpactadas aplicando um determinado padrão de formatação que vai exibir o valor com uma casa decimas e arredondando o valor utilizando as notações de milhares, milhões, ...

${pattern.number(ds.pessoasImpactadas).apply('0.0 a')}

ATENÇÃO

Lembre-se que o padrão de formatação deve seguir o padrão em inglês, usando ponto para separar casas decimais e virgula para milhares.

Datas

Para formatar datas devemos utilizar a função pattern seguida da função date, definir o valor que queremos formatar e depois aplicar um padrão de formatação. A plataforma utiliza uma biblioteca para poder formatar números, para saber mais clique aqui.

Nesse exemplo estamos formatando a data que está na variavel ds.approvedAt aplicando um determinado padrão de formatação que vai exibir o dia da semana, o nome por extenso do mês, o dia o ano a hora com minutos.

${pattern.date(ds.approvedAt).apply('dddd, MMMM D, YYYY h:mm A')}