Het maken van een website of webapplicatie is bijna ondenkbaar zonder navigatie. Gebruikers moeten tussen pagina's navigeren, verschillende secties van de site openen en verschillende informatie ontvangen.
Paginagegevens
Maar voordat we naar de navigatie zelf kijken, is het de moeite waard om te begrijpen welke informatie je over een pagina in het algemeen kunt krijgen en waaruit een URL kan bestaan. Hiervoor kun je het Get Current Page en kijken welke gegevens dat oplevert.
- URL - het adres van de pagina in zijn gebruikelijke vorm. Bijvoorbeeld - https://vdjyien-app.apms.io/admin/someurl/
- Page - de interne identificatiecode van de pagina, die wordt gebruikt in AppMaster bedrijfsprocessen. Deze bestaat uit 22 tekens, een willekeurige reeks letters en cijfers.
- Title - titel van de pagina. De naam in de voor mensen leesbare vorm.
- URL Params. Een pagina kan zo worden gemaakt dat het adres niet strikt vast is, maar ook variabele waarden bevat. Een pagina kan bijvoorbeeld een lijst van artikelen in een bepaalde sectie weergeven, en de identifier van deze sectie wordt gewoon als parameter in de URL aangegeven.
- Query Params. Aanvullende query parameters worden aan het einde van de URL geschreven na het "?" teken. Bijvoorbeeld, voor een pagina met een lijst van artikelen kunnen de parameters "?_limit=12&lang=nl" aangeven dat er slechts 12 artikelen in het Engels nodig zijn.
Stel u bijvoorbeeld een pagina voor die een lijst met blogartikelen weergeeft. De URL is "/blog/:theme/:author". Het symbool ":" geeft aan dat de erachter gespecificeerde waarde een parameter is. Als parameters worden identifiers van het onderwerp (thema) en de auteur (auteur) van het artikel genomen.
Om naar deze pagina te navigeren, moet je het Navigate blok in het bedrijfsproces.
De parameters komen overeen met die welke eerder in het Get Current Page blok. In dit geval is de feitelijke titel van de pagina niet van belang voor de navigatie, omdat de pagina zelf is gespecificeerd als een interne identifier (u kunt hem selecteren uit de lijst van pagina's).
Als de pagina geen parameters heeft, kan de navigatie uiterst eenvoudig zijn; u hoeft dan alleen maar de gewenste pagina te selecteren uit de gegeven lijst. Maar in dit voorbeeld zijn er parameters die moeten worden doorgegeven aan het Navigate blok.
Een bronpagina voor navigatie maken
Overweeg het gebruik van parameters op een specifiek voorbeeld. Daarvoor maken we een aparte pagina van waaruit we in de toekomst naar de doelpagina moeten gaan. Laten we twee Select elementen aan deze pagina toe (één om te kiezen uit de lijst van onderwerpen, de tweede voor de lijst van auteurs) en vullen ze met testwaarden.
Daarna moet je een workflow instellen voor de Navigate knop waarop de navigatie naar de landingspagina moet werken. Dit proces begint met het ophalen van de geselecteerde waarden uit de Select blokken.
De volgende stap is het vullen van de Key-Value virtuele modellen. Hun array wordt gebruikt om de nodige parameters door te geven aan het Navigate blok. Het model zelf bestaat uit een sleutel (Key), die de naam van de parameter is (in dit voorbeeld, thema en auteur), en de waarde (Value, de directe naam van het geselecteerde thema, of de naam van de auteur).
Merk op dat veel tekens niet kunnen worden gebruikt in de URL, waaronder de spatie. Daarom zal een naam geschreven als "Frank Paulsen" in de URL automatisch worden omgezet in "Frank%20Paulsen". URL Encode en URL Decode blokken kunnen worden gebruikt om te coderen en te decoderen naar URL-standaarden. In dit voorbeeld gebruiken we voor meer duidelijkheid en schoonheid van de URL het Replace string blok en vervangen we zelfstandig de spatie door het "-" teken, waardoor de naam wordt gepresenteerd als "Frank-Paulsen".
De laatste stap is het samenvoegen van de gegenereerde key-value paren in een enkele array om door te geven als parameter aan het Navigate blok.
Als u nu op de knop klikt, gaat u naar de pagina https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/
U kunt zien dat de URL bestaat uit zowel een constant deel (https://vdjyien-app.apms.io/admin/blog/) als een variabele (No-code/Frank-Paulsen/) die is gevormd uit waarden die op de vorige pagina zijn geselecteerd.
URL-parameters gebruiken om inhoud te beheren
De volgende taak is de ontvangen URL-parameters te gebruiken om de inhoud van de pagina te wijzigen. Deze parameters kunnen bijvoorbeeld gebruikt worden om een GET verzoek aan de database, maar in ons voorbeeld zullen we gewoon hun waarde op de pagina weergeven. Daartoe voegen we twee containers toe aan de pagina met de bijbehorende Label.
Laten we een bedrijfsproces opzetten op basis van de onShow trigger in een van de Label. Het zal tot taak hebben de URL te ontleden, de parameters te verkrijgen en deze op de pagina weer te geven. Hiervoor gebruiken we het Get Current Page blok en krijgen we de waarde van elke parameter in een lus.
Vervolgens krijgen we via het Switch blok, krijgen we de waarde van de parameter en geven die weer in de corresponderende Label. Tegelijkertijd vervangen we voor de parameter Author "-" omgekeerd door een spatie.
Bij het navigeren naar een bepaalde pagina wordt nu niet alleen het statische adres gebruikt, maar ook URL-parameters die de feitelijke weergave van de inhoud op de pagina beïnvloeden.
Query parameters gebruiken
Op bijna dezelfde manier kunt u query parameters toevoegen (Query Params). Het belangrijkste verschil met URL-parameters is dat ze optioneel zijn. In dit voorbeeld bevat de URL noodzakelijkerwijs een aanduiding van welke informatie op de pagina moet worden getoond (welke thematische sectie en welke auteur), en aanvullende parameters zorgen voor de nodige verduidelijkingen. Zo kun je met de parameters limit en offset de paginering regelen en precies instellen hoeveel records uit de database moeten worden opgevraagd en vanaf welk record de uitvoer moet beginnen.
Laten we twee nieuwe velden toevoegen aan de startpagina - Input (Integer). Daarin schrijven we de parameters limit en offset.
We maken de nodige toevoegingen aan het bedrijfsproces van de navigatieknop. Laten we een array vormen van Query Params met de waarden limit en offset.
De laatste stap is het toevoegen van elementen met informatie uit de verzoekparameters, en het voltooien van het bedrijfsproces voor de doelpagina.
Het resultaat zou een URL als deze moeten zijn:
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
De applicatie implementeert de navigatie met URL-parameters en query-parameters en bepaalt dynamisch de inhoud van de doelpagina, afhankelijk van deze parameters.
