Devcenter - Customizar o Agilityflow

Área de customização de todos os recursos da plataforma

• Menu
• Relatório analítico / BI
• Dashboard
• Widget
• Tabela Relacional (N:N)
• Cache
• API de Integração GET e POST
• Variáveis de ambiente
• Change Request
• Visual Code Editor
• Formulário - customizar com HTML, C#, CSS e Javascript
• Quadros (Kanban)
• Listagem do Formulário - customizar com HTML, C#, CSS e Javascript
• Relatório / Dashboard - customizar colunas da tabale de dados com Html, C#, CSS e Javascript

Menu

É possível criar menus na Barra Vertical / Menu Principal do agilityflow. 

Para isso, basta clicar no ícone do Devcenter  localizado na Barra Vertical, e em seguida em Menu.

Ao clicar em "Consultar" , é possível ver a lista de menus já existentes.

Clicando em "Novo Menu" , o usuário irá criar um novo Menu na Barra Vertical.

Feito isso, basta escolher um nome e um ícone, e o novo menu está pronto.

O menu só aparecerá na Barra Vertical, quando ele possuir um formulário ou relatório para exibição.

Relatório analítico / BI

Os relatórios são uma forma de transformar os dados dentro do agilityflow, em informações valiosas. Os relatórios podem trazer uma série de dados de diferentes tabelas, com inúmeros cruzamentos, que possibilitam ao usuário do agilityflow, fazer uma série de análises e auxiliam na tomada de decisões estratégicas no seu negócio.

Para criar o relatório, é necessário dar um nome. Além disso, escolhe-se um ícone e o menu onde o relatório vai ficar, além de informar uma descrição. Existem também uma opção para desativar o relatório.

Caso nenhum menu seja selecionado, o relatório será adicionado no menu principal.

Os relatórios são divididos em painéis. Esses painéis, possuem elementos, assim como os widgets do dashboard. É possível adicionar múltiplos painéis.

Filtro

Todo relatório também possui uma área de filtros. Isso possibilita que os relatórios possam ter seus dados filtrados no momento em que o usuário o acessa. Isso possibilita expor informações e permitir que o usuário interaja com esses dados como lhe convir.

Apesar de útil, os filtros são opcionais em um relatório.

Ao adicionar os filtros, você deve criar campos para que o usuário interaja com o filtro. Ao criar um novo campo para o seu filtro, você deve preencher as seguintes informações:

Nome de Apresentação

É o nome que será mostrado ao usuário, e é como esse filtro será identificado na configuração do relatório.

Id do campo

É como esse valor será levado para as queries que montarão o relatório.

Ativo

Por padrão, é marcado como Sim. Habilita ou desabilita um filtro para ser usado no relatório.

Tipo

Como esse filtro é um campo, você deve informar de qual tipo é esse campo.

Texto Livre

É um campo que o usuário pode colocar qualquer texto

Data/Hora

Um campo contendo data e/ou hora. É também necessário definir um formato:

• Data e hora no formato dd/mm/yyyy hh:mm
• Data sem hora no formato dd/mm/yyyy
• Hora no formato hh:mm

Número

Campo com um valor numérico. 

É também necessário definir um formato:

• Inteiro
• Moeda (Real)
• Decimal (1 casa decimal)
• Decimal (2 casas decimal)
• Decimal (3 casas decimal)
• Decimal (4 casas decimal)
• Decimal (5 casas decimal)

Lista para Seleção ou Pesquisa com Auto Completar

Para esses tipos, é necessário escolher a base de dados que será utilizada e o campo de apresentação. Além disso, é possível adicionar uma condição na base de dados.

Após a configuração do filtro, será criada uma variável. Essa variável está indicada com "@" e deverá ser usada na query juntamente com a Função Filter.

Definir os valores e regras iniciais para os campos do filtro

Após adicionar os campos do filtro (descritos acima), é possível definir valores padrões iniciais para os filtros. Além disso, é possível bloquear a alteração desse filtro, e também o fazê-lo dependendo do usuário ou perfil do usuário. Para maiores detalhes, veja o item definir os valores e regras iniciais dos filtros do capítulo lista e consulta nas configurações do formulário.

Painel

Todo painel tem um título. Esse título pode ou não ser exibido, clicando no ícone .

Outra opção, é a cor do tema. Ela pode ser escolhida na opção tema. As opções de cores são:

• Branco (padrão)
• Cinza
• Azul
• Verde
• Roxo
• Vermelho
• Amarelo

Para alterar o tamanho de um widget, basta clicar em  e deixar com o tamanho desejado.

Elementos de um painel:

Label

É um texto, que pode ser fixo ou dinâmico. Caso seja dinâmico, o texto deve ser o resultado de uma query SQL. Essa query vai ter seu resultado atribuído à variáveis. Para utilizá-las, basta escrever @ e selecionar a variável. É possível combinar textos com variáveis.

Caso seja fixo, basta digitar o texto normalmente.

Além disso, é possível formatar o texto de várias maneiras, como definir o alinhamento vertical e horizontal do texto, tamanho e fonte.

E por fim, é possível que ao clicar no texto, o usuário seja levado a um link. Basta preencher a URL.

Ao posicionar qualquer elemento no painel, é possível redimensioná-lo usando o ícone .

Ícone

É possível adicionar um ícone como elemento de um painel. Basta selecionar um ícone em uma das bibliotecas disponíveis. Ainda é possível editar alinhamento (vertical e horizontal), tamanho, cor e criar um link.

Imagem

Para fazer o upload de uma imagem, basta clicar no retângulo ou arrastar um arquivo até ele.

É possível formatar largura, altura e alinhamento (vertical e horizontal) e criar um link.

Gráfico

Ao se adicionar um gráfico, é possível escolher entre duas origem dos dados:

Criar uma tabela com dados Estáticos

Nessa opção, o usuário define os dados de maneira manual em uma tabela, como uma planilha. É possível adicionar dados em linhas e colunas, usando os botões .

Ao clicar na opção 'Editar tipo e propriedades do gráfico' ou no ícone , é possível definir o tipo do gráfico.

O sistema já sugere o gráfico mais recomendado na guia início. Clicando na aba Gráficos (ou em 'Mais »'), o sistema exibe todos os demais gráficos disponíveis.

Na aba Personalizar é possível editar as características do gráfico selecionado, como título, legenda, fonte, cores, entre outros.

Fonte de dados Dinâmica

Nesse caso, é necessário criar uma query para se obter os dados. As demais configurações, seguem o padrão do exemplo acima.

Tabela de Dados

Quando o elemento é a tabela de dados, a fonte para essa tabela, só pode ser dinâmica, ou seja, através de uma query.

Query

No exemplo abaixo, queremos uma tabela com a lista de autores cadastrados no sistema. A query está obtendo os campos 'id', 'nome', 'sexo' e 'nacionalidade' da tabela 'x_tbl_autor'.

select nome, sexo, nacionalidade from x_tbl_autor

Esse é um exemplo de um resultado dessa query:

Uma vez a query montada, é possível formatar a tabela.

Importante: caso o relatório que esteja sendo criado possua filtros, é necessário incluir a função Filter com a(s) variável(is) criadas no filtro.

A função filter tem a seguinte sintaxe:

Filter(variável, tabela, campo)

• variável: ao criar um filtro, é criada uma variável. A lista de variáveis está na tela de montagem da query;
• tabela: é a tabela onde esse filtro deve acontecer;
• campo: é o campo da tabela que será usado no filtro;

select nome, sexo, nacionalidade from x_tbl_autor
where 
	Filter (@sexo, x_tbl_autor, sexo) and
    Filter (@nome, x_tbl_autor, nome)

No exemplo acima, existe dois filtros e suas variáveis (@sexo e @nome) que serão aplicados nos campos 'nome' e 'sexo' da tabela 'x_tbl_autor'.

Configuração das colunas da tabela

• Ordem das colunas: clique no ícone  e arraste a coluna para a posição desejada;
• Nome de apresentação: edite o nome da coluna;
• Largura em %: deixe 'padrão' para uma divisão igual da largura entre as colunas. Caso contrário, informe em porcentagem a largura de cada coluna;
• Visível: ligador por padrão, é possível ocultar uma coluna sem precisar alterar a query;
• Prefixo: é possível incluir um texto antes dos valores dessa coluna;
• Sufixo: é possível incluir um texto depois dos valores dessa coluna;
• Informação no rodapé:
  • Cálculo: é possível fazer um cálculo (numérico ou hora) e informar no rodapé da coluna. Os valores nessa coluna precisam ser do tipo inteiro ou decimal (para cálculo numérico) ou estar no formato de hora HH:mm (para cálculo em hora)
  • Máscara: caso o cálculo seja numérico, escolha a máscara apropriada para o resultado. Para cálculo em hora, a máscara HH:mm é preenchida automaticamente.

Ordenação

Selecione o campo que será ordenada as informações, e escolha se a ordenação é crescente ou decrescente.

Paginação

Escolha a quantidade de registros por página.

Header

Permite mostrar ou não o cabeçalho da tabela;

Link da Linha

É possível redirecionar o usuário caso haja um click na linha. Esse link pode ser interno no agilityflow ou externo. Caso seja interno, é possível escolher se o link será aberto como:

• Um lightbox;
• Na mesma janela;
• Uma nova janela;

Tabelas de dados filha (Master e Detail)

Além de uma tabela, é possível agrupar uma tabela em cada linha dessa primeira tabela, configurada no exemplo acima.

Para isso, basta adicionar uma tabela de dados filha. Ao fazer isso, o mesmo processo de configuração de uma tabela de dados comum é iniciado, mas com uma diferença.

Caso essa tabela filha tenha relação com a tabela principal, basta obter a coluna id na query da tabela principal. Esse valor, é passado para a tabela filha, em uma variável chamada @master_id.

No exemplo acima, ao clicar no nome do autor, é apresentado a lista de livros cadastradas no sistema relacionados com esse autor. A query ficaria assim:

select x_tbl_livro.nome as NomeLivro, x_tbl_livro.ano as Ano from x_autor_livro 
inner join x_tbl_livro on id_x_tbl_livro = x_tbl_livro.id
where id_x_tbl_autor = @master_id

A tabela filha, apesar de recomendado, não precisa ter relação com a tabela principal.

Dashboard

O dashboard é um painel que traz informações rápidas do sistema. É a tela inicial do agilityflow.

O propósito do dashboard é levar ao usuário informações de rápida visualização para uma tomada imediata de decisões.

Ao criar um Dashboard, é necessário informar um nome e uma descrição. Além disso, é necessário atribuir um ou mais perfis, que irão acessar esse dashboard.

Ao clicar em 'Montar Dashboard', basta adicionar os widgets que deverão aparecer nesse dashboard e clicar em confirmar.

Widget

Widget é um elemento gráfico de interação, e fornecem funcionalidades e/ou informações ao usuário.

No agilityflow, são os elementos que compõem um dashboard.

Ao se criar um widget, é necessário definir algumas informações básicas.

• Tipo: existem dois tipos de widgets:
  • Nativo: o tipo Nativo é reservado para futuras implementações de widgets nativos do sistema, como o de rascunhos e o de pendências. Essa opção não deve ser utilizada.
  • Customizado: é a opção que permite criar um widget sob-medida. Essa é a opção que deve ser utilizada.
• Nome: um nome para identificar o widget na montagem do dashboard.
• Descrição: um nome para ajudar na identificação do widget na montagem do dashboard.
• Categoria: escolha ou crie uma categoria, para organizar os widgets.
• Subcategoria: escolhe ou crie uma subcategoria, para organizar os widgets.

Ao adicionar o widget no dashboard, como no exemplo acima, é possível identificar o widget pelo nome (Pendências para aprovação), pela categoria (Fluxo de Aprovação), pela subcategoria (Aprovação) e pela descrição no quadro maior (em cinza).

• Ativo: é possível deixar um widget ativo ou inativo. Isso permite ao usuário não mais permitir o uso de um widget, sem a necessidade de removê-lo e posteriormente, caso necessário, ter que criá-lo novamente.
• Url (Mvc Action), altura e largura do Widget: essas opção estão disponíveis para widgets do tipo nativo. Não devem ser utilizadas.

Montar o Widget

Quando se seleciona o tipo customizado, o botão 'Montar o Widget' fica disponível. Ao clicar, é possível configurar as características do widget.

Todo widget tem um título. Esse título pode ou não ser exibido, usando a opção 'Mostrar Título do Box'.

Outra opção, é a cor do tema. Ela pode ser escolhida na opção tema. As opções de cores são:

• Branco (padrão)
• Cinza
• Azul
• Verde
• Roxo
• Vermelho
• Amarelo

Para alterar o tamanho de um widget

Adicionar elemento

Em um widget, é possível adicionar vários elementos, e de vários tipos.

Label

É um texto, que pode ser fixo ou dinâmico. Caso seja dinâmico, o texto deve ser o resultado de uma query SQL. Essa query vai ter seu resultado atribuído à variáveis. Para utilizá-las, basta escrever @ e selecionar a variável. É possível combinar textos com variáveis.

Caso seja fixo, basta digitar o texto normalmente.

Além disso, é possível formatar o texto de várias maneiras, como definir o alinhamento vertical e horizontal do texto, tamanho e fonte.

E por fim, é possível que ao clicar no texto, o usuário seja levado a um link. Basta preencher a URL.

Ao posicionar qualquer elemento no widget, é possível redimensioná-lo usando o ícone .

Ícone

É possível adicionar um ícone como elemento de um widget. Basta selecionar um ícone em uma das bibliotecas disponíveis. Ainda é possível editar alinhamento (vertical e horizontal), tamanho, cor e criar um link.

Imagem

Para fazer o upload de uma imagem, basta clicar no retângulo ou arrastar um arquivo até ele.

É possível formatar largura, altura e alinhamento (vertical e horizontal) e criar um link.

Gráfico

Ao se adicionar um gráfico, é possível escolher entre duas origem dos dados:

Criar uma tabela com dados Estáticos

Nessa opção, o usuário define os dados de maneira manual em uma tabela, como uma planilha. É possível adicionar dados em linhas e colunas, usando os botões .

Ao clicar na opção 'Editar tipo e propriedades do gráfico' ou no ícone , é possível definir o tipo do gráfico.

O sistema já sugere o gráfico mais recomendado na guia início. Clicando na aba Gráficos (ou em 'Mais »'), o sistema exibe todos os demais gráficos disponíveis.

Na aba Personalizar é possível editar as características do gráfico selecionado, como título, legenda, fonte, cores, entre outros.

Fonte de dados Dinâmica

Nesse caso, é necessário criar uma query para se obter os dados. As demais configurações, seguem o padrão do exemplo acima.

Tabela de Dados

Quando o elemento é a tabela de dados, a fonte para essa tabela, só pode ser dinâmica, ou seja, através de uma query.

Query

