Understanding and Using Smart Component Builder

Overview

Smart Component Builder is an AI-powered tool that enables Practifi Administrators to create and edit custom components using natural language. Instead of manually writing JSON configurations, you can describe what you want in plain English, and our AI assistant will generate the appropriate component configuration.

This article explains how Smart Component Builder works, how to access it, and how to use its capabilities to build and modify data tables and tiles without deep technical knowledge of Practifi components or JSON. The tool provides a conversational interface with a live preview panel that displays actual data from your Practifi organization, so you can see your changes in real time as you refine requirements.

For usage tips and troubleshooting recommendations, see Smart Component Builder Best Practices. 

Please note: Smart Component Builder is part of the Admin Intelligence add-on. Contact your Client Success Manager for more information about enabling this feature in your organization.

• What It Does
• How It Works
• Accessing Smart Component Builder
  • From the Settings App
  • From Edit Icons on Existing Components
  • From Add Icons to Create New Components
• Understanding the Layout
  • Chat Interface
  • Preview Panel
  • Conversation Flow
• Creating Components from Scratch
  • Example Conversation
• Editing or Adding to Existing Layouts
• Using the Manual JSON Editor
• Working with Cloned Components
• Restoring Original Configurations
• Adding Components to Record Pages
  • Understanding Component Relationships
  • Adding Table Components to Record Pages
  • Adding Table Components to App Pages
    • Using an Existing Table Viewer
    • Example: Creating a Relationship Between a Table Viewer and a Table
    • Creating a New Table Viewer
  • Adding Tile Components
    • Using an Existing Tile Row
    • Creating a New Tile Row

---

What It Does

Smart Component Builder represents a significant leap forward in Practifi customization. Previously, building custom components required deep knowledge of JSON syntax. This created a barrier for administrators who wanted to customize their team’s experience but lacked technical expertise.

With Smart Component Builder, you can describe what you want in plain language, and the system automatically generates the configuration. This capability provides several key benefits:

• Little to no JSON knowledge required. Describe what you want in plain English, and the AI assistant handles all JSON generation.
• Faster development. Build components in minutes, not hours. Changes that previously required extensive manual configuration can now be completed through conversation.
• Guided experience. The AI assistant asks clarifying questions and suggests best practices to ensure you build exactly what you need.
• Live preview with real data. The preview panel shows your component with actual organization data as you build it, allowing you to see filters, columns, and actions working in real time before saving.
• Error prevention. Built-in validation ensures components are correctly structured, reducing trial-and-error.
• Safe editing with automatic protection. When editing Practifi’s standard (packaged) components, the system automatically creates a clone to preserve your customizations during upgrades, protecting your work without requiring manual version management.

Currently, Smart Component Builder supports creating and editing data tables and tiles, with more components planned for future releases.

---

How It Works

Smart Component Builder uses AI to translate your natural-language descriptions into JSON configurations that power Practifi components. Rather than requiring you to know relationship structures or configuration syntax up front, the system guides you through a step-by-step conversation.

The interface features a split-panel design with the AI chat interface on the left and a live preview on the right. As you describe what you want and make changes through conversation, the preview updates in real time, showing exactly what your component will look like.

This conversational approach means you don’t need to include all requirements in a single prompt. Instead, you can add filters, columns, actions, and formatting iteratively. The system asks clarifying questions to ensure it builds exactly what you need, and you can make adjustments throughout the process.

For administrators who want to understand or fine-tune the underlying configuration, Smart Component Builder includes a built-in JSON editor with formatting, validation, and error detection. This provides a learning pathway for building deeper platform knowledge while maintaining the convenience of the conversational interface.

---

Accessing Smart Component Builder

Practifi Administrators can access Smart Component Builder in multiple locations throughout the platform:

From the Settings App

1. Click the App Launcher icon and select the Settings app.

   

2. Click the caret next to the Navigation menu and select Smart Component Builder from the list.

   

Please note: For existing Practifi organizations, Smart Component Builder appears as the last item in the navigation list to preserve any customizations you may have made to the Settings app navigation.

From Edit Icons on Existing Components

1. Navigate to any page containing a tile or data table you want to modify.

2. To edit a table, click the pencil icon in the toolbar to open Smart Component Builder in a new tab.

   

3. To edit a tile, hover over it and click the pencil icon to open Smart Component Builder in a new tab.

   

Alternatively, you can navigate to a Component record’s detail page and click the Edit in Builder quick action button.

