Uiflow
ChangelogPartners | Freshworks
Search
⌃K
Links

Populate your store with an API

This page explains how to populate each page of your store application with product data obtained through a REST API.
To populate your store with data via an API:

Add the Tile Layout to a Constructor

To display individual products in your application, you need to create tiles for each product in the API response. The easiest way to create individual tiles is to construct Tile Layout instances using the Constructor component, and populate them with API data.
To add Tile Layout to a Constructor:
  1. 1.
    Navigate to the Design view and select the Home page.
  2. 2.
    Select the Libraries panel and drag-and-drop a Constructor component into your app.
  3. 3.
    Drag-and-drop Tile Layout into the Constructor.
    Your app should look as follows.
  4. 4.
    Navigate to the Logic view and drag-and-drop the Constructor reference into your app.
  5. 5.
    Double-click into the Constructor.
  6. 6.
    Drag-and-drop the Tile Layout's child references into the constructor:
    • Product Image
    • Product Title
    • Product Description
  7. 7.
    Drag-and-drop the following nodes outside the Tile Layout boundary:
    • (Product Image) source
    • (Product Title) label
    • (Product Description) label
    This makes each node appear on the main application layer.
  8. 8.
    Click Default Flow in the breadcrumbs to navigate back to your app's root level.

Add and configure an API Request

To retrieve product list data for your application, configure a REST API component:
  1. 1.
    Open the Libraries panel and drag-and-drop a REST API component into your app.
  2. 2.
    Select REST API and open the quick selection State menu.
  3. 3.
    In the URL field paste the data URL. In this tutorial, we use this example URL: https://dummyjson.com/products.
  4. 4.
    Open the quick selection Actions menu and delete the path.
    Note: If you leave the default placeholder path, the URL will be misdirected.
  5. 5.
    Drag-and-drop your Home reference into the app and connect its onPageLoad event to the REST API component's request action.

Iterate through the API response

To iterate through the API response and construct individual product tiles:
  1. 1.
    Open the Libraries panel and drag-and-drop a For Each component into Product Tiles.
  2. 2.
    Click the {...} next to the REST API component's response node to display the example output and ensure that only the checkbox next to products is enabled. This exposes the products array as a component node.
    Note: You must first preview the app to get data flowing through the components in order to view example output.
  3. 3.
    Connect the following nodes:
    • (REST API) onSuccess > (For Each) call
    • (REST API) products > (For Each) items
    These connections call the For Each component to iterate through the products returned in the API response and pass them to the For Each component.
  4. 4.
    Open the Libraries panel and drag-and-drop a Get Values component into your app.
  5. 5.
    Select Get Values and open the quick selection State menu.
  6. 6.
    Select Add Node and name them thumbnail, title, and description. Each of these nodes will retrieve the corresponding information from the request.
  7. 7.
    Connect For Each's item node to Get Values's object node. This passes an item from For Each and formats it as an object in Get Values.
    Note: The Get Values component's object node will be empty if the app is previewed at this point. object will be populated once the Constructor component is connected and configured as described in subsequent steps.
  8. 8.
    Connect the following nodes:
    • (Get Values) thumbnail > (Constructor) Product Image.source
    • (Get Values) title > (Constructor) Product Title.label
    • (Get Values) description > (Constructor) Product Description.label
    These connections pass the values from each product in the response to the corresponding sections of the product tiles.
  9. 9.
    Connect For Each's call action to the Constructor's constructor action. This calls the constructor for each product in the API response.
  10. 10.
    Double-click into the Constructor and connect the following nodes to the onConstructed event:
    • (Tile Layout) Product Description.setLabel
    • (Tile Layout) Product Thumbnail.setSource
    • (Tile Layout) Product Title.setLabel
    When a product tile is constructed, these connections set the product's thumbnail, title, and description.
  11. 11.
    Preview your app to ensure the page renders properly.
    Your home page should look similar to this:
  12. 12.
    Repeat the steps for the other pages of the app. The section below, describes how to filter the products on each page by a specific category (e.g., electronics, jewelry, etc.).

Filter products by category

While the home page displays a variety of products, each tab in your application should limit the displayed products to the corresponding product category (e.g., Laptops, Jewelry, Men's Clothing, or Women's Clothing).
To filter displayed products in each page:
  1. 1.
    Navigate to the Logic view and select the page in the Pages panel (e.g., Men's Clothing)
  2. 2.
    Select Rest API, open its quick selection Action menu, and set the path for the relevant product category.
    • Electronics: /category/laptops
    • Jewelry: /category/womens-jewellery
    • Men's Clothing: /category/mens-shirts
    • Women's Clothing: /category/womens-dresses
    This directs your API requests to the endpoints with data for each product category.
  3. 3.
    Select the Home page in the Pages panel.
  4. 4.
    Preview the app and test each tab to ensure the products render properly. For example, your Men's Clothing page should look similar to this:
Congratulations! Your store application is now complete.
Previous
Build product pages
Next - Tutorials
Build a waitlist app
Last modified 1mo ago