No exemplo abaixo, queremos uma tabela com a lista de autores cadastrados no sistema. A query está obtendo os campos 'id', 'nome', 'sexo' e 'nacionalidade' da tabela 'x_tbl_autor'.

select nome, sexo, nacionalidade from x_tbl_autor

Esse é um exemplo de um resultado dessa query:

Uma vez a query montada, é possível formatar a tabela.

Configuração das colunas da tabela

• Ordem das colunas: clique no ícone  e arraste a coluna para a posição desejada;
• Nome de apresentação: edite o nome da coluna;
• Largura em %: deixe 'padrão' para uma divisão igual da largura entre as colunas. Caso contrário, informe em porcentagem a largura de cada coluna;
• Visível: ligador por padrão, é possível ocultar uma coluna sem precisar alterar a query;
• Prefixo: é possível incluir um texto antes dos valores dessa coluna;
• Sufixo: é possível incluir um texto depois dos valores dessa coluna;
• Informação no rodapé:
  • Cálculo: é possível fazer um cálculo (numérico ou hora) e informar no rodapé da coluna. Os valores nessa coluna precisam ser do tipo inteiro ou decimal (para cálculo numérico) ou estar no formato de hora HH:mm (para cálculo em hora)
  • Máscara: caso o cálculo seja numérico, escolha a máscara apropriada para o resultado. Para cálculo em hora, a máscara HH:mm é preenchida automaticamente.

Ordenação

Selecione o campo que será ordenada as informações, e escolha se a ordenação é crescente ou decrescente.

Paginação

Escolha a quantidade de registros por página.

Header

Permite mostrar ou não o cabeçalho da tabela;

Link da Linha

É possível redirecionar o usuário caso haja um click na linha. Esse link pode ser interno no agilityflow ou externo. Caso seja interno, é possível escolher se o link será aberto como:

• Um lightbox;
• Na mesma janela;
• Uma nova janela;

Tabelas de dados filha (Master e Detail)

Além de uma tabela, é possível agrupar uma tabela em cada linha dessa primeira tabela, configurada no exemplo acima.

Para isso, basta adicionar uma tabela de dados filha. Ao fazer isso, o mesmo processo de configuração de uma tabela de dados comum é iniciado, mas com uma diferença.

Caso essa tabela filha tenha relação com a tabela principal, basta obter a coluna id na query da tabela principal. Esse valor, é passado para a tabela filha, em uma variável chamada @master_id.

No exemplo acima, ao clicar no nome do autor, é apresentado a lista de livros cadastradas no sistema relacionados com esse autor. A query ficaria assim:

select x_tbl_livro.nome as NomeLivro, x_tbl_livro.ano as Ano from x_autor_livro 
inner join x_tbl_livro on id_x_tbl_livro = x_tbl_livro.id
where id_x_tbl_autor = @master_id

A tabela filha, apesar de recomendado, não precisa ter relação com a tabela principal.

Tabela Relacional (N:N)

O Conceito N:N

A tabela relacional N:N, trás um conceito importante e fundamental em banco de dados.

Diferente do relacionamento 1:N, que no agilityflow é utilizado nos formulários relacionados, onde uma entidade pode se relacionar com várias ocorrências de outra entidade, o relacionamento N:N ocorre quando vários registros de uma tabela (formulário) se relacionam com vários registros de uma outra tabela. 

No relacionamento N:N, não há uma hierarquia de relacionamento.

Exemplo

Por exemplo, um autor pode escrever vários livros. Um livro pode ter vários autores.

Quando existe esse relacionamento, surge uma terceira tabela. A essa tabela, damos o nome de Tabela Relacional (N:N).

Criando uma tabela relacional (n:n)

Para criar uma tabela relacional (n:n) no agilityflow, primeiro crie ambos formulários comuns. Depois, no Devcenter, clique em Tabela Relacional (N:N) e em seguida em 'Novo'.

Dados

Descrição

Nome da Tabela Banco de dados SQL (Adicionar prefixo x)

Formulário relacionado 1 (FK1)

Formulário 1: escolha o primeiro formulário do relacionamento (a ordem não importa)
Título da tabela que será apresentado no formulário para o usuário: esse é o texto que será apresentado como título, quando o formulário 1 aparecer dentro do formulário 2.
Campo principal para o usuário buscar e associar ao formulário: o campo que será usado para o usuário fazer a associação
Tipo do campo principal: selecione sempre Lista de seleção (Combo)

Formulário relacionado 2 (FK2)

Formulário 2: escolha o segundo formulário do relacionamento (a ordem não importa)
Título da tabela que será apresentado no formulário para o usuário: esse é o texto que será apresentado como título, quando o formulário 2 aparecer dentro do formulário 1.
Campo principal para o usuário buscar e associar ao formulário: o campo que será usado para o usuário fazer a associação
Tipo do campo principal: selecione sempre Lista de seleção (Combo)

Clique em Salvar e pronto, a tabela está criada.

Não esqueça de adicionar a tabela relacional (N:N) criada agora, em ambos os formulários.

Cache

Para aumentar a performance da plataforma, o agilityflow gera cache de alguns dados no servidor. O cache é formado por dados que não mudam com frequência. Caso esses dados mudem, o cache é apagado e re-criado no próximo carregamento.

O que é armazenado em cache?

São esses dados:

• Formulários
• Relatórios
• Cofiguração das API's
• Dashboard e widgets

Para ilustrar, imagine a estrutura de um formulário, como seus campos, relatórios de impressão, listagem de dados e tela. Essas configurações não mudam com frequência, mas a sua leitura é custosa para o servidor. Por isso, no primeiro acesso, os dados de um formulário são armazenados em cache, para que na próxima leitura, não precise ser feito todo o acesso à base de dados para mostrar o formulário corretamente.

Posteriormente, ao fazer uma modificação no formulário, no salvamento, o servidor apaga os dados do cache, e os reescreve no primeiro acesso. Isso explica um tempo mais logo para o primeiro carregamento de um formulário após a criação ou modificação.

Como posso atualizar o cache do servidor?

De duas formas: a primeira é alterar qualquer um dos dados listados acima. Quando isso ocorre, apenas o cache relacionado ao dado alterado é atualizado.

A segunda forma, basta acessar a opção de Cache no devcenter, selecionar os dados que deseja apagar e clicar em "Atualizar Cache".

Existe uma periodicidade de alteração do cache?

Não. O cache somente é atualizado em umas das duas formas citadas acima.

API de Integração GET e POST

Para a documentação de programação em C# nas APIs de POST, clique aqui

Para Informações sobre o Timezone das Apis (fuso horário), clique aqui

O termo API vem da abreviação do termo em inglês Application Programming Interface ou Interface de Programação de Aplicativos, o que resumidamente, significa uma forma de dois sistemas se conectarem entre si.

O agilityflow possui API Rest para que outros sistemas e aplicativos se conectem e interajam com o agilityflow. Essa interação ocorre usando dois métodos:

• GET: para outros sistema consumirem os dados do Agilityflow (Buscar informações)
• POST: para inserir e atualizar dados de outros sistemas no Agilityflow (Input de informações)

Como posso configurar uma API no agilityflow?

Um pré-requisito para configurar uma API no agilityflow, é criar um usuário que tenha permissão para executar essa API remotamente.

Usuário da API

Para criar um usuário da API, basta acessar o devcenter, e no quadro da API, criar em 'Usuários da Api':

Ao clicar nessa tela, é apresentada a lista de usuários, onde é possível filtrar e interagir como em qualquer formulário. No topo, clique em 'Novo' e informe os seguintes dados:

• Nome: um nome para identificar o usuário. Sugestão: caso seja um sistema legado que irá chamar essa api, crie esse usuário com o nome do sistema legado.
• Login: nome do usuário;
• Chave de segurança:  chave de acesso do usuário. Essa chave, ficará visível para que possa ser consultada e informada ao outro sistema que irá fazer uso da API;
• API: caso já exista uma API configurada, pode ser adicionada permissão a ela nesse momento;

Configurar uma API

Acesse API de integração no devcenter e clique em  e em seguida clique em "Novo". Preencha os dados que seguem:

• Nome: identifica a configuração da API;
• Método: Post ou Get. Mais informações no próximo capítulo;
• Tipo de execução: selecione síncrona. A opção assíncrona ainda não está implementada;
• Ativo: marque para deixar habilitada, ou desmarque para desabilitar a API;
• Usuário API: selecione os usuários de API com acesso à essa configuração, e clique em .

Listar (Get) - Buscar de um formulário (versão sem uso de código)

Com esse método, você pode buscar qualquer tipo de informação de um determinado formulário.

No cadastro de API, marque o método como "Get" e clique na opção "Configurar API para Listagem"

Agora associe o usuário que você criou no passo anterior, para que ele tenha acesso de execução nessa API.

Na opção configurar API para listagem, selecione o formulário que você deseja recuperar os dados.

Filtros da API de GET pelo Id do formulário

Além da lista completa e paginada, você pode filtrar por ID ou por IDs.

Todos os Ids do agilityflow são no formato de GUID, exemplo de um id: "43837013-be24-4bc9-81c1-b4cdcb6eb3dc"

Você pode filtrar por um ou mais ids em uma mesma chamada de API, para isso, basta enviar o parâmetro id ou ids colocando os ids, divididos por virgula, exemplo:

id=43837013-be24-4bc9-81c1-b4cdcb6eb3dc,59a26b8b-6c32-4756-acb7-c1539baf65de,b9199893-7021-1446-f407-942c97d70b74

ou apenas 1 id

id = b9199893-7021-1446-f407-942c97d70b74

Filtros por campos do formulario

Você pode filtrar por qualquer campo do formulário, os comandos de filtro são similares aos comandos  de consulta do sql server e devem estar entre chaves { }

filter={campo_de_numero>2 and campo_de_numero<20 and ( campo_texto='jose' or campo_texto like '%sei%' ) }

Lembre-se: que a url da API deve estar com os caracteres especiais com enconded, exemplo da query acima na url:

filter={(campo_de_numero%3E2%20and%20campo_de_numero%3C20)%20and%20(%20campo_texto=%27jose%27%20or%20campo_texto%20like%20%27%sei%%27%20)%20}

Paginação da API de GET

A paginação da API é feita a cada 10 registros, para buscar a próxima página é só enviar o parâmetro nextPage colocando o número da página que você deseja buscar, exemplo: 

nextPage=2

Ordenação da API de GET

É possível ordernar os dados de retorno da API usando os 2 parâmetros abaixo, exemplo: 

sortBy=id_do_campo

sortDirection=ASC  ou sortDirection=DESC

Estrutura de retorno da API de GET

* por uma questão de performance da API. O campo TotalRecords não será mais retornado desde Jan/2024

{
    "paging": {
        "pageSize": 10,    	//tamanho da paginação, considere sempre 10
        "pageNumber": 1    	//página atual
        "nextPage": 2    	//próxima página a ser chamada
    },
    "result": [
        {
            "formId": "43837013-be24-4bc9-81c1-b4cdcb6eb3dc",  		//Campo Padrão: Id do formulário          
          	"createdDate": "2020-03-10 22:41:28",					//Campo Padrão: Data de criação do formulário
            "createdBy": "59a26b8b-6c32-4756-acb7-c1539baf65de",	//Campo Padrão: Id do Usuário responsável pela criação do formulário
            "modifiedDate": "2020-03-10 22:47:58",					//Campo Padrão: Data da última alteração do formulário
            "modifiedBy": "59a26b8b-6c32-4756-acb7-c1539baf65de",	//Campo Padrão: Id do Usuário responsável pela última alteração do formulário
            "workflow": {
                "currentSteps": [
                    {
                        "id": "ede6740b-b4b8-21f7-e9c3-4f765620a213",  //Campo Padrão: Id da Etapa atual do fluxo
                        "name": "Tax Payment "                              //Campo Padrão: Nome da Etapa atual do fluxo
                    },
                    {
                        "id": "9c334289-47e8-49da-93a9-c2e4871e4c3d",  //Campo Padrão: Id da Etapa atual do fluxo
                        "name": "Payment deal"                              //Campo Padrão: Nome da Etapa atual do fluxo
                    }
                  ],
                  "status": "P",									//Campo Padrão: Status do fluxo, será "A", "X" ou "P"
                  "statusName": "In progress",						//Campo Padrão: Status Name será, "Approved", "Rejected", "In progress"
             },                      
            "data": {												//Dados e campos do formulário: Muda de acordo com os campos do formulário
                "name": "john",
                "email": "john@example.com",
              	"age": "35",
              
            }
        }
    ]
}

Pronto! Agora é só executar.

Cadastrar (Post)

Com esse método, você pode inserir e atualizar dados nos formulários do seu Agilityflow, aqui você deve definir o mapeamento dos dados (DE - PARA) em C#, explicitando como será feito o cadastro dos dados, quando essa API for acionada.

No cadastro de API, marque o método como "Post" e clique na opção "Configurar API para Cadastro (Post)"

Agora associe o usuário que você criou no passo anterior, para que ele tenha acesso de execução nessa API.

Na opção configurar API, selecione o formulário que você deseja recuperar os dados.

O código abaixo exemplifica como configurar uma API de Cadastro

Para a documentação de programação em C# nas APIs de POST, clique aqui

    public async Task RunAsync(){
        
            //converte o conteúdo enviado no body da API para JSON
            var json = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(content);
      
            //guarda em uma variável o ID da estrutura do formulário Cliente
            var idEstruturaFormulario_CLIENTE = Guid.Parse("0b56b66a-4f6f-4ded-ad04-016d7c0724e1");
    
      		await ApiContext.LogAsync("Log Message", "logtype");   
    
            if (json != null)
            {
    
                    //verifica se o JSON recebido contém a propriedade "nome", "email" e "cel" que são necessários p cadastro
                    if (JsonHelper.HasProperty(json, "nome") && JsonHelper.HasProperty(json, "email") && JsonHelper.HasProperty(json, "cel")){
           
                        var values = new DataDictionary();
                        values.Add("nome", json["nome"].ToString());
                        values.Add("email", json["email"].ToString());
                        values.Add("cel", json["cel"].ToString());
                      
                        //salva a informação no banco de dados
                        var id = await ApiContext.SaveEntityAsync(idEstruturaFormulario_CLIENTE, values);
                        
                    }
                
            }

    		await ApiContext.LogAsync("Log Message", "logtype");
    
    }

Status Header de retorno de uma API

Exemplos de execução da API

Exemplo GET via o software "POSTMAN"

Importe o JSON abaixo no seu Postman para executar os exemplos abaixo.