From Add Icons to Create New Components

1. Navigate to a tile row or table viewer where you want to add a new component.

2. To add a new tile to a tile row, click the + button to open Smart Component Builder in a new tab.

   

3. From a page where a data table is displayed, click the + button in the side panel to open Smart Component Builder in a new tab.

   

The interface opens in a dedicated workspace regardless of which entry point you use, providing consistent access to all Smart Component Builder capabilities.

---

Understanding the Layout

The Smart Component Builder interface provides an intuitive workspace for creating and editing components through conversation.

Chat Interface

The left-hand panel contains the conversational AI assistant. Type your requirements in natural language, describing what data you want the component to display.

The AI assistant guides you through the building process, asking clarifying questions when needed. For example, if you request a table showing a client’s tasks, the system might ask which fields you want to include, whether you need filters, or how you want the data sorted.

Preview Panel

The preview panel on the right displays a live preview of your component as you build it. This preview updates in real time as you refine requirements through conversation, allowing you to see exactly what you’re creating before saving.

The preview panel shows:

• A live preview with real data from your Practifi organization
• Interactive filters that you can test
• A Record Variable selector for context-dependent components
• Column arrangement and formatting
• Functional action buttons and row actions

Tip: Select a specific record in the Record Variable or User Variable lookup field to see how the component will appear on that record’s page. This is especially useful when building components with filters based on the current record context.

Conversation Flow

Rather than requiring all specifications up front, Smart Component Builder supports iterative building:

1. Start with a basic description of what you want.
2. Consult the component preview.
3. Add or adjust requirements by chatting with the AI assistant.
4. Continue refining until the component matches your needs.

For example, you might start by saying, “Create a table showing all active deals for this client.” After reviewing the preview, you could add, “Add a filter for deals over $100,000,” or “Include a column showing the deal owner.”

The system maintains context throughout the conversation, understanding references to previous exchanges and building on earlier requirements.

Keyboard Shortcuts

• <ENTER>: Send message
• <SHIFT>+<ENTER>: New line in message

---

Creating Components from Scratch

When building a new component from scratch, Smart Component Builder walks you through the process conversationally.

1. Access Smart Component Builder in one of the following ways:

   • Clicking the + button on a tile row or table selector.

   

   • In the Settings app, click the caret next to the Navigation menu, then select Smart Component Builder from the list.

     

2. In the chat interface, describe what you want to create.

   

3. Review the live preview on the right side of the screen. If you're adding a tile, it's highlighted in the preview.

   

4. Refine your requirements by adding more details through additional messages.
5. Continue the conversation until the component matches your needs. You can even ask the AI to change the tile’s position in the row.
6. Click Save to create the component.

Example Conversation

You: “Create a table showing all open tasks for this household, sorted by due date.”

Smart Component Builder: “I’ve created a table with open tasks sorted by due date. Would you like to add any specific columns, filters, or actions?”

You: “Add columns for task name, due date, assigned to, and status. Also, add a filter for high-priority tasks.”

Smart Component Builder: “I’ve added those columns and a priority filter. The preview now shows these additions. Anything else you’d like to adjust?”

You: “Add an action to mark tasks as complete.”

Smart Component Builder: “Done. The table now includes a complete action. Ready to save?"

Editing or Adding Components to Existing Layouts

When you use Smart Component Builder from edit icons on existing components or add icons on tile rows and table selectors, the system can automatically place your new or modified component in the appropriate location. These components appear immediately without requiring Lightning App Builder configuration.

However, if you want the component to appear on a record page, you’ll need to add it yourself using Lightning App Builder. For detailed steps, see the Adding Components to Record Pages section below.

Understanding the difference between these scenarios helps you know when additional configuration is required. If you’re building a new component from the Settings app or using Smart Component Builder in a standalone context, plan to use Lightning App Builder for final placement. If you’re working from edit or add icons within your Practifi interface, the component placement is typically handled automatically.

---

Editing Existing Components

Smart Component Builder provides powerful capabilities for modifying existing tiles and data tables throughout Practifi.

1. Navigate to the tile or table you want to edit.

2. Click the edit icon on the component to open it in Smart Component Builder.

   

3. Describe the changes you want to make in the chat interface.
4. Review the updated preview to verify the changes.
5. Continue refining through conversation as needed.
6. Click Save to apply your changes.

When you edit a component using Smart Component Builder, your changes appear immediately across all pages where that component is used. You don’t need to update multiple locations or repeat the configuration process.

