Course Content
Apps – Expert
0/8
UI Logic – AI App Builder
00:00
Events – Conditional logic – AI App Builder
00:00
Variables – AI App Builder
00:00
Tables – AI App Builder
00:00
Modals – AI App Builder
00:00
Address Finder – AI App Builder
00:00
Kanban – AI App Builder
00:00
Course Exercise: Build a Secure Salesforce Customer Portal with OTP – AI App Builder
00:00
Apps – Expert

Here is the step-by-step academy guide designed to accompany the modals video, making it easy for your students to follow along.

Academy Lesson: Creating and Triggering Modals with Prompts

Modals (or popups) are a great way to display detailed information about a specific data record without forcing users to leave their current page. In this lesson, you will learn how to use Noca AI’s prompt builder to automatically connect a data table to an interactive details modal.

Step 1: Prepare Your Base Interface

Before adding the modal logic, ensure you are working on a page with an existing data element.

  1. Open your Noca Web project workspace.

  2. Make sure you have your invoice data table loaded on the canvas (from our previous lesson).

Step 2: Prompt the Modal Interaction

Instead of manually creating buttons, overlay layers, and open/close states, you can describe the behavior you want in plain text.

  1. Click into the prompt builder text box at the bottom of the canvas.

  2. Type a clear interaction request.

  3. Example used in the video: > "When I click on a table row, open a modal with the invoice details."

  4. Click submit and allow Noca AI a few seconds to process the architectural layout and create the components.

Step 3: Test the Dynamic Context Loading

Once the prompt finishes executing, you can instantly test the interaction directly inside your preview editor.

  1. Click on the first row of your invoice table. A beautifully formatted modal should smoothly pop up over the screen.

  2. Verify that the modal dynamically extracts and maps context-aware data fields from that row (e.g., Company Name, Amount, Invoice Number, Client Email, Issue Date, and Due Date).

  3. Close the modal, then click on a different row. Notice that the content inside the modal updates in real time to perfectly match the new row clicked.

Step 4: Locate and Customize Your Modal Page

Behind the scenes, Noca AI keeps your project organized by separating core interface structures.

  1. Navigate to the left-hand sidebar and look at your Pages List.

  2. Notice that Noca AI has automatically generated a completely separate page dedicated strictly to this modal.

  3. Click on the modal page from the list to open it natively in the visual editor. From here, you can freely rearrange the layout, change styles, or append custom action flows specifically for the modal’s lifecycle.

💡 Pro-Tip: Because Noca AI structures modals as standalone sub-pages, any custom variable or data read action you apply within the modal page will execute natively when it slides into view, keeping your master data table page clean and highly performant!

Previous
Next