Here is the step-by-step written guide designed for your online academy lesson to accompany the “Mapping details back from a flow to a web app” video.

Lesson: Mapping Salesforce Data Dynamically to Your Web App

Building a responsive frontend layout is only part of the equation; applications truly become powerful when they interact with real-world database ecosystems. In this lesson, you will learn how to initialize an On-Load Trigger using Noca Flows to dynamically read specific contact details from Salesforce based on a URL parameter and map those record values straight into your application form inputs.

Understanding the Data Journey

Instead of displaying a blank form that forces an existing customer to re-type their information, we want our application to look up their existing customer profile in our CRM (Salesforce) the exact second the page finishes loading. We achieve this by grabbing the distinct record identifier straight out of the web browser’s URL bar.

Step 1: Initialize an On-Load Event Trigger

1. Open your Account Details interface inside the Noca Web Builder canvas.

2. Navigate to the top right of your workspace header navigation bar and click the Events button.

3. Inside the Events sidebar panel, locate the On Load section.

4. Click the Plus (+) icon to create a brand new On-Load automation trigger. This will automatically spin up and open a connected Noca Flows canvas panel.

Step 2: Query the Target Salesforce Object

1. On the blank flow grid, click the Plus (+) node icon following the initial App Trigger block.

2. Select Salesforce from the integration directory.

3. Choose the Read from an object operation module.

4. Set the Target Object property value to Contact.

Step 3: Configure the Dynamic URL Filter Condition

To ensure the application dynamically fetches the correct profile based on whoever is actively visiting the web link, you must filter by a variable URL parameter:

1. Locate the Condition settings region in the configuration panel on the right.

2. Define the logic query rule as: If my Contact ID is Equal to...

3. Click the value selector field, navigate into the Data Kit, and expand the Account Details Page App Field Variables.

4. Select the default ID variable (this configuration tells Noca to look for ?id=YOUR_CRM_VALUE directly inside the browser’s URL window layout).

Step 4: Map Salesforce Data Fields to UI Elements

1. Click the Plus (+) node icon following your Salesforce reading module.

2. Select the Component Mapping node (the utility responsible for pushing flow data records back out to active web layouts).

3. Inside the Select Component configuration menu, select Page to open mapping pathways across all layout rows globally.

4. Expand the Account Details Form option tree and select Inputs (leaving Labels untouched).

5. Review Noca AI’s automatic structural mapping pairing recommendations (e.g., First Name, Last Name, Email, Phone Number).

6. Custom Adjustment: If automatic mapping maps to an incorrect field alternative (like selecting Other Street instead of Mailing Street), click the X to remove it. Open your Salesforce Read Data fields directory, search for Mailing properties, and manually connect the exact fields:

   • Mailing City $\rightarrow$ City Input

   • Mailing State $\rightarrow$ State Input

   • Mailing Zip Code $\rightarrow$ Zip Code Input

   • Mailing Street $\rightarrow$ Street Input

7. Map the Title field and click Insert Node.

Step 5: Publish Your Noca Flow Live

1. Look at the top right of the flow editor bar.

2. Click the Go Live toggle switch button to put the automation script live.

3. Close the flow workspace framework panel to return to your primary application screen builder workspace.

4. Verify that your new workflow is correctly listed under the active On Load action section on the left sidebar panel layout, then click Save to compile your layout changes.

Step 6: Test the CRM Integration Flow

1. Open your Salesforce dashboard tab browser layout and copy a real Contact Record ID string from the address bar.

2. Return to Noca AI, click Preview App, and paste your string parameter directly into the viewport link address using the variable syntax format (e.g., append ?id=0038W000024xxxxXXX to the end of the URL text).

3. Press Enter. Watch the Noca active engine run the database lookup and automatically fill your form fields with the correct CRM data values instantly!