Example Editing Scenarios

• Adding a New Column: “Add a column showing the client’s total AUM to this table.”
• Applying a New Filter: “Filter this table to show only deals that closed in the last 30 days.”
• Adjusting Sort Order: “Sort this table by deal value in descending order instead of by close date.”
• Modifying Actions: “Add a button to create a new task for the selected record.”

The conversational approach makes it easy to experiment with different configurations. If a change doesn’t work as expected, you can refine it through additional messages or click the Restore Original button to revert to the starting configuration.

---

Using the Manual JSON Editor

For administrators who want to make quick technical adjustments or learn about the underlying component structure, Smart Component Builder includes a built-in Config File view for direct code editing.

Accessing the JSON File

While working in Smart Component Builder, click the Config File button in the header. To switch back to the preview, click the Component button.

Config File Capabilities

The Config File view provides several technical features:

• View raw JSON configuration. See the exact JSON structure that defines your component, making it easier to understand how components are configured.
• Direct editing for experienced users. If you know exactly what you want to change at the code level, you can make quick adjustments without going through the conversational interface. This is useful for fine-grained control over component configuration.
• Syntax validation. The Config File view helps ensure your manual edits maintain proper JSON structure.
• Learning opportunity. By switching between the conversational interface and the Config File view, you can see how natural language requirements translate into technical configuration, building your understanding of Practifi’s component structure.

Please note: The Config File view is an advanced feature intended for administrators who want to make precise technical adjustments or learn about component configuration. Most administrators can accomplish their goals using only the conversational interface.

---

Working with Cloned Components

When you edit Practifi’s standard components and save the new version, Smart Component Builder automatically creates a clone to preserve your customizations and prevent override during upgrades.

How Cloning Works

Practifi’s packaged components are protected and cannot be directly modified. When you open a packaged component in Smart Component Builder, make changes, and save them, the system:

1. Creates a copy of the component with your modifications.
2. Saves your modified version with the original name.
3. Renames the original packaged component by adding ”- ORIGINAL” to the end of its name.
4. Updates component relationships automatically so your customized version appears in place of the original.

Automatic cloning occurs when you click Save. The original component remains available as a reference with the “- ORIGINAL” suffix.

Benefits of Automatic Cloning

Upgrade protection. Your customizations remain intact when Practifi releases updates to standard components. Future upgrades will update the “- ORIGINAL” version without affecting your customized component.

Safe experimentation. You can modify standard components without risk of breaking core functionality or losing access to the original configuration.

Reference preservation. The original component with the “- ORIGINAL” suffix remains available, allowing you to compare your changes or revert if needed.

Please note: Only Practifi’s standard (packaged) components trigger automatic cloning. When you edit custom components you’ve previously created, Smart Component Builder modifies the existing component directly since there’s no original version to preserve.

---

Restoring Original Configurations

If you’ve customized a packaged component and want to revert to the original Practifi version, you can restore the original configuration.

Restoring a Packaged Component

1. Locate the original component, which will have “- ORIGINAL” added to the end of its name.
2. Update your Lightning pages to reference the original component (the one ending with” - ORIGINAL”) instead of your customized version.
3. Delete or archive your custom version if it’s no longer needed.

This process reverts your pages to use Practifi’s standard component configuration, which will receive updates during future Practifi releases.

Please note: Before deleting a customized component, verify that no Lightning pages are still using it. Pages referencing deleted components will show an error or empty state where the component was located.

---

Adding Components to Record Pages

Components created from scratch in Smart Component Builder are saved but not automatically placed on record pages. To make these components visible to users, you need to add them to appropriate pages using Salesforce's Lightning App Builder.

The deployment process differs depending on the component type (table or tile) and the page type (record page or app page). This section explains each scenario.

Understanding Component Relationships

Components created in Smart Component Builder use a parent-child relationship structure:

• Table components can be added directly to Record Pages, or they can be related to a Table Viewer parent component on app pages
• Tile components must always be related to a Tile Row parent component, which can appear on either Record Pages or app pages

Adding Table Components to Record Pages

These steps assume you have already created your table component using Smart Component Builder and it has been saved.

1. On the page where you want to add the table, click the gear icon, then select Edit Page. The Lightning App Builder opens in a new tab.

   

2. In the left panel under Components > Custom - Managed, drag and drop the Practifi - Datatable component to the desired location on the page layout.

   

3. In the component properties panel on the right, set the Config Name to the name of your saved table component.

   

