Apps – Advanced

Lesson: Introduction to Events & Noca Flows

Up until now, we have focused primarily on the visual side of application building—crafting layouts, managing styling assets, and testing responsive mobile viewports. However, a great web application requires logic to truly come to life. In this lesson, we will explore Events and Noca Flows—the powerful engines that listen for user interactions and manage your application’s behind-the-scenes workflow routing.

What are Events and Noca Flows?

  • Events: These are triggers that listen for specific user actions on your app page (e.g., clicking a button, selecting a menu checkbox, or loading a page view).

  • Noca Flows: This is the visual blueprint that executes right after an Event trigger fires. It handles the step-by-step data logic, validation passes, and backend calculations.

Step 1: Open Your App Interface

  1. Navigate to your app dashboard and open the multi-step lead capture wizard inside the Noca Web Builder canvas.

  2. Review the layout elements you’ve engineered, noting the interactive components like the navigation buttons (“Continue” and “Back”).

Step 2: Open the Events Configuration Panel

  1. Look at the top right section of the main navigation menu bar.

  2. Locate and click on the Events button.

  3. Watch the Events Side Panel slide open on the right edge of the workspace canvas.

Step 3: Analyze Active Trigger Sequences

Take a look down the newly opened panel to review how Noca AI lists application events out of the box:

  • Scroll through the interactive trigger rows. Notice how it tracks layout lifecycle instances like On Page Load.

  • Identify component-specific actions, such as On Click behaviors mapped directly to your visual UI button groups.

Step 4: Access the Noca Flows Workspace

To look under the hood of an active user journey, pick a specific navigation pipeline:

  1. Scroll down the panel list until you locate the trigger labeled On Click “Continue (Personal)”.

  2. Look directly next to the action trigger title and click on the Workflow / Flow Icon.

  3. The platform will instantly slide away the visual layout view and open the visual Noca Flows Workspace.

Step 5: Tour the Visual Logic Canvas

Take a look at the newly loaded graph editor node network:

  • Observe how the application visualizes background behaviors sequentially.

  • Notice that instead of looking at long strings of backend code, your user logic is laid out as a scannable flowchart—mapping inputs, conditions, and actions in a clean sequence.