Lesson: Pushing App Data Changes Back to Salesforce

In the previous lesson, we completed the first half of our integration loop: dynamically reading profile details out of Salesforce to pre-populate our web application. Now, we will finish the loop. In this lesson, you will learn how to hook up an On-Click Button Trigger to capture any changes a user makes inside your app form and instantly push those updates straight back to overwrite the matching record inside Salesforce—building a complete, two-way CRM sync.

Closing the Data Sync Loop

Rather than leaving a form stagnant, a true web application needs to save operational updates. By listening for the exact moment a user clicks your application’s submission button, Noca AI can package the modified text fields, look up the active record key via the browser URL, and safely patch the database values.

Step 1: Locate the Save Button Trigger

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

2. Select the Events button located on the top-right navigation panel header to display the operational sidebar panel.

3. Scroll down the panel list to the On Click triggers section.

4. Locate the specific structural interaction target named Save Changes.

5. Click the Plus (+) icon on that row to initialize a fresh, action-specific Noca Flows logic grid.

Step 2: Add the Salesforce Update Module

1. Click the Plus (+) node block following your initial workflow trigger component.

2. Choose Salesforce from your integration provider list.

3. This time, instead of pulling down data, select Update an object as your core workflow operation.

4. Define the target object collection parameter value as Contact.

Step 3: Match the Record Identifier Filter

To ensure your workflow updates the exact contact record the user is actively viewing (and doesn’t overwrite the wrong profile data), bind the update scope tightly to your URL parameter:

1. Locate the Condition configuration options section on the right side window.

2. Build the matching condition rule: If my Contact ID is Equal to...

3. Click the target data token box, open your Data Kit, look under App Fields, and select your default page-level ID URL variable token.

Step 4: Map Form Field Modification Elements

1. Inside the Salesforce node properties panel, click the Add Fields selector button to tick the target CRM attributes you want to allow updates on.

2. Check the boxes for: First Name, Last Name, Title, Email, and Phone Number.

3. Scroll into the address attributes and explicitly select the Mailing variables (Mailing Street, Mailing City, Mailing State, and Mailing Zip Code) to preserve proper database property alignment.

4. Go to the Data Kit sidebar on the left, navigate down to the active web form input components, and drag-and-drop each element onto its matching Salesforce destination field row:

   • First Name Input $\rightarrow$ First Name Field

   • Last Name Input $\rightarrow$ Last Name Field

   • Phone Input $\rightarrow$ Phone Number Field

   • Street Input $\rightarrow$ Mailing Street Field

   • (Repeat this direct one-to-one pairing for Title, Email, City, State, and Zip Code inputs)

5. Click the Insert Node button at the base of the settings selector window.

Step 5: Publish the Write Flow Automation Live

1. Move your cursor to the top-right toolbar region of the flow workspace window.

2. Toggle the workspace execution switch over to Go Live.

3. Close out the logic canvas window frame to return to your structural layout screen workspace.

4. Click the primary Save confirmation button inside the builder canvas so Noca AI can re-compile the layout’s underlying button event script listeners.

Step 6: Test the Final Two-Way Integration

1. Click the Preview App option, make sure your valid Salesforce Contact ID string is appended as an active URL search parameter, and hit Enter.

2. Watch the on-load flow immediately run its check first, pulling in the contact’s existing database details.

3. Edit the pre-populated values inside your form: change the Phone Number digits and type an entirely new line for the Street Address.

4. Click your newly wired Save Changes button.

5. Pivot over to your official Salesforce browser page and refresh the contact record profile. Look at the data fields: the phone number and mailing location records will have instantly shifted to reflect the exact text updates you submitted through your application!