4. Click Save to apply the changes.
5. Click Activate if prompted to activate the page after modifications.
6. Navigate to a record of that type and verify the table displays correctly with the expected data and functionality.

Please note: If your changes don’t appear after saving, go to Salesforce Setup and clear the Platform Cache, then refresh/reload the page. This may be required from time to time to see the updated component configuration.

Adding Table Components to App Pages

On app pages, table components must be related to a Table Viewer parent component. You can either use an existing Table Viewer or create a new one.

Using an Existing Table Viewer

If the app page already has a Table Viewer component where you want your new table to appear:

1. Identify the app page and locate the existing Table Viewer where the table should appear.
2. Create a relationship between the Table Viewer (parent) and your table component (child) by configuring the component relationships in your table component’s JSON configuration. (See the example below.)
3. Ensure the relationship keys/IDs match your framework’s requirements.
4. Save the configuration and refresh the app page.
5. Verify that the table appears under the selected Table Viewer and displays the expected data and behavior.

Example: Creating a Relationship Between a Table Viewer and a Table

Let’s say you want to create a relationship between a new table component and the Directory page in the Advisor app. You’d do the following:

1. In the Settings app, click the caret next to the Navigation menu, then select the Components page (or click the App Launcher, then search for and select Components).

   

2. On the Components page, click the list view selector and change the view to Tables.

   

3. Click the hyperlinked Advisor - Directory component name to open it.

   

4. On the Advisor - Directory record page, click the Related to view the existing child components for this table viewer.

   

5. To create a new relationship, click the New Button in the Component Relations (Parent) related list.

   

6.  On the New Component Relation screen, use the Child field to search for and select your table component.

   

7. Click Save.

Creating a New Table Viewer

If you need to create a new Table Viewer component on an app page:

1. Create a new Table Viewer component configuration in accordance with your organization’s standard practices.
2. Create a relationship between the new Table Viewer (parent) and your table component (child).
3. In Salesforce Setup, use the Quick Find search to search for and select Lightning App Builder.

4. From the Lightning App Builder page, click the New button. The Lightning App Builder opens in a new tab.

   

5. In the Create a new Lightning page window, select App Page, then click Next.

   

6. Enter a name for the new app page in the Label field, then click Next.

   

7. On the layout selection screen, scroll down and select the Practifi App page - Collapsible Two Regions custom page layout, then click Done.

   

8. In the Lightning App Builder, add the required components:
   • On the left region, drag and drop the Practifi - Datatable (Control panel) component
   • On the right region, drag and drop the Practifi - Datatable (Reactive) component
   • Directly below the Control panel in the left region, drag and drop the Practifi - Filter Set (Reactive) component

9. In the properties of the Practifi - Datatable (Control panel) component, set the Config Name to the name of your Table Viewer component.

   

10. Click Save, then click Activate to activate the app page.
11. Assign the app page based on your deployment requirements (as an app default or an organization default).
12. Open the app page and verify that:
    • The control panel, reactive table, and filter set all appear in the correct regions.
    • Interactions in the Control panel and Filter Set drive the reactive data table as expected.
13. Save and reload the app page, then confirm that:
    • The table appears under the new Table Viewer.
    • The data loads and interactions work correctly.

Adding Tile Components

Tile components must always be related to a Tile Row parent component. The Tile Row can appear on either Record Pages or app pages. You can use an existing Tile Row or create a new one.

Using an Existing Tile Row

1. Identify the Record Page or app page where you want the tile to appear.
2. Locate the existing Tile Row component configuration on that page.
3. Create a relationship between the Tile Row (parent) and your tile component (child) by configuring the component relationships.
4. Save the configuration and refresh the page.
5. Verify that the tile appears in the correct row and displays as expected.

Creating a New Tile Row

1. Create a new Tile Row component configuration following your organization’s standard layout and style conventions.
2. Create relationships between the new Tile Row (parent) and each tile component (child) you want to appear in the row.
3. Navigate to Setup and open Lightning App Builder.
4. Open the Home page or the record page where you want the tiles to appear.

5. In the left panel, locate the Practifi - Tile Row component.

   

6. Drag the Practifi - Tile Row component onto the page where you want the tiles to appear.
7. In the component properties, set the Config property to the name of your Tile Row component.
8. Click Save to apply the changes.
9. Refresh the page and verify that:
   • The Tile Row appears in the correct location
   • All related tiles render correctly within the row
   • Tile data displays as expected