Adding Links Dynamically
In this section:
Time: 5 minutes
  • Learn about classes and instances
  • Create a Request from an API
  • Build Elements dynamically based on data
In this section we will be creating links to different pages based on the categories listed in our API.
We will make a request to the API, receive a list of categories for which we have products available, and then for each category in the list we will construct a link and set the text and link destination to be that name.
Let's get our Link Wrapper element set up to input information.
First, we will convert our Link element from an instance of an element to a class that can be created dynamically.
When you convert an element to a class, it gets a constructor action which will allow you to create instances of the element on your page. You can learn more about classes and instances here.
Next, we'll need to wrap our Link Wrapper in a Container. Everything that we create dynamically will take longer to render and we want to make sure that we leave space for our links in the Link Wrapper with the positioning we've laid out for them.
We will also put all of our logic at this level.
Now we need to expose some actions and data. So let's go to the Text element inside the Link element and expose the setLabel action.
Then we can go to the Link element and expose the actions setUrl along with the onConstructed action.
onConstructed is an action that is only available for classes, because it is called only after the element is rendered.
To streamline our nodes, we can set a sequence here. We know that after the link is constructed we will want to both set the Url and set the label for the text. So let's add a Sequence element and give it that logic. We can drag the data node for the Text outside of the parent element, Link, so that it is exposed in the Link Wrapper.
Now that all of the nodes are set up to connect to the request in our Link Wrapper, we can set up our Request.

Adding a Request

First, let's navigate to the Link Wrapper element and drag and drop a Request element.
We can make the Request from anywhere in the app and Flowlang will optimize the code, but we are placing it here because we want it will minimize the amount of nodes we have to use.
We will be using the Fake Store API.
This API has a group of endpoints that will allow us to see different categories and products associated with each category.
To get our Request element to return the list of categories, we will need to paste the URL for the API endpoint into the url parameter of the Request element under the Actions tab in the right hand panel. We will only be reading data, so we should also change the method parameter from POST to GET.
Now that we have a Request ready for sendoff, we need to find a way to call it.
We are going to drag a node from the request call on the Request element outside of its parent element. Then from the parent element, the App element, we will find the action onLoad.
If we click and drag a node from the onLoad action of the App element to the request action on the Request element, we will make the application fire this Request once the App has loaded.
To ensure our Request is working properly, let's drag and drop a Console element from the Catalog.
We can link the onSuccess call from the Request to the log call on the Console. This means that if the Request is successful we will force the Console to log something. We need to use the data node, response, from the Request element and drag a node over to the val node on the Console to tell the Console to log the response it gets from the Request.
In case something goes wrong, we can also add nodes between onError in the Request element to error on the Console element and the error data on the Request element to the val data node under error on the Console.
To test, we can use our Preview panel.
Shift the tab from Inspect mode to Preview mode to build your application and if the request is working you should be able to see previews of the data on both the Request element and the Console element.
In the preview, we can see that we've gotten a list of strings. For each of these strings, we will need to set a variable and then create a link where the text and url destination are both pointing to the variable.
We are going to drag and drop a For Each element onto our canvas and connect the onSuccess call from the Request to the For Each call and the response to the items in the For Each element.
Now for each of these items we are going to want to do a few things. First, we are going to want to set a variable to "save" the data until we go to the next item in the list. Then we will want to construct the Link Wrapper, which will set off the actions we already connected to set the label of the text and destination for the url.
Because we want these actions to happen in a specific order, we'll need to pull out the Sequence element.
So let's add a Sequence element and a Variable to our Link Wrapper flow.
From here we'll need to expose the getValue and setValue actions on the Variable.
Now let's just connect the calls and data nodes:
Now when you hit Preview your Nav Bar should appear populated with the categories that you get from the API!
This is huge. Now you can create elements dynamically based on the content you get from an API.
In the last section we'll learn to parse data if it comes in a form that is more complex than just a simple array, but if you understand the concepts from this lesson, you understand 90% of what is needed to build in Uiflow.
Copy link
On this page
Prep Link
Adding a Request