Adding logic to popups

Popups in WeWeb have their own powerful logic system that lets you create dynamic, interactive experiences. You can make your popups respond to user actions, display different content based on conditions, and create more personalized user experiences.

WORKING WITH LOGIC

The popup logic system in WeWeb follows similar patterns to how logic works with components. If you're already familiar with WeWeb components, you'll find these concepts familiar.

Learn more about components →

Properties - the foundation of dynamic popups

Properties allow you to create popups that can display different content each time they're shown, making them reusable across your application.

Creating popup properties

To add properties to your popup:

1. In Manage Popups, click Edit on the popup model
2. In the right panel, open the Component tab
3. In the Properties section, click New
4. Name the property, choose its type, and click Create

Each property you create becomes available to use within your popup, and can be passed values when the popup is opened.

Product detail properties examples

Imagine you're creating a popup to display product details:

• Product Name (Text) — The name of the product to display
• Product Description (Text) — The description of the product to display
• Product Price (Number) — The current price of the product
• Product Image (Image URL) — URL to the product's image
• Available Stock (Number) — Number of the product available in stock
• Product ID (Number) — The ID of the product

These properties allow you to reuse the same popup design for any product in your catalog.

Binding elements to properties

Once you've set up properties, you can bind them to elements inside your popup:

1. Select the element you want to utilize the property
2. Bind the property of the element you want to change
3. Select the popup property you want to use

For example, to bind text content to a property:

• Select a text element
• Click the binding icon next to the Text field
• Select your property (e.g., Product Name)

Passing values to popups

When opening a popup via a workflow, you can pass values to its properties:

1. Select the element you want to act as the trigger for the opening of the popup
2. In the Workflows tab, click New
3. Click Add an action
4. Select Open popup
5. Select the popup you wish to open
6. Define all the values you want to pass in for the available properties
7. Once configured, test in preview

Creating internal popup data

Variables

Variables in popups are scoped to the popup instance and help you manage state within the popup.

WHAT DOES "SCOPED" MEAN?

When we say variables are "scoped" to the popup, it means they only exist inside that specific popup. They can't be accessed from outside the popup, and they don't affect other parts of your application. Think of it like each popup having its own private notebook for storing information.

To create a variable:

1. In the Component tab, open the Data section
2. Under Variables, click New
3. Name the variable, choose its type, and set an initial value
4. Click Create

Variables are perfect for:

• Tracking user input within a form
• Toggling between different views in a multi-step popup
• Storing temporary data that doesn't need to be passed from outside

Product detail variables examples

• Selected Quantity (Number) — Set to 1 initially, tracks how many items the user wants to purchase

By updating these variables with workflows, you can create an interactive experience without needing to close and reopen the popup.

Adding interactivity with workflows

Workflows let you create interactive behavior within your popups.

Creating popup workflows

1. In the Component tab, open the Actions section
2. Under Workflows, click New
3. Name the workflow, select a trigger, and add actions

Workflows can be triggered by any element inside the popup.

Product detail workflow examples

Workflow name: Increase Quantity
Triggered by: "+" button click

Actions:

1. Check stock availability
   • Condition: Selected Quantity < Available Stock
2. If condition passes:
   • Set Selected Quantity to Selected Quantity + 1

Workflow name: Decrease Quantity
Triggered by: "-" button click

Actions:

1. Check minimum quantity
   • Condition: Selected Quantity > 1
2. If condition passes:
   • Set Selected Quantity to Selected Quantity - 1

These workflows handle the quantity selection functionality, ensuring that users can't select a quantity less than 1 or more than the available stock.

Formulas for dynamic calculations

Formulas let you create reusable calculations or logic within your popup.

1. In the Component tab, open the Actions section
2. Under Formulas, click New
3. Name your formula, add any input parameters, and configure the formula
4. Click Create

Formulas are useful for:

• Calculating values based on user input
• Formatting display text
• Determining visibility conditions

Product detail formula examples

• Formatted Price

  • Parameters — price (Number)
  • Formula — Adds currency symbol to price of the product
  • Use — Displaying consistent price formatting throughout the popup

• Is Out Of Stock

  • Parameters — available_stock (Number)
  • Formula — Checks if the available quantity is zero
  • Use — Showing "Out of Stock" message and disabling the Add to Cart button

VIDEO GUIDE

Want to see the product detail popup being built in full? Check out our complete video walkthrough for building a product details popup with properties, variables, workflows, and formulas.

View the product details popup example →