Answered

Create a shopping wesbite in Power Pages

(1) Share

Report

Posted on by CapG

Hi,

I need to build a shopping website like amazon but not too complex. I would just like to see the home page, products listing page- allow user to choose from available sizes, quantity(dropdown),add to cart and place an order with a possible Order histroy page as well.

As I am new to this topic, after much research I was able to build an initial dataverse table and create relationships as shown below. How do I proceed from here?

I would imagine the website should update by retrieving the products from the Products table and add records to the orders table when placed an order. How do I achieve this?

Thanks!

Categories:

Design & build

I have the same question (0)

All responses (2)

Answers (1)

Verified answer

Jon Unzueta 1,827 Super User 2025 Season 2 on at

Like (1)

Report
@CU31070823-0

Building a shopping website using Power Pages and Dataverse is a solid way to teach and learn full-stack development with low-code tools. Here's a step-by-step guide to help you move forward from your Dataverse setup:

🧱 Step-by-Step Guide to Build Your Shopping Website

✅ 1. Dataverse Table Setup

You mentioned you've already created tables—great! Here's a typical structure:

Products Table

Name

Description

Price

Available Sizes (Option Set or Related Table)

Quantity Available

Orders Table

Customer (lookup to Contact)

Order Date

Total Amount

Order Items Table

Lookup to Order

Lookup to Product

Size

Quantity

Price

🖥️ 2. Create Pages in Power Pages

🏠 Home Page

Static or dynamic welcome content.

Link to product listing.

🛍️ Product Listing Page

Use List component connected to the Products table.

Add filters for size, category, etc.

Use Web Form or custom JavaScript to allow:

Size selection

Quantity dropdown

“Add to Cart” button

🛒 Cart Page

Store cart items in a temporary table or session using JavaScript.

Display selected items with quantity and total.

📦 Place Order Page

On submit, create a record in the Orders table.

Loop through cart items and create Order Items records.

📜 Order History Page

Use a List component filtered by current logged-in user.

Show past orders and details.

🔌 3. Connect Frontend to Dataverse

You can use:

🔹 Web API (Dataverse Web API)

Use JavaScript to call Dataverse Web API for:

Reading products

Creating orders and order items

Example:

fetch("/_api/products", {

  method: "GET",

  headers: {

    "Accept": "application/json",

    "OData-MaxVersion": "4.0",

    "OData-Version": "4.0"

  }

})

.then(response => response.json())

.then(data => console.log(data));

🔹 Web Forms

Use Power Pages Web Forms to create and submit data to Dataverse without writing code.

🔐 4. Security Setup

Create Web Roles for anonymous users and registered users.

Set Table Permissions for Products (read), Orders (create), and Order Items (create).

📚 5. Teaching Tips

Let students build each page incrementally.

Use mock data for testing.

Encourage them to customize the UI with CSS and Liquid templates.

🏷️ Tag me if you have any further questions or if the issue persists.

✅ Click "Accept as Solution" if my post helped resolve your issue—it helps others facing similar problems.

❤️ Give it a Like if you found the approach useful in any way.

Was this reply helpful? Yes No
CapG 36 on at

Like (0)

Report

This is a great start to my project! Thank you!

Was this reply helpful? Yes No