Here is the step-by-step academy guide designed to accompany the data updating and form mapping video, ready for your student platform.

Academy Lesson: Server-Side Data Updates & Form Mapping

Closing the loop on an internal portal or CRUD application requires giving users the ability to safely modify data and write those changes back to your master database. In this lesson, you will learn how to use Noca’s visual orchestration graph to target a specific record row dynamically using page context variables and map front-end modal inputs directly to backend Salesforce columns for instant, code-free data synchronization.

Step 1: Open Your Button’s Action Event

To run a backend update transaction when a user finishes editing an entry, you must bind your logic directly to the submit element.

1. In your Noca Web workspace, shift your focus from the main page view over to your dedicated OpportunityModal design layer.

2. Select the “Save Changes” primary action button element on the canvas.

3. Head to the left-hand side of your editor and open the Events panel.

4. Locate and click into the custom trigger labeled On Click ‘Save Changes’ to launch the visual workflow graph editor.

Step 2: Drop in a Salesforce Integration Block

With the event timeline open, add the connector node that targets your live CRM framework.

1. Click the center plus icon on the workflow layout to append an event block.

2. In the connection picker modal, search for and select the native Salesforce integration application tile, then click Next.

3. In the left-hand parameters panel, set your operational instructions:

   • Connection: Choose your active Salesforce connector instance.

   • Action: Pick Update as your execution style block.

   • Object: Define Opportunity as your target database table object.

Step 3: Extract and Bind the Dynamic Row Identifier Token

Before pushing an update payload, you must safely declare which exact CRM record row you are editing. We will isolate the correct database row by matching target unique identifiers.

1. Expand the Condition configurations drawer in the left parameter panel.

2. Target the core database identifier field named “Opportunity ID”.

3. Pivot over to the right-hand sidebar and open your Data Kit explorer view.

4. Expand the App Fields folder, drill down into your active app Variables listing, and locate your stored canvas page properties.

5. Click, drag, and drop the unique id parameter token straight into your matching condition placeholder row on the left.

Step 4: Map Modifiable Form Inputs Back to the Database Columns

Now that Noca knows exactly which record row to rewrite, the final phase is piping your user-edited text boxes to their database field equivalents.

1. Drop open the Mapping section under your Salesforce node parameters.

2. Form pairs between your live front-end input elements and your Salesforce destination columns. For this exercise, link:

   • Your front-end Account Name Field input $\rightarrow$ to your backend Account Name column.

   • Your front-end Close Date Field input $\rightarrow$ to your backend Close Date column.

   • Your front-end Stage Selection Field input $\rightarrow$ to your backend Stage column.

   • Your front-end Financial Field input $\rightarrow$ to your backend Amount/Pipeline Value column.

3. Click Save and exit the graph editor.

💡 Pro-Tip: To ensure a polished user experience, you can daisy-chain an extra action step right after the data write completes! Drag a terminal success line out from the right edge of your Salesforce update block and select the Refresh Data Component node targeting your main dashboard table. This ensures that the moment your modal updates a record, the background table updates its records instantly without requiring a full browser refresh.