In this lesson, we'll create a real content model using the Webiny Admin UI. We'll build a Product model for an e-commerce scenario, giving you hands-on experience with Webiny's visual content modeling tools.

Accessing the Content Model Builder

First, let's navigate to the content model builder in the Webiny Admin:

1. Open your Webiny Admin application
2. In the main menu, click on Content Modeling
3. Click on Models
4. Click the + New button

Click to enlarge

This will open the "New Content Model" dialog where you'll configure the basic information about your model.

Creating the Product Model

Let's create a Product content model with all the fields an e-commerce product needs.

Step 1: New Content Model Dialog

After clicking + New, you'll see the "New Content Model" dialog. This is where you configure the basic information about your model:

Click to enlarge

Fill in the following information:

Name

• Enter: Product
• This is the display name of your content model (use singular form, e.g., "Author Category" not "Author Categories")

Singular API Name

• Auto-generated from the name: Product
• This is used in GraphQL queries like getProduct and createProduct
• Example format: AuthorCategory

Single entry model (toggle)

• Leave this OFF for products
• Enable this only for models that should have exactly one entry (like site settings or homepage configuration)
• Once created, this setting cannot be changed

Plural API Name

• Enter: Products (you need to type this yourself)
• Used in GraphQL queries like listProducts
• Example format: AuthorCategories

Content model group

• Select Ungrouped from the dropdown
• Groups help organize your models in the sidebar
• To create new groups, you'll need to use the "Groups" section in Content Modeling

Create model with default fields (checkbox)

• Leave this UNCHECKED for this tutorial
• When checked, Webiny automatically adds three fields: title (text), description (long text), and image (file)
• For learning purposes, we'll add our own custom fields from scratch to understand the process better

Click + Create Model to proceed to the content model builder.

Step 2: Adding Fields

Now you're in the content model builder interface! This is where you'll add fields to define your product structure.

Click to enlarge

On the left, you'll see the FIELDS palette with all available field types. On the right is the canvas where you'll build your model. Drag a field type from the left onto the canvas to add it.

Let's add four essential fields to our Product model:

1. Name (Text Field)

Drag the Text field from the palette onto the canvas. A Field Settings modal will appear with multiple tabs.

In the General tab, configure:

Click to enlarge

• Label: Name
• Field ID: name (auto-generated from the label)
• Help text: (optional) Helpful hint for content editors
• Placeholder text: (optional) Placeholder shown in the input field

Switch to the Validations tab:

Click to enlarge

Enable and configure:

• Required: Enabled (toggle to ON)
• Min length: Enabled, Value: 3
• Max length: Enabled, Value: 100

Click Save Field to add it to your model.

This is the main product title that will be displayed to customers.

2. SKU (Text Field)

Drag another Text field onto the canvas. In the settings modal:

General tab:

• Label: SKU
• Field ID: sku
• Help text: Stock Keeping Unit - unique product identifier

Validations tab:

• Required: Yes
• Unique: Yes (ensures no duplicate SKUs)

Click Save Field.

The SKU is a unique identifier for inventory management.

3. Description (Long Text Field)

Drag the Long text field onto the canvas:

General tab:

• Label: Description
• Field ID: description

Validations tab:

• Required: Yes
• Min length: 10

Click Save Field.

Long text fields support multi-line content, perfect for product descriptions.

4. Price (Number Field)

Drag the Number field onto the canvas:

General tab:

• Label: Price
• Field ID: price

Validations tab:

Enable and configure:

• Required: Enabled (toggle to ON)
• Greater or equal: Enabled, Value: 0 (ensures price cannot be negative)

Click Save Field.

Store the price as a number for calculations and filtering.

Step 3: Save the Model

Once you've added all four fields:

1. Click Save in the top right
2. Your content model is now created!

What Just Happened?

By creating this content model through the UI, Webiny automatically:

1. Generated GraphQL API - Queries and mutations for CRUD operations
2. Created Admin UI - A form for creating and editing products
3. Set up validation - Rules are enforced on both frontend and backend
4. Enabled versioning - Every product entry will have full version history

Testing Your Model

Now that your Product model is created, let's test it by creating an entry:

1. Navigate to Content in the main menu
2. Expand Ungrouped to see your models
3. Click on Product

Click to enlarge

You'll see the Products list view (currently empty). Click + New Product to create your first entry.

4. Fill out the form with sample product data:

Click to enlarge

• Name: "Wireless Headphones"
• SKU: "WH-001"
• Description: "Premium wireless headphones with noise cancellation"
• Price: 199.99

5. Click Save in the top right

You've just created your first product entry!

Modifying the Model

Need to add or change fields? You can modify the model anytime:

1. Go to Content Modeling > Models in the main menu
2. Find your Product model
3. Click the edit icon
4. Add, remove, or modify fields
5. Save your changes

Next Steps

Now that you've created a Product model through the UI, you're ready to:

1. Create models via code - In the next lesson, we'll create a Product Category model programmatically and link it to products using reference fields
2. Understand the different APIs - Learn about Read, Preview, and Manage APIs and when to use each
3. Query your data - Use the Webiny API Playground to interact with your content via GraphQL

Summary

Creating content models through the Webiny UI is intuitive and powerful:

• Visual builder - Drag-and-drop interface for creating models
• Rich field types - Text, numbers, files, dates, and more
• Validation rules - Ensure data quality and consistency
• Automatic API generation - GraphQL endpoints created instantly
• Admin forms - Content editing interface generated automatically
• Easy to modify - Change models anytime without breaking existing data

You've successfully created a Product content model with multiple field types and validation rules. In the next lesson, we'll create a Product Category model via code and learn how to link models together using reference fields.