Créer une liste de tableaux dans Chronoforms8

Pour lister les données et avoir un paginateur, nous devons fournir à la vue Tableau la liste des enregistrements ainsi que le nombre total d'enregistrements dans notre table. Nous avons donc besoin de 3 éléments dans notre page :

1. Une action Lire les données pour lire les enregistrements de la table et les compter.
2. Une vue Tableau pour afficher les enregistrements dans une liste.

Voyons comment l'action Lire les données est configurée :

1. Nous devons d'abord choisir la table de base de données à partir de laquelle lire les enregistrements.
2. Ensuite, nous devons définir le Type de lecture sur "tous les enregistrements correspondants avec comptage" pour obtenir une liste d'enregistrements et le nombre total.
3. Nous devons ensuite nous assurer que notre liste d'enregistrements est paginable, triable et a une limite, par exemple 10 enregistrements par page.
4. Le paramètre de tri est facultatif, mais je l'ai configuré pour trier par la colonne "title" dans la table sélectionnée :

Ensuite, notre vue Tableau doit être configurée pour obtenir la liste des enregistrements et le nombre d'enregistrements des deux actions Lire les données et afficher une liste d'enregistrements montrant au moins une colonne :

1. Dans la Source de données, nous entrerons le nom de l'action Lire les données, qui est "read_data5". Cela indiquera au tableau de lire la liste des enregistrements, le nombre d'enregistrements et d'autres paramètres à partir de l'action Lire les données.
2. Nous devons ajouter au moins une colonne au tableau, nous choisissons ici la colonne "title". Cette colonne a toujours une valeur dans la table de base de données que nous avons choisie.

Enregistrez le formulaire et vous devriez maintenant avoir une liste de tous les enregistrements de votre table. Si les enregistrements sont plus de 10, vous aurez également un paginateur pour naviguer dans la liste des enregistrements.

Créer un lien vers une page d'édition dans votre tableau

1- Après avoir enregistré le formulaire, la vue Tableau aura une nouvelle zone nommée "title". Nous y ajouterons une vue Nœud de texte pour créer un lien vers une page différente afin de modifier l'enregistrement :

2- Pour chaque ligne, il y a une variable nommée "row" qui contient un tableau de tous les noms et valeurs des colonnes. Donc, pour obtenir la valeur de la colonne "title", nous pouvons utiliser {var:row.title}.

3- Nous avons besoin que le Nœud de texte crée un lien vers une page différente, nous activerons donc le comportement "URL du lien" et définirons l'URL de base du lien sur {url:} pour obtenir l'URL de la page actuelle.

4- Dans les Paramètres de l'URL, nous devons définir le nom de la page du lien en utilisant "chronopage=edit" et l'identifiant de la ligne en utilisant "id={var:row.id}". Maintenant, le lien devrait ressembler à ceci : url-de-la-page-actuelle&chronopage=edit&id=id-de-la-ligne.

Notre colonne "title" devrait maintenant afficher une valeur de titre liée :

Nous pouvons maintenant ajouter une nouvelle page à notre formulaire en utilisant le bouton "Nouvelle page" en bas du concepteur :

Dans la zone Options de notre nouvelle page :

1- Nous devons définir l'alias de la page sur "edit" pour correspondre au lien que nous avons créé.

2- Nous devons également donner à notre nouvelle page un nom de Groupe de pages différent pour qu'elle soit accessible via des liens directs :

Ensuite, dans la zone "Chargement" de notre nouvelle page d'édition, nous aurons besoin d'une action Lire les données pour lire l'enregistrement correspondant à la valeur d'identifiant passée :

1- Nous choisissons la même table qu'auparavant.

2- Nous définissons l'action Lire les données pour lire un seul enregistrement.

3- Nous activons le comportement "Instruction Where".

4- Nous définissons l'instruction Where pour obtenir la ligne où la colonne "id" correspond à la valeur du paramètre de données nommé "id".

Notre nouvelle action Lire les données s'appelle "read_data18". Si nous devons tester les valeurs chargées, nous pouvons ajouter une vue HTML et essayer d'afficher la valeur de la colonne "title" :

Cela devrait fonctionner comme prévu, mais dans notre cas, nous avons besoin d'une page d'édition. Nous devons donc avoir quelques champs de formulaire pour modifier l'enregistrement. Nous ajouterons un seul champ texte pour le titre de l'enregistrement à titre d'exemple :

1- Nous devons activer le comportement "Fusion des données" pour charger les champs avec les données de l'enregistrement.

2- Nous ajoutons notre champ, 3- nous le nommons "title" pour correspondre au nom de la colonne de la table.

4- Nous ajoutons un bouton pour soumettre la page "edit".

Cliquer sur le lien dans notre tableau devrait maintenant afficher le formulaire d'édition :

Enregistrer les modifications apportées à l'enregistrement

Pour enregistrer les modifications apportées dans la page d'édition, nous devons ajouter une action Enregistrer les données à la zone "soumettre" de la page d'édition :

1- Passez à la zone "soumettre" de la page d'édition.

2- Ajoutez une action Enregistrer les données.

3- Définissez le nom de la table sur la même table utilisée dans votre application.

Nous devons ensuite configurer l'action Enregistrer les données pour mettre à jour l'enregistrement ouvert en utilisant une instruction Where :

1- Activez le comportement Instruction Where.

2- Activez le comportement "Modifier la source de données".

3- Définissez la valeur Where sur id={data:id}, ce qui signifie que nous allons mettre à jour les enregistrements où la colonne "id" correspond à la valeur du paramètre "id" dans l'URL.

4- Dans Modifier la source de données, définissez les Données comme suit :

Nous définissons notre source de données comme un tableau où la colonne "title" est égale à la valeur du champ "title" dans notre formulaire d'édition.

Enfin, nous devons rediriger vers la page de liste après l'enregistrement :

1- Ajoutez une action Redirection sous l'action Enregistrer les données.

2- Définissez l'URL de base sur {url:} pour obtenir l'URL actuelle.

3- Activez le comportement "Paramètres de redirection" et

4- Définissez le paramètre chronopage sur "page1", qui est l'alias par défaut de la première page du formulaire où se trouve notre tableau.

Enregistrez le formulaire et votre formulaire devrait maintenant enregistrer les mises à jour du titre et rediriger vers la liste.