La création de tout site ou application web est presque impensable sans la navigation. Les utilisateurs doivent naviguer entre les pages, ouvrir différentes sections du site et recevoir diverses informations.
Données de la page
Mais avant d'examiner la navigation proprement dite, il convient de comprendre quelles informations vous pouvez obtenir sur une page en général et en quoi peut consister une URL. Pour ce faire, vous pouvez utiliser le bloc Get Current Page et voir quelles données il produit.
- URL - l'adresse de la page sous sa forme habituelle. Par exemple : https://vdjyien-app.apms.io/admin/someurl/
- Page - l'identifiant interne de la page, qui est utilisé dans les processus commerciaux de AppMaster. Il se compose de 22 caractères, un ensemble aléatoire de lettres et de chiffres.
- Title - le titre de la page. Son nom sous une forme lisible par l'homme.
- URL Params. Une page peut être créée de manière à ce que son adresse ne soit pas strictement fixe mais comprenne également des valeurs variables. Par exemple, une page peut afficher une liste d'articles dans une section spécifique, et l'identifiant de cette section est juste indiqué dans l'URL comme un paramètre.
- Query Params. Les paramètres de requête supplémentaires sont écrits à la fin de l'URL après le signe " ?". Par exemple, pour une page contenant une liste d'articles, les paramètres "?_limit=12&lang=fr" peuvent indiquer que seuls 12 articles en anglais sont requis.
Par exemple, imaginez une page qui affiche une liste d'articles de blog. Son URL est donnée comme suit : "/blog/:theme/:author". Le symbole " :" indique que la valeur spécifiée après lui est un paramètre. En tant que paramètres, elle prend les identifiants du sujet de l'article (thème) et de son auteur (auteur).
Pour naviguer vers cette page, vous devez utiliser le bloc Navigate dans le processus métier.
Les paramètres correspondent à ceux qui ont été analysés précédemment dans le bloc Get Current Page bloc. Dans ce cas, le titre réel de la page n'a pas d'importance pour la navigation puisque la page elle-même est spécifiée comme un identifiant interne (vous pouvez la sélectionner dans la liste des pages).
Si la page ne comporte aucun paramètre, la navigation peut être extrêmement simple : il suffit de sélectionner la page souhaitée dans la liste proposée. Mais dans cet exemple, il y a des paramètres qui doivent être passés au bloc Navigate .
Création d'une page source pour la navigation
Nous allons examiner l'utilisation des paramètres sur un exemple précis. Pour ce faire, nous allons créer une page séparée à partir de laquelle nous devrons nous rendre à la page cible à l'avenir. Ajoutons deux Select à cette page (un pour la sélection dans la liste des sujets, le second pour la liste des auteurs) et remplissons-les avec des valeurs de test.
Après cela, vous devez mettre en place un flux de travail pour le bouton Navigate en cliquant sur lequel la navigation vers la page de destination doit fonctionner. Ce processus commence par l'obtention des valeurs sélectionnées dans les blocs Select blocs.
L'étape suivante consiste à remplir les Key-Value modèles virtuels. Leur tableau est utilisé pour passer les paramètres nécessaires au bloc Navigate bloc. Le modèle lui-même se compose d'une clé (Key), qui est le nom du paramètre (dans cet exemple, le thème et l'auteur), ainsi que de sa valeur (Valuele nom direct du thème sélectionné, ou le nom de l'auteur).
Veuillez noter que de nombreux caractères ne peuvent pas être utilisés dans l'URL, notamment le caractère espace. Ainsi, un nom écrit comme "Frank Paulsen" dans l'URL sera automatiquement converti en "Frank%20Paulsen". URL Encode et URL Decode peuvent être utilisés pour coder et décoder les normes URL. Dans cet exemple, pour une plus grande clarté et beauté de l'URL, nous utilisons le bloc Replace string et remplaçons indépendamment l'espace par le signe "-", présentant le nom comme "Frank-Paulsen".
L'étape finale consiste à fusionner les paires clé-valeur générées en un seul tableau à transmettre comme paramètre au bloc Navigate bloc.
Désormais, lorsque vous cliquez sur le bouton, vous accédez à la page https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/.
Vous pouvez vérifier que son URL se compose à la fois d'une partie constante (https://vdjyien-app.apms.io/admin/blog/) et d'une variable (No-code/Frank-Paulsen/) qui a été formée à partir des valeurs sélectionnées sur la page précédente.
Utilisation des paramètres d'URL pour gérer le contenu
La tâche suivante consiste à utiliser les paramètres URL reçus pour modifier le contenu de la page. Ces paramètres peuvent être utilisés, par exemple, pour former une requête à la base de données. GET à la base de données, mais dans notre exemple, nous allons simplement afficher leur valeur sur la page. Pour ce faire, ajoutons deux conteneurs à la page avec les Label correspondants.
Mettons en place un processus métier basé sur le déclencheur onShow dans l'un des conteneurs Label. Sa tâche consistera à analyser l'URL, à récupérer ses paramètres et à l'afficher sur la page. Pour ce faire, nous utilisons le bloc Get Current Page et récupérons la valeur de chaque paramètre dans une boucle.
Ensuite, grâce au bloc Switch nous obtenons la valeur du paramètre et l'affichons dans la page correspondante. Label. En même temps, pour le paramètre Author, nous remplaçons inversement le "-" par un espace.
Désormais, lors de la navigation vers une page donnée, ce n'est pas seulement son adresse statique qui sera utilisée, mais aussi les paramètres de l'URL qui affectent l'affichage réel du contenu de la page.
Utilisation des paramètres de requête
De la même manière, vous pouvez ajouter des paramètres de requête (Query Params). Leur principale différence avec les paramètres d'URL est qu'ils sont facultatifs. Dans cet exemple, l'URL comprend nécessairement une indication des informations à afficher sur la page (quelle section thématique et quel auteur), et les paramètres supplémentaires apportent les précisions nécessaires. Par exemple, vous pouvez utiliser les paramètres limit et offset pour organiser la pagination et définir exactement le nombre d'enregistrements à interroger dans la base de données et à partir de quel enregistrement commencer l'édition.
Ajoutons deux nouveaux champs à la page de départ - . Input (Integer). Nous y inscrirons les paramètres limit et offset.
Effectuons les ajouts nécessaires au processus métier du bouton de navigation. Formons un tableau de Query Params avec les valeurs limit et offset.
La dernière étape consiste à ajouter des éléments avec des informations provenant des paramètres de requête, ainsi qu'à compléter le processus de gestion de la page cible.
Le résultat devrait être une URL comme celle-ci :
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
L'application met en œuvre la navigation avec des paramètres d'URL et des paramètres de requête et détermine dynamiquement le contenu de la page cible en fonction de ces paramètres.
