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: Generating Data Tables with Prompts

Data tables are essential for displaying structured information, but building them manually can be tedious. In this lesson, you’ll learn how to use Noca AI’s prompt builder to instantly generate fully functional data tables equipped with filtering, sorting, and pagination using natural language.

Step 1: Access the Prompt Builder

To start building your app using generative AI, navigate to the main editor canvas.

  1. Open your Noca Web project workspace.

  2. Locate the blank prompt text box (typically found at the bottom or center of your empty canvas page).

Step 2: Write a Descriptive Table Prompt

The clearer your instructions, the better the initial generated UI will be. State exactly what columns or behaviors you need.

  1. Click into the prompt box and describe your target interface.

  2. Example used in the video: > "I want a single page app with a table of invoices, include filtering, sorting, and pagination."

  3. Hit enter or click the submit arrow to send the request to Noca AI.

Step 3: Refine the Design with AI Follow-up Questions

Noca AI will analyze your prompt and ask clarifying questions to ensure the visual style matches your expectations.

  1. Review the question prompted by the AI regarding formatting and layout preferences.

  2. Provide a descriptive answer regarding style. (e.g., “I want the whole page to be clean and minimal.”)

  3. Click send and watch the interface build itself in real time.

Step 4: Explore the Built-in Table Features

Once the generation is complete, interact with the UI to verify that all standard components are present:

  • Global Search & Status Filters: Look at the top of the table to find functional text search boxes and status dropdown menus.

  • Column Sorting: Click on individual column headers (like Date, Invoice Number, or Amount) to instantly sort records in ascending or descending order.

  • Pagination Controls: Navigate between different pages of data using the controls at the bottom right of the component.

Step 5: Preparing for Real Data Sources

By default, the newly generated table populates with high-quality mock data to show you how the design looks with real information.

  1. Click on the generated table to view its component parameters in the right sidebar.

  2. To make it operational, you will eventually create an On Load flow event.

  3. Map your live data array (such as a Salesforce Read action query result) directly into the table’s data field to replace the mock rows with real-time updates.

💡 Pro-Tip: Don’t stop at viewing data! You can extend your prompt to add operational control columns. For instance, try asking the prompt builder: “Add an actions column to each row with a ‘View Details’ button” to instantly expand your table’s functional capabilities.

Previous
Next