Com a fonte de dados do Cronapp é possível alimentar os componentes visuais, relatórios e gerar requisições REST dentro ou fora da aplicação. Além de poder obter os dados por uma consulta personalizada de banco de dados, através de OData, ou bloco de programação, é possível obter esses dados manualmente ou de uma API e esse tutorial lhe mostrará o passo a passo.

Para esse tutorial, será utilizado a seguinte API: https://jsonplaceholder.typicode.com/todos/ para retornar um array de objetos.

Criando bloco servidor vazio

O primeiro passo desse tutorial é criar um bloco de programação do tipo servidor. Esse bloco só tem a função fazer o vínculo com a fonte de dados, pois uma fonte de dados só funciona quando está vinculado à um bloco ou à uma entidade - então esse bloco estará vazio.

Figura 1 - Criar bloco servidor vazio

Criar e configurar fonte de dados

O segundo passo é criar uma fonte de dados, então clique em Projeto (1 da Figura 2.1) no menu do sistema e clique em Fonte de dados (2 da Figura 2.1) para abrir a janela e clique nova fonte de dados (3 da Figura 2.1).

Figura 2.1 - Criar fonte de dados

Vincular bloco servidor a fonte

Ao abrir a fonte de dados na área da IDE, troque de entidade para bloco de programação (1 da Figura 2.2) para assim habilitar os botões do bloco e poder vincular o bloco servidor criado com essa fonte. Clique no botão "..." (2 da Figura 2.2) para abrir a janela de seleção do bloco, selecione a função do bloco que foi criado anteriormente (3 da Figura 2.2) e clique no botão selecionar (4 da Figura 2.2) para fazer o vínculo. Por fim, define um nome para a consulta no campo correspondente.

Figura 2.2 - Selecionando o bloco para vincular com a fonte

Adicionar chaves aos campos

Após salvar a fonte de dados, clique na aba Campos (1 da Figura 2.3) para criar os campos referentes as chaves dos objetos. Primeiro adicionar o nome da chave no campo (é case sensitive) e clique no botão + (2 da Figura 2.3) para adicionar. Após, verifique o tipo da chave e troque (3 da Figura 2.3) conforme esse tipo, pois eles devem ser do mesmo tipo que os valores dessas chaves - ou seja, se a chave é lógica o campo precisa ser lógico também.

Figura 2.3 - Adicionando os nomes das chaves aos campos

Obter lista de dados manualmente

Nessa parte, iremos obter os dados de uma lista inserida no bloco de programação.

Criar bloco de programação cliente

Então, crie um bloco de programação cliente no qual a função terá retorno e adicione nesse retorno o bloco criar objeto Json (1 da Figura 3.1). Clique no ícone da engrenagem (2 da Figura 3.1) para abrir a janela de edição de texto, insira o JSON e salve (3 da Figura 3.1).

Figura 3.1 - Criando bloco com retorno

Vincular bloco cliente com fonte dados

Adicione o componente fonte de dados em um formulário, selecione a fonte de dados criada e salve (Figura 3.2).

Figura 3.2 - Vincular fonte criada com componente fonte de dados

Após isso, na aba Propriedades (1 da Figura 3.3), clique na subaba Eventos (2 da Figura 3.3) e clique no botão "..." do evento Para Obter Dados (3 da Figura 3.3). Ao abrir a janela do evento, clique no ícone (4 da Figura 3.3) para abrir a janela de seleção do bloco e selecione a função que contenha os dados JSON (5 da Figura 3.3). Por fim, salve essas configurações.

Figura 3.3 - Vincular bloco ao evento para remover dados do componente

Vincular componente para exibir dados

Adicione um componente que possa ser vinculado com a fonte para que exiba os dados, como uma grade. Configure o componente para que ele possa exibir os dados e salve. Rode o projeto e acesse a página para visualizar os dados (Figura 3.4).

Figura 3.4 - Valores do bloco renderizados na grade

Obter lista de dados de API

Esses dados também podem ser provenientes de uma API.

Criar bloco de programação cliente

Os blocos a utilizar são clientes, então deverá ser criado um bloco de programação do tipo cliente. Com isso, crie uma variável e adicione a ela o bloco criar promessa (1 da Figura 4.1). Após, adicione o bloco obter conteúdo da URL logo abaixo (2 da Figura 4.1) e escolha o método de requisição get para fazer a obtenção dos dados e application/json para que esses dados venham em formato JSON (3 da Figura 4.1).

Figura 4.1 - Criando bloco de programação Parte 1

Tanto no retorno de sucesso quanto de erro do bloco obter conteúdo da URL, adicione o bloco atribuir valor da promessa. No retorno de sucesso, defina o tipo para resolved (1 da Figura 4.2) e no retorno de erro; reject (2 da Figura 4.2). Adicione tanto a variável do bloco criar promessa quanto a variável do bloco obter conteúdo da URL em seus respectivos campos dos blocos atribuir valor da promessa (3 e 4 da Figura 4.2). Por fim, adicione a variável que guarda a promessa no retorno da função (5 da Figura 4.2).

Figura 4.2 - Criando bloco de programação Parte 2

Vincular bloco cliente com fonte dados

Adicione o componente fonte de dados em um formulário, selecione a fonte de dados criada e salve (Figura 4.3).

Figura 4.3 - Vincular fonte criada com componente fonte de dados

Após isso, na aba Propriedades (1 da Figura 4.4), clique na subaba Eventos (2 da Figura 4.4) e clique no botão "..." do evento Para Obter Dados (3 da Figura 4.4). Ao abrir a janela do evento, clique no ícone (4 da Figura 4.4) para abrir a janela de seleção do bloco e selecione a função os dados provenientes de uma API (5 da Figura 4.4). Por fim, salve essas configurações.

Figura 3.3 - Vincular bloco ao evento para remover dados do componente

Vincular componente para exibir dados

Adicione um componente que possa ser vinculado com a fonte para que exiba os dados, como uma tabela. Configure o componente para que ele possa exibir os dados e salve. Rode o projeto e acesse a página para visualizar os dados (Figura 3.4).