{
	"info": {
		"_postman_id": "bd36812d-37c9-4e08-9bc0-bdc28a073fcc",
		"name": "Agilityflow API GET",
		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
	},
	"item": [
		{
			"name": "1. Obter AccessToken",
			"request": {
				"method": "POST",
				"header": [
					{
						"key": "Content-Type",
						"value": "application/json"
					}
				],
				"body": {
					"mode": "raw",
					"raw": "{\"username\": \"NOME_DO_USUARIO_API__COM_PERMISSAO_NESSA_API\",\"key\": \"CHAVE_DE_SEGURANÇA_DO_USUARIO_API__COM_PERMISSAO_NESSA_API\"}"
				},
				"url": {
					"raw": "https://XXXXXXXXXXXXXXXXX.agilityflow.io/api/accesstoken?",
					"protocol": "https",
					"host": [
						"XXXXXXXXXXXXXXXXX",
						"agilityflow",
						"io"
					],
					"path": [
						"api",
						"accesstoken"
					],
					"query": [
						{
							"key": "",
							"value": "",
							"disabled": true
						},
						{
							"key": "",
							"value": "",
							"disabled": true
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "2. Get API",
			"protocolProfileBehavior": {
				"disableBodyPruning": true
			},
			"request": {
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL3dzLzIwMDgvMDYvaWRlbnRpdHkvY2xhaW1zL3VzZXJkYXRhIjoiOTdmZTM1NmItMDA5OC00ZTlhLTkwNTUtODMwMTA3YzM5NjA1IiwibmFtZWlkIjoibG9jYWxob3N0IiwibmJmIjoxNTY0NDI4NTk5LCJleHAiOjE1NjQ0Mjg2NTksImlhdCI6MTU2NDQyODU5OX0.ul7Emi7KDepfmRwWO91RQcTZQrc8r3xlMKJnLYcduEKeNRDGC7F15_-YojHfm1ogM32LjUV76MWxNXTLeJTrLw"
					},
					{
						"key": "Content-Type",
						"name": "Content-Type",
						"type": "text",
						"value": "application/json"
					}
				],
				"body": {
					"mode": "raw",
					"raw": "{\n\n}"
				},
				"url": {
					"raw": "https://XXXXXXXXXXXXXXXXX.agilityflow.io/api/data/g5e262bd-912a-4b1f-91cb-58815cfc5556?nextPage=1",
					"protocol": "https",
					"host": [
						"XXXXXXXXXXXXXXXXX",
						"agilityflow",
						"io"
					],
					"path": [
						"api",
						"data",
						"g5e262bd-912a-4b1f-91cb-58815cfc5556"
					],
					"query": [
						{
							"key": "nextPage",
							"value": "1"
						}
					]
				}
			},
			"response": []
		}
	]
}

Após a importação no Postman você precisará seguir alguns passos:

Passo 1

No Postman, abra o exemplo "1. Obter Accesstoken"

Passo 2

Você precisará fazer algumas mudanças. 

(1) Troque o XXXXXX.agilityflow.io pelo seu subdomínio no agilityflow;

(2) Na aba "body", Troque o usuário e a chave de segurança da API que você criou. como na imagem abaixo:

Passo 3 - Obter Access token para execução da API

Por segurança, antes de cada execução de API é necessário que você gere um token para validação do usuário.

Então, agora execute essa API.

Copie o código retornado no JSON na propriedade "accessToken", usaremos esse código a seguir.

Passo 4

No Postman, abra o exemplo "2. Get API"

Passo 5

Você precisará fazer algumas mudanças. 

(1) Troque o XXXXXX.agilityflow.io pelo seu subdomínio no agilityflow;

(2) Na aba "headers", clique no VALUE da Key "Authorization" e cole o código "accessToken" que geramos nos passos acima, após a palavra "Bearer ". Então o valor deverá ficar  "Bearer Accesstoken_que_você_colou".

(3) Troque o Id da API "/data/g5e262bd-912a-4b1f-91cb-58815cfc5556" de exemplo pelo id da API que você acabou de criar no Agilityflow.

Então, agora execute a API para visualizar os dados retornados, você pode também consultar o Log de API do agilityflow para acompanhar todas as requisições

Exemplo em NODE de POST

Suponhamos que temos uma API no agilityflow que cadastra um cliente, as informações que a API espera é "NOME", "EMAIL" e "CEL" (celular).

O código abaixo demonstra como é feita a chamada da API através do NODE.

Para executar, é necessário ter o NODE instalado. O pacote utilizado é o "https".

Para rodar o script basta copia-lo, salvar em um arquivo com extensão .JS (exemplo: script.js)  abrir o prompt de comando e executar o script da seguinte forma:

node "C:\teste\script.js"

Abaixo o script NODE:

Para configura só troque as 4 variáveis de configuração com as seguintes informações:

var http = require("https");



//config
var hostname = 'demo123.agilityflow.io'; //substitua pela sua URL do seu agilityflow
var accessToken_Credential = { username: 'teste', key: 'teste' }; //aqui você coloca as credenciais (usuário da API) para execução 
var apiID = 'e8b5b751-774d-4283-855c-fafb8e11236d'; //id da api
var apiParameterBODY = { nome: 'JOSE DA SILVA', email: 'josedasilva@email.com.br', cel: '1199887766' } //body json com as informações que você deseja enviar para API



//recuperar o access token
function ExecuteRecuperarAccessToken(){

    var options = {
        hostname: hostname,
        // port: 443,
        path: '/api/accesstoken',
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
            "cache-control": "no-cache"
           }
      };
      
    var req = http.request(options, function (res) {
      var chunks = [];
    
      res.on("data", function (chunk) {
        chunks.push(chunk);
      });
    
      res.on("end", function () {
        var body = Buffer.concat(chunks);
        var obj = JSON.parse(body);      
        if(obj.success){    
            console.log("Recuperou o Access Token",obj.accessToken);   
            ExecuteAPI(obj.accessToken) 
        }else
            LogErro("execução do access token", body.toString());            
    
      });
    });
    
    req.write(JSON.stringify(accessToken_Credential));
    req.end();
    

}




//execute a API
function ExecuteAPI(accessToken){


    var options = {
        hostname: hostname,
        // port: 443,
        path: '/api/data/'+apiID,
        method: 'POST',
        headers: {
          "Authorization": "Bearer " + accessToken,
          "Content-Type": "application/json",
            "cache-control": "no-cache"
        }
      };


      
      var req_api = http.request(options, function (res_api) {
        var chunks_api = [];
      
        res_api.on("data", function (chunk) {
          chunks_api.push(chunk);
        });
      
        res_api.on("end", function () {
          var body = Buffer.concat(chunks_api);
          var obj = JSON.parse(body);      
          if(obj.success){    
              console.log("Execução realizada com sucesso:" + body.toString());   
          }else
              LogErro("execução da api", body.toString());  
        });
      });
      
      req_api.write(JSON.stringify(apiParameterBODY));
      req_api.end();

}


function LogErro(local,log){

    console.log('==================================================================================')
    console.log('E R R O - ' + local)
    console.log('----------------------')
    console.log(log);
    console.log('==================================================================================')

}

ExecuteRecuperarAccessToken();

Exemplo em PHP de POST

Suponhamos que temos uma API no agilityflow que cadastra um cliente, as informações que a API espera é "NOME", "EMAIL" e "CEL" (celular).

O código abaixo demonstra como é feita a chamada da API através do PHP.

<?php
// header('Content-Type: application/json');


if( !isset($_POST['nome']) ||  !isset($_POST['email']) ||  $_POST['nome'] == '' ||  $_POST['email'] == '')
{
  echo '{"success": "false", "msg": "Informe o nome e o e-mail"}';
  exit(0);
}


$nome = $_POST['nome'];
$email = $_POST['email'];

$novoLead = new StdClass();
$novoLead->nome = $nome ;
$novoLead->email = $email ;
$novoLead->cel = $_POST['cel'];

$novoLead_string = json_encode($novoLead);






                  //////////////////////////////////// 01. BUSCAR O ACCESS TOKEN


                  $curl = curl_init();
        

                  curl_setopt_array($curl, array(
                    CURLOPT_URL => "https://XXXXXXXXXXXXXXX.agilityflow.io/api/accesstoken",
                    CURLOPT_RETURNTRANSFER => true,
                    CURLOPT_ENCODING => "",
                    CURLOPT_MAXREDIRS => 10,
                    CURLOPT_TIMEOUT => 30,
                    //------------- SLL 
                    CURLOPT_SSL_VERIFYPEER => 0,
                    CURLOPT_SSL_VERIFYHOST => 0,
                    //--------------------------
                    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
                    CURLOPT_CUSTOMREQUEST => "POST",
                    CURLOPT_POSTFIELDS => "{\"username\": \"cadastrar_teste_1\",\"key\": \"cadastrar_teste_1\"}",
                    CURLOPT_HTTPHEADER => array(
                      "Content-Type: application/json",
                      "cache-control: no-cache"
                    ),
                  ));


                  $response = curl_exec($curl);
                  $err = curl_error($curl);

                  curl_close($curl);


                  if ($err) {
                    echo '{"success": "false", "msg": "Não conseguimos finalizar seu cadastro. Por favor tente novamente. (0)" }';
                    exit(0);
                  }

                  $json_RESPONSE_ACCESS_TOKEN = json_decode($response);

                  if (!isset($json_RESPONSE_ACCESS_TOKEN->accessToken)){
                      echo '{"success": "false", "msg": "Não conseguimos finalizar seu cadastro. Por favor tente novamente. (1)" }';
                      exit(0);
                    }



                //////////////////////////////////// 02. EXECUTA O POST


                $curl = curl_init();

                curl_setopt_array($curl, array(
                  CURLOPT_URL => "https://XXXXXXXXXXXXXXX.agilityflow.io/api/data/b3bf7ce3-f226-4500-83cd-2873b050c742",
                  CURLOPT_RETURNTRANSFER => true,
                  CURLOPT_ENCODING => "",
                  CURLOPT_MAXREDIRS => 10,
                  CURLOPT_TIMEOUT => 30,
                  //------------- SLL 
                  CURLOPT_SSL_VERIFYPEER => 0,
                  CURLOPT_SSL_VERIFYHOST => 0,
                  //--------------------------
                  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
                  CURLOPT_CUSTOMREQUEST => "POST",
                  CURLOPT_POSTFIELDS => $novoLead_string,
                  CURLOPT_HTTPHEADER => array(
                    "Authorization: bearer ".$json_RESPONSE_ACCESS_TOKEN->accessToken,
                    "Cache-Control: no-cache",
                    "Content-Type: application/json"
                  ),
                ));

                $response = curl_exec($curl);
                $err = curl_error($curl);

                curl_close($curl);

                if ($err) {
                  echo '{"success": "false", "msg": "Não conseguimos finalizar seu cadastro. Por favor tente novamente. (2)" }';
                  exit(0);
                }



                $json_RESPONSE_SUCCESS = json_decode($response);

                if (!isset($json_RESPONSE_SUCCESS->success)){
                  echo '{"success": "false", "msg": "Não conseguimos finalizar seu cadastro. Por favor tente novamente. (3)" }';
                  exit(0);
                }


                if ($json_RESPONSE_SUCCESS->success == false){
                  echo '{"success": "false", "msg": "Não conseguimos finalizar seu cadastro. Por favor tente novamente. (4)" }';
                  exit(0);
                }


                echo '{"success": "true", "msg": "Obrigado, recebemos seus dados aqui e já já nos falamos..." }';


                  

Exemplo POST via o software "POSTMAN"

Importe o JSON abaixo no seu Postman para executar os exemplos abaixo.

{
	"info": {
		"_postman_id": "39445fe2-1bea-46b2-9045-b32337b10030",
		"name": "Agilityflow API",
		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
	},
	"item": [
		{
			"name": "1. Obter Accesstoken",
			"request": {
				"method": "POST",
				"header": [
					{
						"key": "Content-Type",
						"value": "application/json"
					}
				],
				"body": {
					"mode": "raw",
					"raw": "{\"username\": \"NOME_DO_USUARIO_API__COM_PERMISSAO_NESSA_API\",\"key\": \"CHAVE_DE_SEGURANÇA_DO_USUARIO_API__COM_PERMISSAO_NESSA_API\"}"
				},
				"url": {
					"raw": "https://XXXXXXXXXXXXXXXXX.agilityflow.io/api/accesstoken?",
					"protocol": "https",
					"host": [
						"XXXXXXXXXXXXXXXXX",
						"agilityflow",
						"io"
					],
					"path": [
						"api",
						"accesstoken"
					],
					"query": [
						{
							"key": "",
							"value": "",
							"disabled": true
						},
						{
							"key": "",
							"value": "",
							"disabled": true
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "2. Post API",
			"request": {
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL3dzLzIwMDgvMDYvaWRlbnRpdHkvY2xhaW1zL3VzZXJkYXRhIjoiOTdmZTM1NmItMDA5OC00ZTlhLTkwNTUtODMwMTA3YzM5NjA1IiwibmFtZWlkIjoibG9jYWxob3N0IiwibmJmIjoxNTY0NDI4NTk5LCJleHAiOjE1NjQ0Mjg2NTksImlhdCI6MTU2NDQyODU5OX0.ul7Emi7KDepfmRwWO91RQcTZQrc8r3xlMKJnLYcduEKeNRDGC7F15_-YojHfm1ogM32LjUV76MWxNXTLeJTrLw"
					},
					{
						"key": "Content-Type",
						"name": "Content-Type",
						"value": "application/json",
						"type": "text"
					}
				],
				"body": {
					"mode": "raw",
					"raw": "{\n\n\t\t\t\"id\": \"345b65d7-4c99-426c-95fc-1dd8de76cc9d\",\n\t\t\t\"nome\": \"_123458910Cargo LEGALLLLL \"\n\t\n}"
				},
				"url": {
					"raw": "https://XXXXXXXXXXXXXXXXX.agilityflow.io/api/data/b3bf7ce3-f226-4500-83cd-2873b050c742",
					"protocol": "https",
					"host": [
						"XXXXXXXXXXXXXXXXX",
						"agilityflow",
						"io"
					],
					"path": [
						"api",
						"data",
						"b3bf7ce3-f226-4500-83cd-2873b050c742"
					]
				}
			},
			"response": []
		}
	]
}

Após a importação no Postman você precisará seguir alguns passos:

Passo 1

No Postman, abra o exemplo "1. Obter Accesstoken"

Passo 2

Você precisará fazer algumas mudanças. 

(1) Troque o XXXXXX.agilityflow.io pelo seu subdomínio no agilityflow;

(2) Na aba "body", Troque o usuário e chave de segurança da API que você criou. como na imagem abaixo:

Passo 3 - Obter Access token para execução da API

Por segurança, antes de cada execução de API é necessário que você gere um token para validação do usuário.

Então, agora execute essa API.

Copie o código retornado no JSON na propriedade "accessToken", usaremos esse código a seguir.

Passo 4

No Postman, abra o exemplo "2. Post API"

Passo 5

Você precisará fazer algumas mudanças. 

(1) Troque o XXXXXX.agilityflow.io pelo seu subdomínio no agilityflow;

(2) Na aba "headers", clique no VALUE da Key "Authorization" e cole o código "accessToken" que geramos nos passos acima, após a palavra "Bearer ". Então o valor deverá ficar  "Bearer Accesstoken_que_você_colou".

(3) Troque o Id da API "/data/b3bf7ce3-f226-4500-83cd-2873b050c742" de exemplo pelo id da API que você acabou de criar no Agilityflow.

(4) Na aba "body" você pode trocar os valores que você deseja inserir ou atualizar:

Então, agora execute essa API e entre no seu log de API do agilityflow para acompanhar e verificar se deu certo

Variáveis de ambiente

Nessa tela de variáveis de ambiente você definirá informações (variáveis globais) que ficarão disponíveis em diversas partes do seu sistema.

Suponha que você queira que a Data de Nascimento do usuário logado esteja disponível para acesso via Javascript nos seus formulários ou você quer usar essa informação em algum parâmetro de entrada de uma Query, em relatórios ou dashboards.

Para isso basta criar uma variável do tipo "SQL Simples (Valor único)"; defina o nome para a variável, nesse caso, utilize "var_dataNascimento"; marque como SIM a opção "Essa é uma Informação relacionada ao usuário logado e o valor pode variar de acordo com cada usuário".

No botão "Query Sql", defina a query Sql para buscar a Data de Nascimento do usuário logado. Exemplo da query:

select top 1 usu_dt_nasc as Value from tbl_usuario where id = @var_usuarioLogadoId

Salve e pronto. A partir de agora essa variável estará disponível em todo o seu ambiente. Para recuperar os valores da variável veja os itens mais abaixo.

Importante: os valores das variáveis de ambiente, ficam em cache, esse cache é renovado a cada 1 hora. Assim melhora a performance e evita excessos de consultas ao banco de dados.  O cache é automaticamente renovado quando o usuário faz login e quando no formulário de criação da Variável de Ambiente você clica em "salvar".

Atenção: Nunca coloque dados sensíveis ou sigilosos em uma variável de ambiente.

Para recuperar os valores da variável de ambiente

Seguindo o exemplo acima, suponhamos que você queira agora recuperar o valor via Javascript.

Caso queira utilizar a variável em alguma situação específica ou em alguma parte do sistema que ela ainda não esteja disponível, fale com nossa equipe que estaremos prontos para te ajudar.

A forma correta seria via:

Em Javascript

Suponhamos que a variável criada tem o nome "var_dataNascimento". Utilize a função abaixo, ela retornará o valor da variável.

Recuperar o Valor:

var var_dataNascimento = GetEnvironmentVariable("var_dataNascimento")

Recuperar a Descrição (texto), no caso de variáveis do Tipo "Query com Id + Descrição":

var var_dataNascimento = GetEnvironmentVariable_Text("var_dataNascimento")

Em uma Query SQL

Suponhamos que a variável criada tem o nome "var_dataNascimento". Utilize o nome da variável como parâmetro de sua Query, como no exemplo abaixo.

select usu_nome  from tbl_usuario where usu_dt_nasc = @var_dataNascimento

Em C# (na área de Regras de Negócio do Formulario)

Suponhamos que a variável criada tem o nome "var_dataNascimento". Utilize a função abaixo, ela retornará o valor da variável.

Recuperar o Valor:

FormContext.GetEnvironmentVariable("var_dataNascimento")

Recuperar a Descrição (texto), no caso de variáveis do Tipo "Query com Id + Descrição":

FormContext.GetEnvironmentVariable_Text("var_dataNascimento")

Em C# (nos componentes em cshtml)

Suponhamos que a variável criada tem o nome "var_dataNascimento". Utilize a função abaixo, ela retornará o valor da variável.

Recuperar o Valor:

PageContext.GetEnvironmentVariable("var_dataNascimento")

Recuperar a Descrição (texto), no caso de variáveis do Tipo "Query com Id + Descrição":

PageContext.GetEnvironmentVariable_Text("var_dataNascimento")

Em C# (nas API)

Suponhamos que a variável criada tem o nome "var_dataNascimento". Utilize a função abaixo, ela retornará o valor da variável.

Recuperar o Valor:

ApiContext.GetEnvironmentVariable("var_dataNascimento")

Recuperar a Descrição (texto), no caso de variáveis do Tipo "Query com Id + Descrição":

ApiContext.GetEnvironmentVariable_Text("var_dataNascimento")

Change Request

Permite enviar algumas funcionalidades de um ambiente para outro. Essa função é utilizada quando se tem mais de um ambiente, e usa-se o conceito de ambiente de desenvolvimento e outro como ambiente de produção.

É possível selecionar os formulários e tabelas associativas (Tabela Relacional N:N) que devem ser enviados a outros ambientes.

Além disso, é possível incluir scripts customizados para serem executados antes e depois da transferência dos objetos.

Ao transferir os formulários, apenas a estrutura é transferida e não o conteúdo.

Visual Code Editor

O agilityflow permite editar os formulários muito mais do que as configurações pré-definidas do formulário estabelecidas pelo sistema. Para fazer isso, é necessário utilizar o Visual Code Editor.

Nele, é possível modificar o formulário de 4 maneiras:

Style (CSS)

É possível utilizar todos os recursos do CSS para fazer as modificações do formulário. 

Javascript

O javascript também está disponível para ser modificado. Além disso, já existem algumas facilidades criadas pelo agilityflow, que ficam disponíveis para uso.

C# (Server Side)

Inclua aqui, C# que atuarão no formulário.

Componentes CsHtml

Qualquer conteúdo Html pode ser criado atráves desses componentes. Entretanto, esses componentes precisam ser posicionados na tela de cadastro do formulário.

Formulário - customizar com HTML, C#, CSS e Javascript

O agilityflow também pode ser customizado através da Linguagem Html, CSS, Javascript e C# (csharp).

O html do agilityflow é baseado no Razor do framework .Net, isso é, você pode além de customizar com HTML, utilizar código C# (razor) para dar mais flexibilidade e poder ao seu componente Html.

O que e onde customizar?

Acesse a parte de Desenvolvimento do Formulário que você deseja customizar, para isso, entre na área de customização de um formulário e clique na opção Visual Code Editor, como na imagem abaixo:

No Visual Code editor, no menu esquerdo, serão apresentados as seguintes opções:

• Style (CSS):  opção para customizar o CSS de todo o formulário.
• Javascript:  opção para customizar o Javascript de todo o formulário.
• Componente CsHtml: opção para criar novos componentes em HTML

Style (CSS)

Nessa área, você pode criar customizações via linguagem CSS para todo o formulário, o seu uso é livre.

Levar em consideração o tratamento em CSS para a responsividade da plataforma em outros device, Mobile, Computador Desktop, Tablet, etc.

Javascript: 

Nessa área, você pode criar customizações via linguagem Javascript para todo o formulário, o seu uso é livre.

Você pode utilizar jquery e outras bibliotecas já declaradas no código-fonte por padrão (veja lista mais abaixo).

Exemplo de utilização:

No código javascript abaixo, a regra impede que um formulário de projetos que esteja com o status "inativo", seja salvo:

var projeto = {
    init: function () {
        projeto._setEvents(); //registrar os eventos que são inerentes a esse bloco de código
    },
    _setEvents: function () {

      	//ao fazer o submit do formulário executa a função de validação de status
        $('#formulario').on('submit', function (e) {
            projeto.validarStatus();
        })

    },
    validarStatus: function () {

      	//recupera através de jquery o valor do campo "Status do Projeto"
        var status_projeto = $("#status_projeto").val();
      
      	//verifica se o tipo de envio que o formulário está requisitando no submit 
        //é do tipo "SALVAR" e se o status é "inativo"
        //caso seja, inválida o submit e apresenta uma aviso para o usuário
        if (Form.getFormActionOnSubmit() == ACTION_SALVAR && status_projeto == "inativo") {

            //inválida o submit e apresenta uma aviso para o usuário
            Form.invalidateForm({
                msg: 'Um projeto inativo não pode ser salvo.'
            });

        }
 
    }
}
projeto.init(); //iniciando e configurando

Abaixo estão listadas algumas funções nativas do agilityFlow para javascript:

Como utilizar funções Javascript dentro de um CSHTML

Caso você utilize Javascript dentro de um componente HTML (CSHTML), é necessário que o código esteja dentro da função DOM.ready (como no exemplo abaixo) para garantir que o seu código só execute após todo o carregamento de todos as funções Javascript

Recomendamos que dentro do arquivo CSHTML só tenha a "chamadas" para as funções que estejam programadas dentro do arquivo específico para o código Javascript.

<script>
    DOM.ready(function () {
  
  		//seu código javascript aqui
  
    });
</script>

Funções Javascript Nativas

Recuperar data do servidor:

GetDateNow()

A data e hora são obtidas dos servidores do Agilityflow, para assim garantir a confiabilidade da data e hora

Atenção: Lembre-se que no Javascript o retorno do método ".getMonth()" de um objeto Date, não refere-se ao mês e sim a Índice daquele mês no array de meses, sendo assim, o retorno desse método sempre será entre os valores 0 até 11 e não de 1 a 12

Exemplo de como configurar o valor inicial de um campo com a data atual.

Para esse exemplo, encare que o ID do campo que estamos preenchendo com a data atual é "data".

var exemplo1 = {
    init: function () {
        exemplo1.setToday();
    },
    //coloca a data atual no campo de data
    setToday: function () {

        if ($('#data').val() != "") return;

        //data do servidor para garantir que seja uma data válida
        var date = GetDateNow();

        var day = date.getDate().toString().padLeft(2, '0');
        var year = date.getFullYear();
        var monthIndex = date.getMonth()
        monthIndex++;
        if (monthIndex > 12)
            monthIndex = 1;


        $('#data').val(day.toString().padLeft(2, '0') + '/' + monthIndex.toString().padLeft(2, '0') + '/' + year);

    }
}
exemplo1.init();

Comparar uma data com a data atual (Hoje):

Essa comparação desconsidera a HORA

A função é: formContext.datetime.validation.compareToday(comparador, data)

Os possíveis comparadores são: 

var greater = formContext.datetime.validation.compareToday('greater', '31/12/2000');
console.log('greater',greater);

var greater_or_equal = formContext.datetime.validation.compareToday('greater-or-equal', '31/12/2000');
console.log('greater-or-equal', greater_or_equal);

var less = formContext.datetime.validation.compareToday('less', '31/12/2000');
console.log('less',less);

var less_or_equal = formContext.datetime.validation.compareToday('less-or-equal', '31/12/2000');
console.log('less-or-equal', less_or_equal);

var equal = formContext.datetime.validation.compareToday('equal', '31/12/2000');
console.log('equal', equal);

Comparação entre datas. Comparar 2 datas:

Essa comparação desconsidera a HORA

A função é: formContext.datetime.validation.compare(data1, comparador, data2)

Os possíveis comparadores são: 

var greater = formContext.datetime.validation.compare('31/01/2001','greater', '31/12/2000');
console.log('greater',greater);

var greater_or_equal = formContext.datetime.validation.compare('31/01/2001','greater-or-equal', '31/12/2000');
console.log('greater-or-equal', greater_or_equal);

var less = formContext.datetime.validation.compare('31/01/2001','less', '31/12/2000');
console.log('less',less);

var less_or_equal = formContext.datetime.validation.compare('31/01/2001','less-or-equal', '31/12/2000');
console.log('less-or-equal', less_or_equal);

var equal = formContext.datetime.validation.compare('31/01/2001','equal', '31/12/2000');
console.log('equal', equal);

Recuperar o ID do usuário logado: 

GetUserId()

Recuperar o nome do usuário logado: 

var nome = pageNavigation.getUserName();
var nomeCompleto = pageNavigation.getUserNameCompleto()

Recuperar os Perfis do usuário logado: 

GetUserProfileId() //retorna um array com os Ids dos perfis ['xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx','xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx']

Função para identificar se o usuário logado tem um determinado perfil: 

UserHasProfileId('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx') //retorna true ou false

Expandir e Recolher um determinado painel de campos

var panelId = 'f175132d-5e85-778f-1354-cb2d339e6146';

//para alternar entre expandido e recolhido
formContext.panel.collapse.toggle(panelId)

//para recolher o painel
formContext.panel.collapse.hide(panelId)

//para expandir o painel
formContext.panel.collapse.show(panelId)

//para testar se o painel está recolhido ou não
formContext.panel.collapse.isCollapsed(panelId) 

Recuperar os valores das "Variáveis de Ambiente"

Para saber mais sobre variáveis de ambiente entre em Variáveis de ambiente

var valor = GetEnvironmentVariable("nomeDaVariavel")

Recuperar a Descrição (texto), no caso de variáveis do Tipo "Query com Id + Descrição":

var text = GetEnvironmentVariable_Text("nomeDaVariavel")

Recuperar o VALOR preenchido de um campo no Formulário

var value = Form.getValueField("idDoCampo");

Recuperar o VALOR preenchido de um campo no Formulário PAI (formulário que abriu o formulário atual)

var value = Form.getValueField_parentIFrame("idDoCampo");

Recuperar o TEXTO preenchido de um campo no Formulário (Para os campos: Lista de Seleção e Pesquisa com Auto Completar)

var value = Form.getTextField("idDoCampo");

Recuperar o TEXTO preenchido de um campo no Formulário PAI (formulário que abriu o formulário atual) (Para os campos: Lista de Seleção e Pesquisa com Auto Completar)

var value = Form.getTextField_parentIFrame("idDoCampo");

Preencher um valor em um campo do Formulário

Parâmetros opcionais da função javascript

//EXEMPLO 1: preenchendo o valor
Form.setValueField("idDoCampo", "value");



//EXEMPLO 2: preenchendo o valor e enviando os parametros opcionais para a função:
var options = { setOnlyIfFieldValueIsEmpty: true  }
Form.setValueField("idDoCampo", "value", options);

Preencher um valor em um campo do Formulário PAI (formulário que abriu o formulário atual)

Parâmetros opcionais da função javascript

//EXEMPLO 1: preenchendo o valor
Form.setValueField_parentIFrame("idDoCampo", "value");


//EXEMPLO 2: preenchendo o valor e enviando os parametros opcionais para a função:
var options = { setOnlyIfFieldValueIsEmpty: true }
Form.setValueField_parentIFrame("idDoCampo", "value", options);

Customizar evento de submit do formulário (Antes do post):

$('#formulario').on('submit', function (e) { 
		/*
          função js para executar antes do 
          post e após a validação padrão do agilityflow
          
        */  
})

No exemplo de javascript, nas linhas de 5 a 12 usamos o código para interceptar o submit e validar o status do projeto.

Forçar o Salvar do formulário:

Clique aqui para visualizar detalhes de Como forçar o salvamento de um Form

Escutar o evento de retorno de um submit no form:

Clique aqui para visualizar detalhes de Como escutar o evento de retorno de um submit no form

Invalidar o post/submit do formulário:

Para evitar que o formulário seja postado, você pode utilizar a seguinte função no evento de submit

$('#formulario').on('submit', function (e) {
  
    //invalidar submit
    Form.invalidateForm({
      msg: 'Mensagem para o usuário.'
    });
  
})

No exemplo de javascript, nas linhas de 23 a 26 usamos o código para bloquear o submit caso o status do projeto seja inválido.

Verificar qual foi o botão clicado pelo usuário no submit do formulário. Se foi o salvar, salvar rascunho, descartar, deletar, aprovar, retornar, reprovar e assim por diante...

Os tipos de ações que o usuário pode realizar em um formulário são:

• Salvar (ACTION_SALVAR)
• Salvar rascunho (ACTION_SALVAR_RASCUNHO)
• Descartar rascunho (ACTION_DESCARTAR_RASCUNHO)
• Aprovar (ACTION_APROVAR)
• Reprovar (ACTION_REPROVAR)
• Retornar (ACTION_RETORNAR)
• Deletar (ACTION_DELETAR)
• Salvar formulário filho (ACTION_SALVAR_FORMULARIO_FILHO)
• Deletar formulário filho (ACTION_DELETAR_FORMULARIO_FILHO)
• Descartar alterações formulário filho (ACTION_DESCARTAR_ALTERACOES_FORMULARIO_FILHO)
• Solicitar troca de aprovador na etapa (ACTION_SOLICITAR_TROCA_APROVADOR_ETAPA_DINAMICA)
• Salvar o novo aprovador definido para a etapa (ACTION_SALVAR_DEFINICAO_APROVADOR_ETAPA_DINAMICA)

Abaixo o exemplo para recuperar a ação:

$('#formulario').on('submit', function (e) {
  
  		var tipoAcao = Form.getFormActionOnSubmit();
  		if(tipoAcao == ACTION_SALVAR){
          
            //ação para "Salvar"
          
        }else if(tipoAcao == ACTION_SALVAR_RASCUNHO){
          
            //ação para "Salvar rascunho"
          
        }else if(tipoAcao == ACTION_DESCARTAR_RASCUNHO){
          
            //ação para "Descartar rascunho"
          
        }else if(tipoAcao == ACTION_APROVAR){
          
            //ação para "Aprovar"
          
        }else if(tipoAcao == ACTION_REPROVAR){
          
            //ação para "Reprovar"
          
        }else if(tipoAcao == ACTION_RETORNAR){
          
            //ação para "Retornar"
          
        }else if(tipoAcao == ACTION_DELETAR){
          
            //ação para "Deletar"
          
        }else if(tipoAcao == ACTION_SALVAR_FORMULARIO_FILHO){
          
            //ação para "Salvar formulário filho"
          
        }else if(tipoAcao == ACTION_DELETAR_FORMULARIO_FILHO){
          
            //ação para "Deletar formulário filho"
          
        }else if(tipoAcao == ACTION_DESCARTAR_ALTERACOES_FORMULARIO_FILHO){
          
            //ação para "Descartar alterações formulário filho"
          
        }else if(tipoAcao == ACTION_SOLICITAR_TROCA_APROVADOR_ETAPA_DINAMICA){
          
            //ação para "Solicitar troca aprovador etapa dinâmica"
          
        }else if(tipoAcao == ACTION_SALVAR_DEFINICAO_APROVADOR_ETAPA_DINAMICA){
          
            //ação para "Salvar definicão de  aprovador etapa dinâmica"
          
        }
  
})

No exemplo de javascript, nas linha 21 usamos o código no IF para testar se o submit era do tipo "Salvar".

Mensagem e alerta para o usuário

No código abaixo mostra exemplo de como apresentar alertas na tela para o usuário.

//mensagem de sucesso
pageMsg.showMsgSuccess(msg, title);

//mensagem de aviso
pageMsg.showMsgWarning(msg, title);

//mensagem de erro
pageMsg.showMsgError(msg, title);

//esconder a mensagem 
pageMsg.hideMsgs(true);

Recuperar um valor de uma QueryString

var value = getQuerystring('paramQuerystring1');

Javascript - Formulário Filho

Javascript - Buscar o Json com o resultado e todos os campos de uma tabela filha

//o parametro 'f43330be-0467-7fee-1168-28c9e6d185f0' é o Id da Tabela
var json = formContext.childForm.datatable.getResultJson('f43330be-0467-7fee-1168-28c9e6d185f0');

Javascript - Atualizar uma Tabela Filha

//o parametro 'f43330be-0467-7fee-1168-28c9e6d185f0' é o Id da Tabela
formContext.childForm.datatable.refresh('f43330be-0467-7fee-1168-28c9e6d185f0');

Javascript - Buscar o total de itens em uma tabela filha

//o parametro 'f43330be-0467-7fee-1168-28c9e6d185f0' é o Id da Tabela
var total = formContext.childForm.datatable.totalRows('f43330be-0467-7fee-1168-28c9e6d185f0');

Javascript - Refazer a ordenação dos itens quando a tabela filha estiver liberada a ordenação manual via "Drag and Drop" (Arrastar e soltar)

//reordena os itens da tabela filha de acordo com a ordem dos ids passados no parametro @items_sorted
//o primeiro parametro, 'f43330be-0467-7fee-1168-28c9e6d185f0' é o Id da Tabela
// o segundo parametro "items_sorted" é a lista ordenada com os ids dos elementos que pertencem a tabela:
//[
//    { formid: '', draftid: '' },
//    { formid: '', draftid: '' },
//    { formid: '', draftid: '' },
//]
formContext.childForm.datatable.setOrder('f43330be-0467-7fee-1168-28c9e6d185f0', items_sorted);

Javascript - Buscar todos os ids: "Id do Formulário" e "Id do Rascunho" dos itens listados em uma tabela filha

//o parametro 'f43330be-0467-7fee-1168-28c9e6d185f0' é o Id da Tabela
var ids = formContext.childForm.datatable.getAllChildIds('f43330be-0467-7fee-1168-28c9e6d185f0');


o restorno será nesse formato:
 [
    {
        "formid": "5451ae4e-290a-4887-8099-6e9a026c0283",
        "draftid": ""
    },
    {
        "formid": "6c55eeef-427b-40ce-b415-dab11b4aa039",
        "draftid": ""
    },
    {
        "formid": "304cc8e2-47af-44d4-ba83-c0e4939e21fb",
        "draftid": ""
    }
]

Javascript - Disparo de Eventos na tabela Filha

Javascript - Biblioteca

Abaixo estão listadas as biblioteca javascript que já estão importadas na página do formulário:

Criar Html (Componente Cshtml): 

Abra o formulário que deseja customizar. Na barra superior desse formulário clique em "Visual Code Editor" como mostra figura abaixo:

Para criar um html, clique no botão "Novo Cshtml", como na figura abaixo:

Ao clicar, digite o nome do Html

Agora o novo html está criado, e será mostrado para edição no menu do lado esquerdo, como na imagem abaixo.

Clique no nome do Html para edita-lo.

No arquivo Html, é possível utilizar qualquer tag Html que você precisar. Para embelezar o seu html utilize a linguagem css na área  "Style (CSS)", e para customizar com javascript, faça as customizações na área "Javascript".

Faça as edições necessárias, salve e posicione esse novo componente no seu formulário. (O passo a passo para posicionar o componente no formulário está descrito mais abaixo)

Posicionando o componente Html no formulário

Depois de criado o componente cshtml, salve todas as configurações e customizações realizadas no Visual Code Editor, através do botão .

Agora volte para a edição do formulário e clique no botão  

No box de opções de campos, o seu componente "ExemploHtml" já deverá estar listado, como mostra a imagem abaixo:

Clique no nome do componente, e logo em seguida em salvar 

Agora você deve posiciona-lo na tela, para isso basta clicar na opção  como mostra imagem abaixo.

Ao abrir a opção de montagem de tela, posicione e arraste o seu componente onde você preferir.

Agora salve e publique esse novo formulário! Pronto, o seu componente está criado.

Exemplo prático de customização html

No exemplo a seguir vamos apresentar uma mensagem em azul de bom dia ou boa tarde ou boa noite dependendo do horário atual.

Para descobrir qual a data e qual a mensagem a ser apresentada, usamos C# no cshtml.

Para deixar a mensagem azul, usamos CSS.

Nesse exemplo não utilizamos javascript para nenhuma ação, mas poderia ser utilizado caso fosse necessário.

Passo 1 - Definir o html

Crie o cshtml como descrito aqui.

Agora cole o código abaixo nesse novo html:

@{
    string parteDoDia;
    var hours = DateTime.Now.Hour;
    if (hours > 16)
    {
        parteDoDia = "Boa noite";
    }
    else if (hours > 11)
    {
        parteDoDia = "Boa tarde";
    }
    else
    {
        parteDoDia = "Bom dia";
    }
}

<div class="painel-msg-customizada">        
    <span>@parteDoDia,</span>
</div>

Passo 2 - Definir o CSS

Entre na área de CSS e cole o código abaixo:

.painel-msg-customizada{
    display: block;
    text-align: left;
    padding-top: 10px;
}

.painel-msg-customizada span{

    color: #0281ff;
    display: block;
    font-size: 17px;
    font-weight: 500;
    border-bottom: solid 2px #a4d2ff;
    margin-bottom: 15px;
}

Passo 3 - Posicionar o html no formulário

Salve tudo no Visual Code Editor e posicione esse componente html, como descrito aqui.

Passo 4 - Salvar e publicar o formulário

Salve e publico o novo formulário.

Agora acesse esse formulário, o resultado deve ser igual ao print abaixo:

C# no componente CSHTML 

Se você precisar de alguma informação do formulário, utilize a opção abaixo

C# - Propriedades

C# - Recuperar (Get) valor dos campos

@{
   var campo1 = Model.FormularioCamposPreenchidos["campo1"];
}
<div>
   @campo1
</div>

@{	
    var idFormulario_Forma1 = Model.Id;
    var idFormulario_Forma2 = Model.FormularioCamposPreenchidos["id"];
}

<div>@idFormulario_Forma1</div>
<div>@idFormulario_Forma2</div>

@{	
    var idFormulario_Forma1 = Model.Id;
    var idFormulario_Forma2 = Model.FormularioCamposPreenchidos["id"];
}

<div>@idFormulario_Forma1</div>
<div>@idFormulario_Forma2</div>

@{	
    var formularioTemporarioId = Model.FormularioTemporarioId;
}

<div>@formularioTemporarioId </div>

@{	
    var formularioIdPai= Model.FormularioIdPai;
}

<div>@formularioIdPai</div>

@{	
    var formularioTemporarioIdPai= Model.FormularioTemporarioIdPai;
}

<div>@formularioTemporarioIdPai</div>

@{	
    var estruturaFormularioIdPai= Model.EstruturaFormularioIdPai;
}

<div>@estruturaFormularioIdPai</div>

C# no Componente CSHTML - Testar se é umnovo formulário ou se é uma edição 

Para saber se o formulário é um novo ou está para edição, apenas teste a variável de ID, como no exemplo abaixo:

Forma 1

@{
  var isNovoFormulario = GuidHelper.IsNullOrEmpty(Model.Id);
}

Forma 2

@{
var isNovoFormulario = Model.Id.IsNullOrEmpty();
}

Exemplo

@{
  	var msg = "";
  	var formularioId = Model.Id;

    if(formularioId.IsNullOrEmpty()){
      msg = "é um novo formulario";
    }else{
      msg = "NÃO é um novo formulario";
    }    
  
}
<div>@msg</div>

C# no componente CSHTML - Testar se é um rascunho

@{
  	var msg = "";
  	var rascunhoId = Model.RascunhoId;

    if(rascunhoId.IsNullOrEmpty()){
      msg = "é um Rascunho";
    }else{
      msg = "NÃO é um Rascunho";
    }    
  
}
<div>@msg</div>

Criar uma Tabela de dados customizada através de programação: Query SQL, C#, HTML e CSS: 

Abaixo está um exemplo de criação de uma tabela de dados buscando as informações através de uma Query SQL e apresentando no Html:

Para customizar o CSS e Javascript da tabela de dados, utilize áreas de customização já citadas nos itens acima

<h5 id="datatableTitle">Tasks</h5> 
<a id="btnAdd" href="javascript:pageNavigation.openSimpleLightBox({  islookup: true, url:'@Model.GetBaseUrl()/fluxo/index/7f786f15-d644-4351-8763-46bc2923fd21' })"><i class="mdi mdi-plus"></i> Add task</a>
<table id="tasksTable" border="1">

                <tr>
                    <th width="140px">Status</th>
                    <th>Team</th>
                    <th>Description</th>
                    <th>CreatedDate</th>
                    <th>ModifiedDate</th>
                </tr>

@{
    var applicationId = PageContext.FormId;
    
    /* concatenando o parametro */
    var dt = await PageContext.GetDataTableAsync(@"select 
                                        isnull(task.id,'') TaskId,
                                        isnull(task.description,'') TaskDescription,
                                        isnull(team.name,'') Team,
                                        task.log_data_criacao CreatedDate,
                                        task.log_data_alteracao ModifiedDate,
                                        isnull(etp.etp_nome,'') CurrentStep,
                                        frm_status_fluxo StatusFlow
                                        from 
                                            x_tbl_application_task2 task
                                        inner join tbl_formulario form
                                            on task.id = form.frm_id
                                        left join tbl_formulario_etapa etp
                                            on form.etp_id_atual = etp.etp_id and etp.frm_id = form.frm_id
                                        left join x_tbl_team team 
                                            on task.team = team.id

                                        where 
                                        task.deletado = 0
                                        and task.id_application = '"+applicationId+"' order by  task.log_data_alteracao desc, task.log_data_criacao desc ");
    
    
    /* passando como parametro */
    /*var paramsQuery = new List<NpgsqlParameter>();
    paramsQuery.Add(new NpgsqlParameter("@applicationId", applicationId){ NpgsqlDbType = NpgsqlTypes.NpgsqlDbType.Uuid });
    var dt = await PageContext.GetDataTableAsync(@"select 
                                        isnull(task.id,'') TaskId,
                                        isnull(task.description,'') TaskDescription,
                                        isnull(team.name,'') Team,
                                        task.log_data_criacao CreatedDate,
                                        task.log_data_alteracao ModifiedDate,
                                        isnull(etp.etp_nome,'') CurrentStep,
                                        frm_status_fluxo StatusFlow
                                        from 
                                            x_tbl_application_task2 task
                                        inner join tbl_formulario form
                                            on task.id = form.frm_id
                                        left join tbl_formulario_etapa etp
                                            on form.etp_id_atual = etp.etp_id and etp.frm_id = form.frm_id
                                        left join x_tbl_team team 
                                            on task.team = team.id

                                        where 
                                        task.deletado = 0
                                        and task.id_application = @applicationId order by  task.log_data_alteracao desc, task.log_data_criacao desc ", paramsQuery.ToArray());*/



    foreach (DataRow dr in dt.Rows)
    {

            var ModifiedDate = dr["ModifiedDate"] == DBNull.Value ? "" : dr["ModifiedDate"].ToString();
            var currentStep = dr["CurrentStep"].ToString();
            var statusFlow = dr["StatusFlow"].ToString();

            if(statusFlow == "A"){
                currentStep = "APPROVED";
            }else if(statusFlow == "X"){
                currentStep = "REJECTED";
            }

            <text>
                <tr class="task-row status-@currentStep" data-taskid='@dr["TaskId"].ToString()'>
                    <td><span class="st">@currentStep</span></td>
                    <td>@dr["Team"].ToString()</td>
                    <td>@dr["TaskDescription"].ToString()</td>
                    <td>@dr["CreatedDate"].ToString()</td>
                    <td>@dr["ModifiedDate"].ToString()</td>
                </tr>
            </text>

    }

}
</table>

Recarregar no servidor um componente Html ao alterar uma determinada informação do formulário:

Você pode determinar alguns momentos para que as informações de um componente html sejam recarregadas do servidor.

Essa é uma opção vantajosa em situações em que você tenha consultas (queries) de banco de dados no dentro do componente Html e deseja que essa consulta seja atualizada em alguns momentos.

Apenas campos do tipo "Lista de seleção (Combo)" e "Pesquisa com auto completar" poderão disparar o recarregamento do Componente Cshtml

Exemplo para recarregar o componente cshtml

Suponhamos que você crie um formulário que contenha 2 campos, o primeiro é um combo de Perfil de Acesso no sistema e o segundo campo é um componente CsHtml que contenha uma tabela que mostre todos os usuários que possuam o perfil selecionado no primeiro campo de Perfil de Acesso. Então, todas vez que o campo Perfil de acesso for alterado, a tabela de usuários deve ser recarregada para mostrar só os usuários relacionados ao novo perfil alterado.

Para esse exemplo, crie um novo formulário. Nesse novo formulário, crie um combo chamado Perfil e abaixo crie um componente CShtml que apresente uma tabela com todos os usuários do perfil selecionado (copiar e colar código abaixo no novo componente). 

Código para o Componente Cshtml que listará os usuários

<h5 id="datatableTitle">Usuários com esse perfil:</h5> 
<table id="usuTable" border="1">

                <tr>
                    <th width="140px">Nome</th>
                    <th>E-mail</th>
                </tr>

@{
    var perfilId = Model.FormularioCamposPreenchidos["perfil"];

    if(perfilId != null && perfilId.ToString() != string.Empty){

        //na query será utilizado no WHERE o id do perfil selecionado no combo
        var query = @"select id, isnull(usu_nome,'') Nome, isnull(usu_email,'') Email  from tbl_usuario u inner join tbl_perfil_usuario pu on u.id = pu.id_tbl_usuario and pu.deletado = 0 where u.deletado = 0 and pu.id_tbl_perfil = '"+perfilId+"' ";
        var dt = await PageContext.GetDataTableAsync(query);

        foreach (DataRow dr in dt.Rows)
        {

                <text>
                    <tr class="task-row" data-taskid='@dr["id"].ToString()'>
                        <td>@dr["Nome"].ToString()</td>
                        <td>@dr["Email"].ToString()</td>
                    </tr>
                </text>

        }

    }

}
</table>

Agora adicione esse componente na tela abaixo do campo Perfil.

Clique para editar o componente e marque o checkbox "Ao alterar o campo Perfil", como na imagem abaixo.

Pronto, agora salve e acesse esse novo formulário criado.

Tente alterar o valor do combo Perfil, se tudo correr bem a tabela de usuários deverá ser recarregada toda vez que o campo perfil for alterado.

C# - Adicionar e Atualizar os itens a uma tabela de formulário filho:

Para esse exemplo, será necessário Associar um Formulário Filho a um Formulário Pai, considere que nesse exemplo o Formulário Filho tenha um campo de texto chamado  "nome_filho".

O exemplo abaixo foi colocado dentro de um cshtml do formulário pai e ao criar um novo formulário adicionará um item ao formulário filho e logo em seguida atualizará o item apenas para a demonstração das funções

Caso a informação a ser adicionada ou atualizada seja um número, enviar sem separador de milhar e o separador de decimal deve ser "." (ponto), exemplo:  para o valor de nove mil e quinhentos, deve ser enviado 9500.00. Para facilitar utilize a função PageContext.FormatNumberToString_EnglishFormat(999999.99, 2);

@{	

	//id da tabela
    var tableid_relacaoFormularioPaiFilhoId = Guid.Parse("0dd874a9-9c39-4e4f-acc3-02015a60f6bb"); //table id DO FORMULÁRIO FILHO
  
    //info do formulario filho
    var campos_e_valores = new DataDictionary();
    campos_e_valores["nome_filho"] = "Exemplo 01 - " + DateTime.Now;
    campos_e_valores["valor_numerico"] = PageContext.FormatNumberToString_EnglishFormat(999999.99, 2);
  
  
	//testa se é um form NOVO e se NÂO é RASCUNHO pois nesse exemplo quero inserir apenas para formulário NOVOS que não sejam RASCUNHOs
    var isNovo = Model.Id.IsNullOrEmpty();
    var isRascunho = !Model.RascunhoId.IsNullOrEmpty();
  
  
    if(isNovo && !isRascunho){
      
      	//adiciona na tabela filha
       //retorna o id do rascunho desse formlario filho, pois o ID final só será gerado ao Salvar o Formulario PAi
       var formRascunhoId = PageContext.AddChildForm( tableid_relacaoFormularioPaiFilhoId, campos_e_valores);
      
      
      
        //atualiza o item que acabamos de adicionar, apenas para demonstração
		Guid? idFormularioFilho = null;        
        campos_e_valores["nome_filho"] = "Exemplo Atualizado 0123456789 - " + DateTime.Now;            
        PageContext.UpdateChildForm(         	         
            //se ainda não foi salvo pela primeira vez, o item só terá o Id do Rascunho
            rascunhoId, 

            //se já foi salvo pela primeira vez, o item já terá o Id
            //então passa aqui o id (nesse exemplo estamos passando null para atualizar apenas o
            idFormularioFilho, 

            tableid_relacaoFormularioPaiFilhoId,
            campos_e_valores);
     
	}
}

C# - Obter o total de itens em uma tabela de formulário filho:

@{	
	//relacaoFormularioPaiFilhoId não é o id do formulario filho e sim o id do campo que gera ao adicionar o formulario filho ao formulario pai
    var relacaoFormularioPaiFilhoId = Guid.Parse("f43330be-0467-7fee-1168-28c9e6d185f0"); //trocar esse id 
  
    var total = await PageContext.CountChildFormsAsync(relacaoFormularioPaiFilhoId);
}

C# - Enviar e Recuperar parâmetros extras na requisição ajax no partial view (cshtml)

Enviando um parâmetro extra via javascript

var idsItensPrecosCompostos = formContext.childForm.datatable.getAllChildIds('251c66c9-cb26-f3a8-d014-8a1dd4a6b6aa')
formContext.loadViewComponent("calcular_valor_custo_preco_composto", {
  extraData: { idsItensPrecosCompostos: JSON.stringify(idsItensPrecosCompostos) } ,
  onSuccess: function (response) {
	console.log(response)
  }
})

Recuperando um parâmetro extra via C# no CShtml.

Nesse exemplo, dentro do partial view "calcular_valor_custo_preco_composto", colocaremos esse código

@{
    
    var json_idsItensPrecosCompostos = Request["idsItensPrecosCompostos"];
    

}
<div>@json_idsItensPrecosCompostos</div>

C# e Javascript - Trabalhando com Json 

1. Enviando um parâmetro no formato JSON via Javascript. Para isso no código abaixo transformamos um Array em JSON usando o JSON.stringify(...)

var idsItensPrecosCompostos = formContext.childForm.datatable.getAllChildIds('251c66c9-cb26-f3a8-d014-8a1dd4a6b6aa')
formContext.loadViewComponent("calcular_valor_custo_preco_composto", {
  extraData: { idsItensPrecosCompostos: JSON.stringify(idsItensPrecosCompostos) } ,
  onSuccess: function (response) {
	console.log(response)
  }
})

2. Recuperando um parâmetro JSON via C# e convertendo em Objeto Json

Você poderá utilizar qualquer função que faça parte das Bibliotecas 

Nesse exemplo, dentro do partial view "calcular_valor_custo_preco_composto", colocaremos esse código para transformar o parametro que era string em um objeto dinamico do tipo JSON:

@{
    
    var json_idsItensPrecosCompostos = Request["idsItensPrecosCompostos"];    
    dynamic idsItensPrecosCompostos = Newtonsoft.Json.JsonConvert.DeserializeObject(json_idsItensPrecosCompostos);
}

3. Count no JSON 

* o count vai existir em caso do JSON estar no formato de uma lista ( array ).

@{
    
    var json_idsItensPrecosCompostos = Request["idsItensPrecosCompostos"];    
    dynamic idsItensPrecosCompostos = Newtonsoft.Json.JsonConvert.DeserializeObject(json_idsItensPrecosCompostos);
  	var total = idsItensPrecosCompostos.Count;
}

4. Looping no JSON 

* o foreach vai existir em caso do JSON estar no formato de uma lista ( array ).

@{
    
    var json_idsItensPrecosCompostos = Request["idsItensPrecosCompostos"];    
    dynamic idsItensPrecosCompostos = Newtonsoft.Json.JsonConvert.DeserializeObject(json_idsItensPrecosCompostos);

    var draftids = new List<string>();
    var formids = new List<string>();
    foreach (var idItem in idsItensPrecosCompostos)
    {
        draftids.Add(idItem.draftid.ToString());
        formids.Add(idItem.formid.ToString());
    }
}

C# - Transformar Array List  em uma string separada por virgula

@{	
    var itens = new List<string>() { "abacaxi", "mamão", "melão", "banana"};
    var msg = String.Join(",",itens.ToArray());
}
@msg

C# - Criar um Json dinamicamente

@{	
    var list_InfoNomeEmail = new JArray() as dynamic; 
    
  	var query = @"select nome, email from x_tbl_xxxxxxxxxxxxx where deletado = 0";
    var dt = await PageContext.GetDataTableAsync(query);
    foreach (DataRow dr in dt.Rows)
    {
      var nome = dr["nome"].ToString();
      var email = dr["email"].ToString();

      //cria o objeto e inclua na lista para depois ser transformado em json
      dynamic infoNomeEmail = new JObject();
      infoNomeEmail.nome = nome;
      infoNomeEmail.email = email;
      list_InfoNomeEmail.Add(infoNomeEmail);
    }
  
  
  //devolve os items em formato json
  if(list_InfoNomeEmail.Count > 0){
    
     //serializa para JSON
     var formata_para_json = JsonConvert.SerializeObject(list_InfoNomeEmail);
    
     //usa o Html.Raw para garantir a integridade dos caracteres no retorno
     @Html.Raw(formata_para_json)
  }

    
    
}

Quadros (Kanban)

No agilityflow, a visualização padrão é por listas. Cada linha da lista corresponde a um registro do formulário. As colunas exibidas são as que foram definidas na configuração do formulário, na listagem principal de dados.

Entretanto, dependendo da natureza das informações armazenadas no formulário, um outro tipo de visualização seja mais adequado. A visualização em quadros do agilityflow, visa melhorar a maneira de interação do usuário com os registros. Para isso, usamos o método Kanban, que é um método consagrado de mercado, e que é conhecido por ser um método de gestão visual para o controle de tarefas, processos e demandas.

Usando Um Quadro

Opções

Ao abrir um quadro, as opções principais estão no menu do canto superior direito:

Listagem Padrão

Alterna a visualização do formulário para o modo padrão.

Visualização Favorita

Ao clicar no ícone  ao lado de uma visualização, ela se torna a padrão do formulário. Com isso, sempre que o formulário for acessado, a primeira visualização será a que for definida como favorita.

Criar Outro Quadro

Abre a opção para se criar um novo quadro como explicado no capítulo criando um quadro abaixo.

Reordenar as colunas

É possível reordenar as colunas de um quadro. Basta clicar na coluna e arrastar para a posição desejada. O salvamento é feito de forma automática, e a ordem das colunas será sempre o último configurado.

Arrastando os Cards

Ao arrastar um card, o valor do campo que é usado para definir as colunas é alterado no registro também. Na prática, arrastar um card para outra coluna é o mesmo que abrir o registro e alterar o campo.

É possível também re-ordenar os cards dentro de uma mesma coluna, mudando assim a ordem em que os cards são exibidos.

Rascunhos

Os rascunhos podem ser exibidos em dois locais:

Na coluna a qual o registro pertence

Caso o registro já possua o campo da coluna preenchido, ele será exibido na coluna respectiva, com uma marcação de rascunho, como mostra a figura abaixo:

Na coluna Rascunhos Não Salvos

Caso não seja possível definir a coluna, o registro será mostrado em uma coluna chamada "Rascunhos Não Salvos".

Coluna "Não Definido"

Os registros que já foram salvos, mas o campo usado para definir as colunas do quadro não tenha sido preenchido, serão colocados em uma coluna chamada "Não Definido".

Adicionar Lista

Essa opção cria novas colunas na visualização. Na prática, é adicionado um registro na tabela dinâmica que o campo usado como base para colunas utiliza.

Configurar Ações

É possível criar ações pré-definidas, como explicadas aqui.

Filtro

Os filtros funcionam da mesma forma que na visualização padrão.

Criando um quadro

A criação do quadro pode ser através do devcenter, na opção Quadros (kanban), ou dentro do próprio formulário (caso o usuário tenha permissão) clicando no canto superior esquerdo onde é mostrada o tipo de listagem, e em seguida em "Criar Quadro":

Em seguida, é necessário informar qual o formulário será usado como origem dos dados.

Ao selecionar o formulário, outras opções serão apresentadas para configurar o novo quadro:

Campos de apresentação do card

Devido ao espaço limitado desse método, não é possível exibir todos os campos como na forma de listagem padrão. A exibição é limitada a dois campos, que serão apresentados como título e descrição. Abaixo, um exemplo de um cartão com os dois campos

Título do card

É o campo que será usado como título do card. Esse campo é mostrado em negrito, no topo.

Descrição do card

É o campo que virá abaixo do título.

Divisão das colunas/listas do quadro

O método Kanban utiliza colunas para separar e exibir os registros. Nessa opção, é possível definir o critério em que as colunas serão baseadas.

As colunas serão baseadas nas etapas do fluxo do formulário?

Quando o formulário informado na origem dos dados for um fluxo com etapas, essa opção estará disponível e as colunas serão as etapas do fluxo. Caso queira outro campo, é possível selecionar a opção "Não". Outros campos aparecerão para definir as colunas.

As colunas serão baseadas em um campo existente no formulário?

Deixar como sim padrão.

As colunas serão baseadas em qual campo

Selecione o campo do formulário utilizado para a definição das colunas. Nessa opção, apenas os campos com origem em uma lista dinâmica são permitidos, tais como Lista de Seleção, Lista com Autocompletar e Radio.

Outras configurações

Nome do quadro

Defina um nome para o quadro.

Como é possível ter vários quadros pro mesmo formulário, é importante a definição de um nome que explique o propósito do quadro

Ao clicar no card deverá abrir inicialmente a aba

São duas opções: formulário e acompanhamento.

Permitir o usuário criar outras listas/colunas (mostrar botão: "adicionar lista")

O botão adicionar lista fica na extrema direita, no final do quadro, e permite que o usuário crie novas colunas no Kanban. Ao clicar em adicionar lista, na prática, abre o formulário para a criação de um novo registro no formulário usado como fonte pelo campo informado na definição das colunas do quadro.

Seja cuidadoso na criação de um quadro kanban. Após a configuração inicial, não é possível alterá-lo. Caso seja necessário, será preciso criar um novo quadro.

Listagem do Formulário - customizar com HTML, C#, CSS e Javascript

O agilityflow permite customização através da Linguagem Html, CSS, Javascript e C# (csharp).

O html do agilityflow é baseado no Razor do framework .Net, isso é, você pode além de customizar com HTML, utilizar código C# (razor) para dar mais flexibilidade e poder ao seu componente Html.

Customizar a Listagem

Acesse a parte de Desenvolvimento do Formulário que você deseja customizar, para isso, entre na área de customização de um formulário e clique na opção Visual Code Editor, como na imagem abaixo:

Nessa área você poderá customizar a parte de Cadastro e de Listagem utilizando, Javascript, CSS e CSHTML (Razor C# + Html):

Para essa documentação vamos nos preocupar com a área de "List Page".

Nessa área podemos customizar toda página de Listagem Principal de dados, como no exemplo abaixo.

Voltando a área de desenvolvimento, no menu de customização da List Page, teremos sempre 2 arquivos padrões: CSS e Javascript.

O CSS é sempre colocado no topo da página, dentro da tag <HEAD> do Html

O Javascript é sempre colocado no final da página, antes do fechamento do </Body>

Customizar com CSS

Todo código CSS da página de Listagem Principal do Formulário, deve ficar no arquivo CSS da List Page.

Nessa área, você pode criar customizações via linguagem CSS para toda a listagem e o seu uso é livre.

Levar em consideração o tratamento em CSS para a responsividade da plataforma em outros device, Mobile, Computador Desktop, Tablet, etc.

CSS no Formulário Filho

O CSS feito para a página de Listagem Principal está colocado apenas no List Page do próprio formulário filho, dessa forma ele não será adicionado ao Formulário Pai, então para usar CSS nas tabelas que estão dentro de um formulário Pai, você deve entrar dentro da área de desenvolvimento do Formulário Pai abrir o arquivo CSS e ao invés de colocar no CSS da aba List Page, coloque o código na aba Form Page do formulário pai.

Customizar com Javascript

Todo código Javascript da página de Listagem Principal do Formulário, deve ficar no arquivo Javascript da List Page.

O agilityflow possui uma extensa biblioteca de funções prontas para customização em Javascript que você pode utilizar para diminuir o seu tempo de desenvolvimento.

Além disso nessa parte você está livre para criar funções e regras da forma que for mais conveniente.

O agilityflow disponibiliza uma biblioteca principal em Javascript para a tela de Listagem Princpal. Essa biblioteca está disponível no objeto "listContext" e abaixo estão descritos as propriedades e métodos pré-programados para facilitar na utilização:

Para utilizar qualquer método ou propriedade listadas abaixo, sempre utilizar antes a nomenclatura "listContext.". Exemplo: listContext.Metodo() ou listContext.Propriedade

Javascript - Bloquear e Desbloquear a abertura do lightbox do Formularío ao clicar na linha do grid

Exemplo de uso

$(document).on('click', '.btn-exemplo-botao', function (e) {

    //bloqueia a abertura da tela de visualização do formulário
    listcontext.blockLinkOpening();

    //aqui você pode colocar seu código
    //apresenta uma mensagem
    alert('Mensagem de Exemplo')
    
    //desbloqueia a abertura da tela de visualização do formulário
    listcontext.unlockLinkOpening(false);
})

Javascript - Idioma, Linguagem / Internationalization (i18n)

Javascript - Conversão e Formatação de Números

//Converte número formatado no idioma atual para um formato numérico javascript, limpo sempre com ponto como separador decimal

//se for ingles substitui virgula por nada e mantem o ponto como separador decimal
var z = listContext.number.convertString_toNumber("100,999.53");
console.log(z);
//result: 100999.53

//se for portugues substitui ponto por nada e virgula por ponto como separador decimal
var z = listContext.number.convertString_toNumber("100.999,53");
console.log(z);
//result: 100999.53

//formata o numero, dependendo do idioma
var z = listContext.number.convertNumber_toStringFormatted(100999.50);
console.log(z);
//result: 100,999.50 ou 100.999,50 dependendo do idioma

Javascript - Data

Javascript -Validação e Comparação entre Datas

Javascript - Manipular Datas 

Javascript - Outros

Javascript no Formulário Filho: Customizar com Javascript a tabela que está dentro de um Formulário Pai

O Javascript feito para a página de Listagem Principal está colocado apenas no List Page do próprio formulário filho, dessa forma ele não será adicionado ao Formulário Pai, então para usar Javascript nas tabelas que estão dentro de um formulário Pai, você deve entrar dentro da área de desenvolvimento do Formulário Pai abrir o arquivo Javascript e ao invés de colocar no Javascript da aba List Page,  coloque o código na aba Form Page do formulário pai.

Atenção: o objeto listContext não está presente no Formulário Pai, ver detalhes mais abaixo para o uso das funções semelhantes

As funções e biblioteca citadas acima não estão presentes da mesma forma no caso de tabelas/listagens filhas e que estarão dentro de um formulário Pai.

A mudança mais impactante é que o listContext não está presente, sendo assim você deve utilizar as funções Javascript descritas nesse link na documentação do formContext e formcontext.childform que são funçoes da tela de Formulário

Javascript - Bibliotecas de terceiros

Abaixo estão listadas as biblioteca javascript que já estão importadas na página do formulário:

Customizar as Colunas da Listagem

No Dev, no menu "Customizar Colunas (Cshtml)" você pode adicionar para cada coluna um arquivo de customização, o arquivo sempre deve ter o mesmo nome do ID do campo/coluna no formulário. 

O arquivo de customização sempre deve ter o mesmo nome do ID do campo/coluna no formulário

Para esse exemplo, considere um Formulário chamado  "Exemplo de Listagem Customizada" com o seguintes campos:

Foram adicionados campos NUMÉRICOS e de DATA para mostrar como você pode utilizar esse tipo de informação para fazer condicionais  com essas informações.

Agora entra na área de listagem e coloque os seguintes campos:

Repare que na listagem eu adicionei os campos de Log, "Data criação" e "Criado Por". Esses são campos gerados automaticamente pelo Agilityflow, e você também pode utilizar essas informações na customização das colunas.

Agora volte para a área de customização:

Agora precisamos criar os arquivos de customização para cada coluna.

Crie através do botão NOVO CSHTML um arquivo para cada coluna que incluímos na listagem. Para isso, utilize o id da coluna como o nome do arquivo. Suas configurações devem estar como na imagem abaixo:

Antes de mostrar cada exemplo, abaixo descrevemos alguns métodos e propriedades disponíveis no contexto de cada customização de coluna, para que você consiga entender o que podemos fazer.

Propriedade e Métodos C# disponíveis no contexto do CSHTML da Coluna

O agilityflow disponibiliza uma biblioteca C# de contexto para a customização das colunas. Essa biblioteca está disponível no objeto "ColumnContext" e abaixo estão descritos as propriedades e métodos pré-programados para facilitar na utilização:

Para utilizar qualquer método ou propriedade listadas abaixo, sempre utilizar antes a nomenclatura "ColumnContext.". Exemplo: ColumnContext.Metodo() ou ColumnContext.Propriedade

C# - Propriedades

C# - Recuperar (Get) valor das colunas

DICA: Nos métodos acima só estarão disponíveis informações dos campos que foram marcados para aparecer na listagem. Caso você precise usar uma informação mas não quer que ela se torne uma coluna da lista, adicione ela como disponível na listagem e marque ela como invisível. Veja mais detalhes aqui

C# - Customização visual da coluna ou linha

C# - Variáveis Globais no contexto da listagem

Você pode precisar guardar informações no contexto geral da listagem.

Imagine que você queira fazer uma soma geral ou guardar uma informação que você já tratou na primeira linha e que agora você precisa utiliza-la na última coluna, da última linha. Simples, basta utilizar o método SetGlobalVariable para colocar uma informação no contexto e depois busca-la com o método GetGlobalVariable para 

C# - Formatação Numérica

Se você está utilizando o método GetText(..) para buscar uma coluna numérica, esse metódo já retornará o número formatado e não será necessário nenhuma formatação adicional.

Se você está utilizando o método GetDecimal(..) ele não virá formatado pois ele retorna o tipo DECIMAL do C#, sendo assim, se você precisa do dado formatado você pode utilizar o GetText(..)

C# - Usuário logado

C# - Idioma, Linguagem / Internationalization (i18n)

C#  - Geral

Elementos Visuais para deixar a tabela mais bonita

Você pode utilizar qualquer elemento HTML para a customização da coluna.

Abaixo listamos alguns elementos pré-definidos no agilityflow para facilitar o seu desenvolvimento.

* Caso seja necessário criar um elemento visual de forma dinâmica ou dentro de um IF, usar a função Html.Raw(), como no exemplo abaixo:

<button type="button" class="btn-list">Botão</button>

<text-small>small</text-small>

<tag-red>red</tag-red> 

<tag-outline-red>red</tag-outline-red> 

<tag-yellow>yellow</tag-yellow> 

<tag-outline-yellow>yellow</tag-outline-yellow> 

<tag-blue>blue</tag-blue> 

<tag-outline-blue>blue</tag-outline-blue> 

<tag-green>green</tag-green> 

<tag-outline-green>green</tag-outline-green> 

<tag-gray>gray</tag-gray> 

<tag-outline-gray>gray</tag-outline-gray> 

<avatars><avatar>John Charles</avatar></avatars> 

<avatars><avatar>Luigi Charles</avatar><avatar>Brain Colleman</avatar></avatars> 

<star-rating max="4" show-value="false">3</star-rating> 

<star-rating max="6" show-value="true">3.5</star-rating> 

<star-rating color='red' max="7" show-value="false">6</star-rating> 

<star-rating color='blue' max="7" show-value="false">6</star-rating> 

<star-rating color='green' max="7" show-value="false">6</star-rating> 

<star-rating color='gray' max="7" show-value="false">6</star-rating> 

<ball-rating max="4" show-value="false">3</ball-rating> 

<ball-rating max="6" show-value="true">3.5</ball-rating> 

<ball-rating color='red' max="7" show-value="false">6</ball-rating> 

<ball-rating color='blue' max="7" show-value="false">6</ball-rating> 

<ball-rating color='green' max="7" show-value="false">6</ball-rating> 

<ball-rating color='gray' max="7" show-value="false">6</ball-rating> 

<br/>

<hr/>

Exemplos de customização

Agora que já sabemos os métodos que podemos utilizar para facilitar a customização, abaixo listamos alguns exemplos de como utiliza-los na prática.

Comparação por Data e Hora. Pintar a linha e coluna se a data e hora (DateTime) estiver atrasada

No arquivo de customização "data_e_hora", vamos criar uma regrinha:

 - Vamos buscar a data e hora já no tipo DateTime para podermos usar na condicional 
 - Se a data estiver atrasada, colocaremos a linha em vermelho
 - Se faltar até 5 dias a para chegar na data, colocaremos a célula da tabela em amarelo

@{    
    //buscar a data e hora já no tipo Datetime para podermos usar na condicional
    var dt_data_e_hora = ColumnContext.GetDateTime("data_e_hora");

    //se não for possível converter a data, ela sempre retornará null
    if(dt_data_e_hora != null){

        //se está atrasada, coloca em vermelho a linha
        if(dt_data_e_hora  < DateTime.Now){ 
            @ColumnContext.SetRowColor("red")


        //se em até 5 dias for ficar atrasado, coloca em amarelo a célula
        }else if(dt_data_e_hora  < DateTime.Now.AddDays(5)){ 
            @ColumnContext.SetCelColor("yellow")
        }
    }

    //e por fim mostramos a data e a hora na célula
}
    @dt_data_e_hora        

resultado:

Comparação Numérica e tipos Numéricos

No arquivo de customização "decimal_3casas", vamos criar uma regrinha:

 - Vamos mostrar na coluna o valor do campo "Decimal com 3 Casas", buscando ele no formato string e usando o método GetText
 - Vamos mostrar na coluna o valor do campo "Decimal com 3 Casas", buscando ele como tipo inteiro (ignorando as casas decimais) e usando o método GetInt
 - Vamos mostrar na coluna o valor do campo "Decimal com 3 Casas", buscando ele no tipo decimal e usando o método GetDecimal
 - Vamos fazer uma condicional para mostrar uma tag em verde escrito "é Maior que 10 mil" caso o valor do campo seja maior que 10.000,00
 - Vamos fazer uma condicional para mostrar uma tag em vermelho escrito "é Menor que 10 mil" caso o valor do campo seja menor que 10.000,00

@ColumnContext.GetText("decimal_3casas")
<br>
@ColumnContext.GetInt("decimal_3casas")
<br>
@ColumnContext.GetDecimal("decimal_3casas")
<br>
@{
    if(ColumnContext.GetDecimal("decimal_3casas") > 10000){
        <text>
            <tag-green>é MAIOR que 10 mil</tag-green>
        </text>
    }else{
        <text>
            <tag-red>é MENOR que 10 mil</tag-red>
        </text>
    }
}

resultado:

Coluna Invisível: Como acessar via GetText os dados de um campo do formulário que não está marcado para aparecer como coluna da lista?

Dica:
Apenas campos que estão marcados para serem colunas da lista podem ser acessados através do método ColumnContext.GetText(...),sendo assim se você quer acessar uma informação através do GetText mas não quer que essa informação seja uma coluna, deixe ela invisível para os usuários, seguindo o procedimento abaixo.

Seguindo nosso exemplo, na coluna NOME da listagem, eu quero concatenar o Nome e a Idade do usuário, porém como eu não coloquei a Idade para ser visível na lista, ela não estará acessível se eu não seguir esses passos:

mas não será uma coluna da Listagem.

Adicionar um botão na listagem

No arquivo de customização "email", vamos criar uma regrinha:

 - Vamos mostrar o valor do campo E-mail 
 - Vamos adicionar um botão que quando o usuário clicar apresentará a msg "Mensagem de Exemplo"
 - Para esse exemplo, vamos precisar fazer uso do arquivo padrão "Javascript" do List Page

No arquivo de customização de "email", cole o código abaixo

@ColumnContext.GetText("email") 
<br>
<button type="button" class="btn-list btn-exemplo-botao">Botão</button>

No arquivo Javascript da List Page, cole o código abaixo

$(document).on('click', '.btn-exemplo-botao', function (e) {

    //bloqueia a abertura da tela de visualização do formulário
    listcontext.blockLinkOpening();

    //aqui você pode colocar seu código
    //apresenta uma mensagem
    alert('Mensagem de Exemplo')
    

    //desbloqueia a abertura da tela de visualização do formulário
    listcontext.unlockLinkOpening(false);
})

Formulário Filho: No caso dessa tabela também estar dentro de um Formulário Pai, algumas coisas mudam:

O Javascript feito acima está colocado apenas no List Page da página de Listagem, dessa forma ele não será adicionado ao Formulário Pai, então você deve entrar dentro da área de desenvolvimento do Formulário Pai abrir o arquivo Javascript e ao invés de colocar o código no Javascript da aba List Page, coloque ocódigo abaixo na aba Form Page do formulário pai.

No caso de Formulário Filho dentro de um formulário Pai, não existirá no Javascript a biblioteca listContext pois essa biblioteca só está presenta na tela de lista. Nesse caso precisaremos usar o formContext mas como estamos falando de um Formulário Filho, as funções referente a ele está dentro de formContext.childForm.xxxx()

Código para o mesmo funcionamento do botão mas agora no formulário Pai.
Observe que no código abaixo, além da mudança de local do Javascript, o listContext. foi substituido por formContext.childForm

$(document).on('click', '.btn-exemplo-botao', function (e) {

    //bloqueia a abertura da tela de visualização do formulário
    formcontext.childForm.blockLinkOpening();

    //aqui você pode colocar seu código
    //apresenta uma mensagem
    alert('Mensagem de Exemplo')
    

    //desbloqueia a abertura da tela de visualização do formulário
    formcontext.childForm.unlockLinkOpening(false);
})

Resultado:

Quando o usuário, clicar no botão "Botão" ele receberá essa mensagem:

Como utilizar uma Variável de Contexto ou Variável Global para interagir e armazenar informações entre todas as linhas e colunas da mesma listagem

Para esse exemplo demonstraremos o uso dos métodos ColumnContext.GetGlobalVariable("variavel"); e ColumnContext.SetGlobalVariable("variavel", "valor");

No arquivo de customização "nome", vamos criar uma regrinha:

 - Vamos mostrar o valor do campo Nome, concatenado com a palavra "Nome:"
 - Vamos somar a idade da linha anterior com a linha atual, até a última linha ser a soma total das idades
 - Vamos mostrar uma frase mostrando a posição da linha (RowIndex) concatenada com a idade total somada até aquele  momento

@{
    //recupera o total já gravado em uma variavel global
    var str_idade_total = ColumnContext.GetGlobalVariable("idade");

    //pega a idade referente a essa linha na tabela
  	//já puxa a idade no formato INT (número inteiro) para ser possível 
  	//fazer a soma total sem precisar de conversão de número
    var idade = @ColumnContext.GetInt("idade");

    //se a idade não tiver sido preenchida no formulário, então considera ela como zero
    if(idade == null)
    {
        idade = 0;
    }

    //se a idade total já estiver sido preenchida, então, soma com a idade dessa linha
    //caso contrário ignora pois será o primeiro registro da linha e não precisará ser feito nenhuma soma
    if(!string.IsNullOrEmpty(str_idade_total)){    
        idade = Convert.ToInt32(str_idade_total) + idade;        
    }

    //coloca novamente a soma das idades totais na Variável Global, para ser recuparada na próxima linha
    str_idade_total = idade.ToString();
    ColumnContext.SetGlobalVariable("idade", str_idade_total);
    
}
Nome: @ColumnContext.GetText("nome")
<br>
Até o RowIndex @ColumnContext.RowIndex a Idade era de  @str_idade_total anos

Customizar e acessar as colunas de Log: Data de criação, Data de Alteração, Criado por e Alterado por.

Para recuperar os campos de Log na listagem através do GetText(...) ou GetDateTime(...) utilizar os ids padrões de cada campo:

Relatório / Dashboard - customizar colunas da tabale de dados com Html, C#, CSS e Javascript

O agilityflow permite customização através da Linguagem Html, CSS, Javascript e C# (csharp).

O html do agilityflow é baseado no Razor do framework .Net, isso é, você pode além de customizar com HTML, utilizar código C# (razor) para dar mais flexibilidade e poder ao seu componente Html.

Customizar a Tabela de dados (Datatable)

Você pode utilizar tabela de dados nos Reports e/ou nos Dasboards.

Estando na editção e customização de uma Tabela de dados, na barra de botões, clique na opção Customizar via Código, como na imagem abaixo:

Nessa área você poderá customizar o Javascript, CSS e o CSHTML (Razor C# + Html):

Nessa área podemos customizar toda a tabela de dados, como no exemplo abaixo.

Voltando a área de desenvolvimento, no menu de customização, teremos sempre 2 arquivos padrões: CSS e Javascript.

O CSS é sempre colocado no topo da página, dentro da tag <HEAD> do Html

O Javascript é sempre colocado no final da página, antes do fechamento do </Body>

Customizar com CSS

Todo código CSS da tabela de dados deve ser colocado na aba Style (CSS)

Nessa área, você pode criar customizações via linguagem CSS para toda a listagem e o seu uso é livre.

Levar em consideração o tratamento em CSS para a responsividade da plataforma em outros device, Mobile, Computador Desktop, Tablet, etc.

Customizar com Javascript

Todo código Javascript da datatable, deve ficar no arquivo Javascript.

Customizar com Html e/ou C#

rie através do botão NOVO CSHTML um arquivo para cada coluna que incluímos na tabela de dados. Para isso, utilize o id da coluna como o nome do arquivo. Suas configurações devem estar como na imagem abaixo:

Antes de mostrar cada exemplo, abaixo descrevemos alguns métodos e propriedades disponíveis no contexto de cada customização de coluna, para que você consiga entender o que podemos fazer.

Propriedade e Métodos C# disponíveis no contexto do CSHTML da Coluna

O agilityflow disponibiliza uma biblioteca C# de contexto para a customização das colunas. Essa biblioteca está disponível no objeto "ColumnContext" e abaixo estão descritos as propriedades e métodos pré-programados para facilitar na utilização:

Para utilizar qualquer método ou propriedade listadas abaixo, sempre utilizar antes a nomenclatura "ColumnContext.". Exemplo: ColumnContext.Metodo() ou ColumnContext.Propriedade

C# - Propriedades

C# - Recuperar (Get) valor das colunas

C# - Customização visual da coluna ou linha

C# - Variáveis de contexto da tabela de dados

Você pode precisar guardar informações no contexto geral da listagem.

Imagine que você queira fazer uma soma geral ou guardar uma informação que você já tratou na primeira linha e que agora você precisa utiliza-la na última coluna, da última linha. Simples, basta utilizar o método SetGlobalVariable para colocar uma informação no contexto e depois busca-la com o método GetGlobalVariable para 

C# - Formatação Numérica

C# - Usuário logado

C# - Idioma, Linguagem / Internationalization (i18n)

C#  - Geral

Elementos Visuais para deixar a tabela mais bonita

Você pode utilizar qualquer elemento HTML para a customização da coluna.

Abaixo listamos alguns elementos pré-definidos no agilityflow para facilitar o seu desenvolvimento.

* Caso seja necessário criar um elemento visual de forma dinâmica ou dentro de um IF, usar a função Html.Raw(), como no exemplo abaixo:

<button type="button" class="btn-list">Botão</button>

<text-small>small</text-small>

<tag-red>red</tag-red> 

<tag-outline-red>red</tag-outline-red> 

<tag-yellow>yellow</tag-yellow> 

<tag-outline-yellow>yellow</tag-outline-yellow> 

<tag-blue>blue</tag-blue> 

<tag-outline-blue>blue</tag-outline-blue> 

<tag-green>green</tag-green> 

<tag-outline-green>green</tag-outline-green> 

<tag-gray>gray</tag-gray> 

<tag-outline-gray>gray</tag-outline-gray> 

<avatars><avatar>John Charles</avatar></avatars> 

<avatars><avatar>Luigi Charles</avatar><avatar>Brain Colleman</avatar></avatars> 

<star-rating max="4" show-value="false">3</star-rating> 

<star-rating max="6" show-value="true">3.5</star-rating> 

<star-rating color='red' max="7" show-value="false">6</star-rating> 

<star-rating color='blue' max="7" show-value="false">6</star-rating> 

<star-rating color='green' max="7" show-value="false">6</star-rating> 

<star-rating color='gray' max="7" show-value="false">6</star-rating> 

<ball-rating max="4" show-value="false">3</ball-rating> 

<ball-rating max="6" show-value="true">3.5</ball-rating> 

<ball-rating color='red' max="7" show-value="false">6</ball-rating> 

<ball-rating color='blue' max="7" show-value="false">6</ball-rating> 

<ball-rating color='green' max="7" show-value="false">6</ball-rating> 

<ball-rating color='gray' max="7" show-value="false">6</ball-rating> 

<br/>

<hr/>

Exemplos de customização

Agora que já sabemos os métodos que podemos utilizar para facilitar a customização, abaixo listamos alguns exemplos de como utiliza-los na prática.

Comparação por Data e Hora. Pintar a linha e coluna se a data e hora (DateTime) estiver atrasada

No arquivo de customização "data_e_hora", vamos criar uma regrinha:

 - Vamos buscar a data e hora já no tipo DateTime para podermos usar na condicional 
 - Se a data estiver atrasada, colocaremos a linha em vermelho
 - Se faltar até 5 dias a para chegar na data, colocaremos a célula da tabela em amarelo

@{    
    //buscar a data e hora já no tipo Datetime para podermos usar na condicional
    var dt_data_e_hora = ColumnContext.GetDateTime("data_e_hora");

    //se não for possível converter a data, ela sempre retornará null
    if(dt_data_e_hora != null){

        //se está atrasada, coloca em vermelho a linha
        if(dt_data_e_hora  < DateTime.Now){ 
            @ColumnContext.SetRowColor("red")


        //se em até 5 dias for ficar atrasado, coloca em amarelo a célula
        }else if(dt_data_e_hora  < DateTime.Now.AddDays(5)){ 
            @ColumnContext.SetCelColor("yellow")
        }
    }

    //e por fim mostramos a data e a hora na célula
}
    @dt_data_e_hora        

resultado:

Comparação Numérica e tipos Numéricos

No arquivo de customização "decimal_3casas", vamos criar uma regrinha:

 - Vamos mostrar na coluna o valor do campo "Decimal com 3 Casas", buscando ele no formato string e usando o método GetText
 - Vamos mostrar na coluna o valor do campo "Decimal com 3 Casas", buscando ele como tipo inteiro (ignorando as casas decimais) e usando o método GetInt
 - Vamos mostrar na coluna o valor do campo "Decimal com 3 Casas", buscando ele no tipo decimal e usando o método GetDecimal
 - Vamos fazer uma condicional para mostrar uma tag em verde escrito "é Maior que 10 mil" caso o valor do campo seja maior que 10.000,00
 - Vamos fazer uma condicional para mostrar uma tag em vermelho escrito "é Menor que 10 mil" caso o valor do campo seja menor que 10.000,00

@ColumnContext.GetText("decimal_3casas")
<br>
@ColumnContext.GetInt("decimal_3casas")
<br>
@ColumnContext.GetDecimal("decimal_3casas")
<br>
@{
    if(ColumnContext.GetDecimal("decimal_3casas") > 10000){
        <text>
            <tag-green>é MAIOR que 10 mil</tag-green>
        </text>
    }else{
        <text>
            <tag-red>é MENOR que 10 mil</tag-red>
        </text>
    }
}

resultado:

Adicionar um botão na tabela de dados

No arquivo de customização "email", vamos criar uma regrinha:

 - Vamos mostrar o valor do campo E-mail 
 - Vamos adicionar um botão que quando o usuário clicar apresentará a msg "Mensagem de Exemplo"
 - Para esse exemplo, vamos precisar fazer uso do arquivo padrão "Javascript" do List Page

No arquivo de customização de "email", cole o código abaixo

@ColumnContext.GetText("email") 
<br>
<button type="button" class="btn-list btn-exemplo-botao">Botão</button>

No arquivo Javascript da List Page, cole o código abaixo

$(document).on('click', '.btn-exemplo-botao', function (e) {

    //aqui você pode colocar seu código
    //apresenta uma mensagem
    alert('Mensagem de Exemplo')
    

})

Quando o usuário, clicar no botão "Botão" ele receberá essa mensagem:

Como utilizar uma Variável de Contexto ou Variável Global para interagir e armazenar informações entre todas as linhas e colunas da mesma listagem

Para esse exemplo demonstraremos o uso dos métodos ColumnContext.GetGlobalVariable("variavel"); e ColumnContext.SetGlobalVariable("variavel", "valor");

No arquivo de customização "nome", vamos criar uma regrinha:

 - Vamos mostrar o valor do campo Nome, concatenado com a palavra "Nome:"
 - Vamos somar a idade da linha anterior com a linha atual, até a última linha ser a soma total das idades
 - Vamos mostrar uma frase mostrando a posição da linha (RowIndex) concatenada com a idade total somada até aquele  momento

@{
    //recupera o total já gravado em uma variavel global
    var str_idade_total = ColumnContext.GetGlobalVariable("idade");

    //pega a idade referente a essa linha na tabela
  	//já puxa a idade no formato INT (número inteiro) para ser possível 
  	//fazer a soma total sem precisar de conversão de número
    var idade = @ColumnContext.GetInt("idade");

    //se a idade não tiver sido preenchida no formulário, então considera ela como zero
    if(idade == null)
    {
        idade = 0;
    }

    //se a idade total já estiver sido preenchida, então, soma com a idade dessa linha
    //caso contrário ignora pois será o primeiro registro da linha e não precisará ser feito nenhuma soma
    if(!string.IsNullOrEmpty(str_idade_total)){    
        idade = Convert.ToInt32(str_idade_total) + idade;        
    }

    //coloca novamente a soma das idades totais na Variável Global, para ser recuparada na próxima linha
    str_idade_total = idade.ToString();
    ColumnContext.SetGlobalVariable("idade", str_idade_total);
    
}
Nome: @ColumnContext.GetText("nome")
<br>
Até o RowIndex @ColumnContext.RowIndex a Idade era de  @str_idade_total anos

Customizar e acessar as colunas de Log: Data de criação, Data de Alteração, Criado por e Alterado por.

Para recuperar os campos de Log na listagem através do GetText(...) ou GetDateTime(...) utilizar os ids padrões de cada campo: