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

Academy Lesson: Building a Salesforce Kanban Board with Prompts

Visualizing data through pipelines, project stages, or sales funnels usually requires hours of complex drag-and-drop front-end coding and tedious API integrations. In this lesson, you will learn how to use Noca AI’s prompt builder to instantly generate an interactive, bi-directional Kanban board connected natively to live Salesforce data.

Step 1: Open the Prompt Builder

To begin creating the interactive pipeline interface, head to your canvas workspace.

  1. Open your Noca Web project workspace.

  2. Locate the prompt entry text box situated at the bottom of the editor canvas.

Step 2: Define Your Pipeline Stages via Prompts

By providing the target Salesforce object and the specific stage list in plain text, Noca AI can architect both the columns and the layout in a single execution.

  1. Click into the prompt box and describe your exact operational pipeline.

  2. Example used in the video: > "I want a Kanban board for opportunities in Salesforce. The available stages: Prospecting, Qualification, Needs Analysis, Value Proposition, Decision Makers, Proposal/Price Quote, Closed Won, Closed Lost."

  3. Hit enter or click the submit arrow to begin the generation process.

Step 3: Inspect the Automated Layout and Counts

Once Noca AI completes the build, take a moment to look over the generated frontend layout.

  1. Review the newly built Opportunities Board page.

  2. Notice that the interface automatically populates distinct vertical columns for every single stage requested.

  3. Observe the metric headers: Noca AI natively calculates the total value sum and total card count dynamically at the top of each individual stage column.

Step 4: Examine the Auto-Wired “On Load” Fetch Logic

Noca AI doesn’t just build the UI—it maps out the foundational data fetch mechanics behind the scenes.

  1. In the left-hand navigation panel, click into the Events tab.

  2. Select the On Load flow event to launch the visual node editor.

  3. Notice that Noca AI has automatically injected a Salesforce Connector block, configured it to read your opportunity object database, and pre-mapped those dynamic fields right onto the front-end display cards. Click close to return to the canvas.

Step 5: Test Drag-and-Drop Real-Time Synchronization

The board is pre-configured with bi-directional syncing, meaning visual updates instantly push back to your CRM database.

  1. Pick up an opportunity card (e.g., click and drag a card from the Qualification column) and slide it smoothly into Needs Analysis.

  2. Release the mouse button to drop the card.

  3. What happened behind the scenes: This interaction fires an immediate On Move Column workflow event. Noca AI dynamically executes an immediate Salesforce record edit action node, rewriting the opportunity status variable inside your live Salesforce sandbox instance in real time!

💡 Pro-Tip: Want to let users easily edit an opportunity right from the board? Click into the prompt bar again and type: “When a user double-clicks an opportunity card on the Kanban board, open a modal with its details so they can edit it.” Noca AI will handle the rest!

Previous
Next