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

Lesson: Implementing Conditional UI Logic

A great form shouldn’t overwhelm users with fields that aren’t relevant to them. Instead, it should dynamically adapt based on the choices a user makes in real time. In this lesson, you will learn how to use Noca AI’s UI Logic engine to implement conditional visibility rules—specifically, how to show a “Company Name” input field only when a user selects a “Business” client type, and keep it hidden when they select “Personal”.

The Power of Smart Forms

Instead of cluttering your page layout with inactive elements or forcing users to read through fields labeled “if applicable”, conditional UI logic tailors the interface dynamically. This keeps your forms clean, improves submission completion rates, and provides a polished, intuitive user experience.

Step 1: Open Your Contact Us Page

  1. Open the Noca Web Builder canvas and load your corporate Contact Us page project.

  2. Review the layout form sections, noting the Client Type dropdown selector (which features Personal and Business options) and the Company Name input container field.

Step 2: Access the UI Logic Panel

  1. Move your cursor to the top right corner of the primary workspace navigation bar.

  2. Locate and click on the UI Logic button.

  3. This will instantly slide open the UI Logic management sidebar panel, where you can configure all front-end responsive behavior variables.

Step 3: Initialize a New Logic Flow

  1. Inside the UI Logic side panel window, look for the action prompt controls.

  2. Click the Add New Flow button.

  3. Watch the visual logic node editor workspace canvas slide into view. Notice that Noca AI recognizes your layout intent and automatically pre-generates a conditional rule flowchart template block to save you manual setup steps.

Step 4: Configure the Conditional Logic Trigger Node

  1. Click to expand the automatically generated Condition block node in the center grid.

  2. This block determines the exact evaluation rule for your form components.

  3. Set your target logic statement parameters to track your dropdown status:

    • Select your Client Type component property from your page inputs directory block list.

    • Set the logic check criteria rule selector to: If Client Type is Equal to...

    • Type in or select the value criteria: Business.

Step 5: Map True and False Branch Visibility States

Now you need to tell the system exactly what to do with the “Company Name” field when the condition is met vs. when it is not:

  1. Locate the True pathway block branch (the sequence that triggers if a user selects Business). Map the action node to make the Company Name field input display status toggle to Visible.

  2. Locate the False pathway block branch (the fallback sequence that triggers if a user selects Personal). Map the action node to make the Company Name field input display status toggle to Hidden.

Previous
Next