Dynamic Navigation
What is Dynamic Navigation in Uncodie? Dynamic navigation in Uncodie allows you to display and configure specific data for each profile or project in your application. Instead of having a separate route and navigation for each profile, you use a unique identifier (ID) to display only the information relevant to that profile or project. Next, we will explain how to set this up in a simple way. Step 1: Configure your Data Source Variable First, make sure you have a data source variable configured to enable dynamic navigation from your menu. It can be a local or global variable, according to your needs. Step 2: Select the Navigation Component Open Uncodie and select the component of your menu that will activate dynamic navigation. In our example, we will use a field called "GQL" in the menu. Step 3: Configure the OnClick Event Go to the "< >" event screen in Uncodie and click on the plus sign "+" to add a new event. Select "Action" and in the Trigger Selector choose "OnClick" as the trigger. Step 4: Configure the Navigation Action In the Actions section, select "Select and Navigate". In the "Screen" field, choose the name of the screen you want to navigate to. In our case, it will be "GqlScreenl". Step 5: Define the Field of the Collection In "Varname", enter the name of the field of the collection that will be used to identify the projects. In our example, this field is called "idProject", so you must enter "idProject" in this field. Step 6: Configure the Dynamic Details In "Type", choose "Dynamic". In "Varvalue", choose "Datasource". In "Data Source", select "Router Context". In "Routercontext", select "idProject". Click on "Save" to save the settings. Step 7: Repeat the process Repeat this process with all the fields of your route that require dynamic navigation. In this way, each field will show the specific data related to the project identified by its ID. And that's all! You have successfully configured dynamic navigation in Uncodie for your project. Now, when users interact with the menu and select different projects, they will see the information corresponding to each one.
Last updated
Was this helpful?