> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://sap.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://sap.ferndocs.com/_mcp/server.

# 1 - Create the Product List Page

Import a skeleton project for the SAP Build CodeJam, and create a simple product list page based on data in our CAP service.

## Prerequisites

* You have completed the previous tutorial for the SAP Build CodeJam, [Set Up Prerequisites for SAP Build CodeJam](codejam-0-prerequisites).

## You will learn

* How to create a new SAP Build Apps project
* How to import a project
* How to get data from a destination
* How to add components to a page
* How to bind data to UI elements
* How to change component styles
* How to preview your app

## Intro

In this exercise, you will be importing an already created skeleton app to your SAP Build Apps lobby. We've provided the skeleton app so you do not have to create all the UI elements for all the pages.

For this page, the product list page, you will design the entire UI, including styles and layout. For all pages, you will create the data connections, variables, logic, and navigation.

For this product list page, you will connect to our CAP service to get names, descriptions and images of products. At the end of this exercise, your homepage (product list page) will look something like this.

![Preview](/_fern-img/68154d4702b5438ab6d731140f49cdc3a3870c3841c13b890a2b3cb3804ba91e.webp)