Course Exercise: Build Dynamic App Interfaces & Conditional UI

In this exercise, you will use Noca AI’s prompt-driven builder to generate a dynamic modal interface, configure On Load event triggers to read data from Salesforce, and establish an Update pipeline to write user changes back to your CRM database instantly.

Step 1: Generate the Case Details Modal Using Prompts

1. Open your project workspace and locate the AI prompt bar.

2. Enter this exact instruction:
   “When I click a row in my cases table, open a modal with the case details as well as the case description. Inside, I want to be able to edit the subject and description. Create a save button.”

3. Allow the AI to automatically build the modal structure, layout elements, and trigger events.

Step 2: Configure the On Load Event

Navigate to your newly created Case Details Modal to bind the dynamic Salesforce data.

1. Switch your page selector view to the Case Details Modal.

2. Go to the Events tab on the right panel and create a new On Load event flow.

• Add a Salesforce action node to the canvas:
  • Select an Action: Choose Read (Object Read).

  • Select an Object: Choose Case

  • Click Insert Node.

• Set up the lookup condition in the properties panel:
  • Condition: Set Case ID equal to your modal.

• Map the incoming fields to your user interface elements:

  • Condition: Use component mapping to map the Salesforce Description field back to your modal’s description field.

• Click Go Live on the event flow, close the canvas, and click Save to apply the backend changes.

1.  

2. Click Insert Node to lock your Salesforce data extraction step onto the canvas.

Step 3: Configure the Save Changes Event

Now, hook up the save button inside the modal to write updated values back to Salesforce.

1. Click the Save Changes button located inside your case details modal layout.

2. Navigate to the Events tab on the right side and click On Click to open the canvas.

3. In the properties dashboard on the right, define your target database update variables:

   • Action Configuration: Set Action to Update on the Case object.

   • Field Selector: Choose the fields you want to update (e.g., Subject and Description).

Step 4: Map Your Core and Optional Data Fields

With both systems on the canvas, map the active input fields directly to their CRM properties.

1. Locate the Subject and Description fields in your Update configuration panel.

2. Slide open your left-hand Data Kit explorer drawer to access the modal’s input parameters.

3. Drag your modal’s Subject and Description inputs and drop them directly into their corresponding Salesforce database slots.

4. Set up the targeting filter: set the Case ID parameter to equal your active Case value.

5. Click the Go Live button on this save flow event pipeline.

Step 5: Save and Test Your Integration Pipeline

1. Verify that your core text blocks and communication mapping values match perfectly.

2. Click Save in the top designer panel to finalize your canvas configurations and lock both active event flows.

💡 The Result: Your dynamic modal interface is officially complete! When executed, Noca automatically queries your designated Salesforce Case database, extracts the description, and instantly syncs updated subject and details fields right back to your CRM dashboard on save—completely on autopilot.

Key Takeaways

• Instant Form UI: Prompt-driven components enable you to build complex modal views and functional input forms instantly, entirely using plain English instructions.

• Bi-directional CRM Sync: Creating coupled On Load (read) and On Click (update) action nodes delivers a real-time data flow with Salesforce, without writing any manual logic tables.

Outstanding work completing this dynamic portal exercise! You are now fully prepared to map multi-app synchronization pipelines across the entire Noca Flow ecosystem. Keep up the brilliant momentum!