Criar uma lista em tabela no Chronoforms8

Para listar os dados e ter um paginador, precisamos fornecer à visualização Tabela a lista de registros junto com a contagem de registros em nossa tabela, então no total precisamos de 3 itens em nossa página:

1. Ação Ler Dados para ler os registros da tabela e contá-los
2. A visualização Tabela é para exibir os registros em uma lista.

Vamos ver como o Ler Dados está configurado:

1. Primeiro, precisamos escolher a tabela do banco de dados para ler os registros.
2. Depois, precisamos definir o Tipo de Leitura como "todos os registros correspondentes com contagem" para obter uma lista de registros e também a contagem total.
3. Em seguida, precisamos garantir que nossa lista de registros seja paginável, classificável e tenha um limite, digamos 10 registros por página.
4. A configuração de classificação é opcional, mas eu a configurei para classificar pela coluna de título na tabela selecionada:

Então, nossa visualização Tabela precisa ser configurada para obter a lista de registros e a contagem de registros de ambas as ações Ler Dados e exibir uma lista de registros mostrando pelo menos 1 coluna:

1. Na Fonte de Dados, vamos inserir o nome da ação Ler Dados, que é "read_data5", isso instruirá a tabela a ler a lista de registros e a contagem de registros e outras configurações da ação Ler Dados.
2. Precisamos adicionar pelo menos uma coluna na tabela, escolhemos a coluna de título aqui, esta coluna sempre tem um valor na tabela de banco de dados que escolhemos

Salve o formulário e agora você deve ter uma lista de todos os registros em sua tabela, se os registros forem mais de 10, então você também terá um paginador para navegar pela lista de registros.

Criando um Link para uma Página de Edição em sua Tabela

1- Após salvar o formulário, a visualização da tabela terá uma nova área chamada "title", vamos adicionar uma visualização de Nó de Texto lá para vincular a uma página diferente para editar o registro:

2- Para cada linha, há uma variável chamada "row" que tem um array de todos os nomes e valores das colunas, então para obter o valor da coluna "title" podemos usar {var:row.title}

3- Precisamos que o Nó de Texto vincule a uma página diferente e, portanto, vamos habilitar o comportamento "URL do Link" e definir a URL Base do Link para {url:} para obter a URL da página atual

4- nos Parâmetros da URL, precisamos definir o nome da página do link usando "chronopage=edit" e o id da linha usando "id={var:row.id}", agora o link deve ficar assim: url-da-página-atual&chronopage=edit&id=id-da-linha

Nossa coluna de título agora deve exibir um valor de título vinculado:

Agora podemos adicionar uma nova página ao nosso formulário usando o botão "Nova Página" na parte inferior do designer:

Na área de Opções da nossa nova página:

1- precisamos definir o alias da página como "edit" para corresponder ao link que criamos

2- também precisamos dar à nossa nova página um nome diferente de Grupo de Páginas para ser acessível usando links diretos:

Então, na área "Carregar" da nossa nova página de edição, precisaremos de uma ação Ler Dados para ler o registro do valor de id passado:

1- Escolhemos a mesma tabela de antes

2- Configuramos o Ler Dados para ler um único registro

3- Habilitamos o comportamento "Declaração Where"

4- Definimos a Declaração Where para obter a linha onde a coluna "id" corresponde ao valor do parâmetro de dados chamado "id"

Nossa nova ação Ler Dados é chamada "read_data18", se precisarmos testar os valores carregados, podemos adicionar uma visualização HTML e tentar exibir o valor da coluna "title":

Isso deve funcionar conforme o esperado, mas no nosso caso, precisamos de uma página de Edição, então precisamos ter alguns campos de formulário para editar o registro, vamos adicionar um único campo de texto para o título do registro como exemplo:

1- Devemos habilitar o comportamento "Mesclar Dados" para carregar os campos com os dados do registro

2- adicionamos nosso campo, 3- nomeamos como "title" para corresponder ao nome da coluna da tabela

4- Adicionamos um botão para enviar a página "edit"

Clicar no link em nossa tabela agora deve exibir o formulário de edição:

Salvando alterações no registro

Para salvar as alterações feitas na página de edição, precisamos adicionar uma ação Salvar Dados à área "enviar" da página de edição:

1- Mude para a área "enviar" da página de edição

2- Adicione uma ação Salvar Dados

3- Defina o nome da tabela para a mesma tabela usada em sua aplicação

Então precisamos configurar o Salvar Dados para atualizar o registro aberto usando uma Declaração Where:

1- Habilite o comportamento Declaração Where

2- Habilite o comportamento "Modificar Fonte de Dados"

3- defina o valor Where como id={data:id} o que significa que vamos atualizar registros onde a coluna id corresponde ao valor do parâmetro id na url

4- Em Modificar Fonte de Dados, defina os Dados da seguinte forma:

Estamos definindo nossa fonte de dados para ser um array da coluna title igual ao valor do campo "title" em nosso formulário de edição

Finalmente, precisamos redirecionar de volta para a página de listagem após o salvamento:

1- Adicione uma ação Redirecionar abaixo da ação Salvar Dados

2- defina a URL base para {url:} para obter a url atual

3- Habilite o comportamento "Parâmetros de Redirecionamento" e

4- Defina o parâmetro chronopage para "page1" que é o alias padrão da primeira página do formulário onde temos nossa tabela

Salve o formulário e seu formulário agora deve salvar as atualizações do título e redirecionar de volta para a lista