Adding Content To Routes
In this section:
Time: 5 minutes
  • Solidify Knowledge from Previous Lesson
  • Get Parameters from a Route
  • Manipulate Data and Use A String Template
This section should go faster than the last section because we're repeating a lot of the same steps.

Prepare Dynamic Items

Let's go to our Item element and turn it into a class. We want the Items to populate dynamically
Next we're going to expose the actions we want to take on the Item. Namely, setting the source and labels for all of its data with our data nodes.
Now we can expose the onConstructed action and a Sequence element to condense all of these nodes into one call that is set off automatically when the Item is created.
And we can drag out all of the data nodes so we can hook them into our Request once we add that:
And we can push all of the calls and data into our Container, where we will add our logic.

Wrap Content

Now let's wrap our Content Wrapper in a Container that we can put all of our logic in. Following, we can add a Request to our application.
We want to make sure this Container maintains our basic styling so we will also need to adjust its layout in the right hand panel:

Prepare the Request

For our home page, we want to show all the products in the FakeStore API, regardless of category. So let's paste in the url for all products in our url parameter on the Request element and change the method from POST to GET.

Tie it All Together

Let's hook up a For Each element to this Request, because we can assume that it will come back as an array of items.
We can connect the calls that we want to happen in the sequence we are looking for: onSuccess calls For Each which then calls Item.constructor in the Content Wrapper.
However, we don't quite know how to deal with the items yet because we have a lot of details we will need to parse.
Each item in the response is a JSON object. Luckily, we have a lot of elements that can parse objects (learn more here).
In this instance, we want to grab the values for multiple keys so we will use the Get Values element. You can parse the result into different types if necessary, but in our case we want them all to be their default: strings.
Now if you hit "Preview" you should have a completely functioning Home Route!
We only have a couple more steps to get this to work for our other Route.
Remember how we copied the route in the previous section? Let's delete our Category route and replace it with a copy of our new Home route that holds all of this logic.
Then our last step will be to make sure our Request is taking a dynamic Url${category} instead of showing a list of all of the products from every category.
So let's copy and paste our Home Route:
So how do we get the parameters from the Route?
If you drill into any Route element, there will be an exposed action called getParams. Connect this with a Console element to see the format of the parameters:
Now that we see the format, we can tell that we will need to use our Get Values element again to pick out the category.
We are eventually going to want to send this category to the url in the Request, so let's expose that action as well.
Now to get the category into the string that we feed into this setUrl action, we'll need to use one more element called a String Template.
This allows us to use interpolation by setting variables in the State and using them in the template parameter surrounded by ${}. This allows us to set the url dynamically based on whatever information we are getting from the Route parameter. You can learn more here.
Now everything should be working as you expect except that when you click on the categories in the Nav Bar, they are all piling up.
We need to go back to the dynamic Items and expose the action called destroyAllInstances.
Then onRouteActivate we want to first destroyAllInstances that might be on the page, and then call the Request to trigger a new construction of elements.
Sounds like a job for the Sequence element.
Altogether it looks like this:
That's it!
You've successfully created a full application that is beautifully styled, has multiple routes, connects to an API, and manipulates the response to dynamically create elements on the page.
Now you're ready to start your own journey with Uiflow.
Please reach out if you have any questions!
Copy link
On this page
Wrap Content
Prepare the Request
Tie it All Together