Een tabeloverzicht maken in Chronoforms8

Om de gegevens te tonen en een paginering te hebben, moeten we de Table-view voorzien van de recordslijst samen met het aantal records in onze tabel, dus in totaal hebben we 3 items nodig op onze pagina:

1. Read Data-actie voor het lezen van de tabelgegevens en het tellen ervan
2. Table-view is voor het weergeven van de gegevens in een lijst.

Laten we kijken hoe de Read Data is geconfigureerd:

1. Eerst moeten we de databasetabel kiezen om de gegevens uit te lezen.
2. Dan moeten we het Read Type instellen op "all matching records with count" om zowel een recordslijst als het totale aantal te krijgen.
3. Vervolgens moeten we ervoor zorgen dat onze recordslijst pagina-gewijs kan worden doorlopen, gesorteerd en een limiet heeft, bijvoorbeeld 10 records per pagina.
4. De sorteerinstelling is optioneel, maar ik heb deze geconfigureerd om te sorteren op de titelkolom in de geselecteerde tabel:

Vervolgens moet onze Table-view worden geconfigureerd om de recordslijst en het aantal records van beide Read Data-acties op te halen en een lijst van records weer te geven met ten minste 1 kolom:

1. In de Data Source zullen we de naam van de Read Data-actie invoeren, namelijk "read_data5", dit instrueert de tabel om de recordslijst & het aantal records en andere instellingen uit de Read Data-actie te lezen.
2. We moeten ten minste één tabelkolom toevoegen, we kiezen hier de titelkolom, deze kolom heeft altijd een waarde in de gekozen databasetabel

Sla het formulier op en nu zou je een lijst moeten hebben van alle records in je tabel, als er meer dan 10 records zijn, dan heb je ook een paginering om door de recordslijst te navigeren.

Een link maken naar een bewerkpagina in je tabel

1- Na het opslaan van het formulier heeft de table-view een nieuw gebied genaamd "title", we zullen daar een Text Node-view toevoegen om te linken naar een andere pagina voor het bewerken van het record:

2- Voor elke rij is er een variabele genaamd "row" die een array bevat van alle kolomnamen & waarden, dus om de waarde van de "title"-kolom te krijgen kunnen we {var:row.title} gebruiken

3- We willen dat de Text node linkt naar een andere pagina, dus we zullen het "Link URL"-gedrag inschakelen en de Base Link URL instellen op {url:} om de URL van de huidige pagina te krijgen

4- in de URL Parameters moeten we de paginanaam van de link instellen met "chronopage=edit" en de id van de rij met "id={var:row.id}", nu zou de link er zo uit moeten zien: huidige-pagina-url&chronopage=edit&id=rij-id

Onze titelkolom zou nu een gelinkte titelwaarde moeten weergeven:

We kunnen nu een nieuwe pagina toevoegen aan ons formulier met de knop "New Page" onderaan de ontwerper:

In het Options-gebied van onze nieuwe pagina:

1- moeten we de pagina-alias instellen op "edit" om overeen te komen met de link die we hebben gemaakt

2- we moeten onze nieuwe pagina ook een andere Page Group-naam geven om toegankelijk te zijn via directe links:

Vervolgens hebben we in het "Load"-gebied van onze nieuwe bewerkpagina een Read Data-actie nodig om het record van de doorgegeven id-waarde te lezen:

1- We kiezen dezelfde tabel als voorheen

2- We stellen de Read Data in om een enkel record te lezen

3- We schakelen het "Where statement"-gedrag in

4- We stellen het Where statement in om de rij te krijgen waar de "id"-kolom overeenkomt met de waarde van de dataparameter genaamd "id"

Onze nieuwe Read Data-actie heet "read_data18", als we de geladen waarden willen testen kunnen we een HTML-view toevoegen en proberen de waarde van de "title"-kolom weer te geven:

Dat zou naar verwachting moeten werken, maar in ons geval hebben we een bewerkpagina nodig, dus we moeten een paar formuliervelden hebben om het record te bewerken, we zullen een enkel tekstveld toevoegen voor de titel van het record als voorbeeld:

1- We moeten het "Data Merge"-gedrag inschakelen om de velden te vullen met de gegevens van het record

2- we voegen ons veld toe, 3- noemen het "title" om overeen te komen met de naam van de tabelkolom

4- We voegen een knop toe om de "edit"-pagina te verzenden

Klikken op de link in onze tabel zou nu het bewerkformulier moeten tonen:

Wijzigingen opslaan in het record

Om wijzigingen op de bewerkpagina op te slaan, moeten we een Save Data-actie toevoegen aan het "submit"-gebied van de bewerkpagina:

1- Schakel over naar het "submit"-gebied van de bewerkpagina

2- Voeg een Save Data-actie toe

3- Stel de tabelnaam in op dezelfde tabel die in je applicatie wordt gebruikt

Vervolgens moeten we de Save Data configureren om het openstaande record bij te werken met een Where statement:

1- Schakel het Where Statement-gedrag in

2- Schakel het "Modify Data Source"-gedrag in

3- stel de Where-waarde in op id={data:id} wat betekent dat we records gaan bijwerken waar de id-kolom overeenkomt met de waarde van de id-parameter in de url

4- Stel in Modify Data Source de Data als volgt in:

We stellen onze gegevensbron in als een array waarbij de titelkolom gelijk is aan de waarde van het "title"-veld in ons bewerkformulier

Ten slotte moeten we terugsturen naar de overzichtspagina na het opslaan:

1- Voeg een Redirect-actie toe onder de Save Data-actie

2- stel de basis-URL in op {url:} om de huidige url te krijgen

3- Schakel het "Redirect Parameters"-gedrag in en

4- Stel de chronopage-parameter in op "page1", wat de standaard alias is van de eerste formulierpagina waar we onze tabel hebben

Sla het formulier op en je formulier zou nu de titelwijzigingen moeten opslaan en terugsturen naar de lijst