Create and Configure a Product Configurator Flow

Learning Objectives

After completing this unit, you’ll be able to:

• Define what a product configurator flow is.
  
• Sign up for a special Developer Edition org for Revenue Cloud.
  
• Customize the default product configurator flow.
  
• Create a product configuration flow.
  
• Assign product and product classification to product configuration flow.
  

Product Configurator Flow Overview

So far, you’ve explored Product Configurator. Now, use a product configurator flow to customize product selection for users.

The Default Product Configurator Flow template helps you get started quickly. This out-of-the-box flow includes essential UI components such as Product Header, Product Attributes, and Pricing Summary. Sales reps can use it to build accurate product configurations right away.

Let’s break down the key parts of the flow.

The Data Manager component (1) is the bridge between the configurator UI and the underlying data. It maps context data like products and attributes between the flow and Salesforce records. The runtime configurator UI (2) has sections for the header, product attributes, option groups, and messages. These are visible to the user and can be styled to match your company’s branding and layout preferences. You can configure components for different UI styles through the properties panel (3). For example, the Product Attributes component highlighted in the runtime configurator UI includes a property called Attribute Display Columns. By default, it’s set to 1 (single column), but you can change it to 2 or 3 to display attributes in multiple columns.

The default Product Configurator Flow is a great starting point, but in the real world, your business might require customization.

Take SmartBytes for example. The team wants to enhance their product configurator interface. Currently, sales reps work with a single-column layout for the product selection process. Reps want a cleaner side-by-side layout to speed things up.

Joey, a product rules designer, is ready to take the next big step and customize the layout to show product attributes in two columns. Follow along as he sets up a custom flow, assigns it to a product, and previews the final experience. But first, set up your own Salesforce org.

Sign Up for a Developer Edition Org with Revenue Cloud

To complete this module, you need a special Developer Edition org that contains Revenue Cloud and our sample data. Get the free Developer Edition and connect it to Trailhead now so you can complete the challenges in this module. Note that this Developer Edition is designed to work with the challenges in this badge, and may not work for other badges. Always check that you’re using the Trailhead Playground or the special Developer Edition org that we recommend.

1. Sign up for a free Revenue Cloud Developer Edition org.
   
2. Fill out the form.
   

• For Email, enter an active email address.
  
• For Username, enter a username that looks like an email address and is unique, but it doesn’t need to be a valid email account (for example, yourname@example.com).
  

3. After you fill out the form, click Sign me up. A confirmation message appears.
   
4. When you receive the activation email (this might take a few minutes), open it and click Verify Account.
   
5. Complete your registration by setting your password and answering the challenge question. Tip: Save your username, password, and login URL in a secure place—such as a password manager—for easy access later.
   
6. You’re logged in to your Developer Edition org.
   

Now connect your new Developer Edition org to Trailhead.

1. Make sure you’re logged in to your Trailhead account.
   
2. In the Challenge section at the bottom of this page, click the playground name and then click Connect Org.
   
3. On the login screen, enter the username and password for the Developer Edition you just set up.
   
4. On the Allow Access? screen, click Allow.
   
5. On the Want to connect this org for hands-on challenges? screen, click Yes! Save it. You’re redirected back this page and ready to use your new Developer Edition org to earn the badge.
   

Build the Index

Now that your org is connected, you must take a few more steps to make sure it’s ready to use.

1. From the App Launcher (), find and select Product Catalog Management.
   
2. On the Product Catalog Management home page, click the Index and Search Configuration tile.
   
   • Note: An error message may appear, because the system is trying to fetch the latest index snapshot details. An index build doesn’t exist yet though, because your Developer Edition is a brand new org. In a real-world implementation, your system would have a snapshot details to gather. So for the purposes of this challenge, just close the banner and go to the next step.
     
3. Click Rebuild Index, select Full Index Rebuild, and click Rebuild. This generates the full index.
   
4. Wait for the index rebuild to complete before starting the next set of steps. To check whether the rebuild has finished, refresh the page every so often. The Rebuild History shows a status of Completed once finished.
   

Enable Pricing

Once the index rebuild has completed, you’re ready to sync the pricing data.

1. From Setup, in the Quick Find box, search for and select Salesforce Pricing Setup.
   
2. In the Sync Pricing Data section, click Sync.
   

3. Confirm that you want to sync your org.
   

The pricing data sync takes a few minutes to complete, but you don’t have to wait. Move on to the next set of steps.

Refresh the Decision Tables

Next, refresh the Product Qualification and Product Disqualification decision tables in your org.

1. From Setup, in the Quick Find box, search for and select Decision Tables.
   
2. From the list of decision tables, click Product Disqualification.
   
3. Click the Refresh button.
   

4. Similarly, refresh the Product Qualification decision table.
   

You’re all set to start using your Developer Edition org to work with Product Configurator.

Clone the Default Flow

Joey starts by cloning and customizing the default product configurator flow to show product attributes in a neat, two-column layout. Follow the steps in your own org.

1. From Setup, in the Quick Find box, search for and select Flows.
   
2. From the available flows, click Default Product Configurator Flow to launch it in Flow Builder. It’s not possible to change the default product configurator flow, so you’ll save it as a new flow.
   
3. Click Save As New Flow, and add the details:
   

• Flow Label: SmartBytes Product Configurator Flow
• Flow API Name is auto-populated.
  

4. Click Save.
   
5. Click the S01_ProductConfiguratorUI element to open it in edit mode.
   
6. Select the Product Configurator Product Attributes S01_AttributesPanel component. The associated properties open in the right panel.
   
7. On the Properties tab, change the Attribute Display Columns value from 1 to 2.
   
8. Click Done to close edit mode.
   
9. Click Save and then Activate.
   

Joey now has a custom flow that will show product attributes in two columns. Now he’s ready to connect the new custom flow to a product configuration flow.

Create a Product Configuration Flow

You need a Product Configuration Flow to connect your flow template and the products it applies to. Joey sets it up using the flow API name created in the last set of steps. Follow along in your Developer Edition org.

1. From the App Launcher (), find and select Product Configuration Flows.
   
2. Click New to create a new record, and specify the details:
   

• Flow Identifier: SmartBytes_Product_Configurator_Flow
• Status: Active
  

3. Save your changes.
   

This creates a 1:1 mapping between your flow definition, which is the custom flow you created, and the configuration logic that you’ll assign to products or classifications.

Assign Products to the Product Configuration Flow

Now that Joey has his configuration flow ready, he has to assign it to a product–in this case, a laptop.

1. From the App Launcher (), find and select Products.
   
2. From the list view dropdown, select All Products.
   
3. Find and select Laptop. The Laptop Product record opens.
   
4. From the App Launcher (), find and select Product Configuration Flows.
   
5. Click the Product Configuration Flow record that you created in the previous set of steps.
   
6. Go to the Related tab, and click New on Product Configuration Flow Assignment. You can assign a product classification or product to the flow.
   
7. In the Product field, search for and select Laptop.
   
8. Save your work.
   

Nice! The flow assignment is successfully created, with the configuration linked to the Laptop product. Now, sales reps will see the custom UI when they configure the product.

Preview the Configuration Template

Before rolling it out to the sales team, Joey wants to preview how the configurator looks in action.

1. From the App Launcher (), find and select Products.
   
2. From the list view dropdown, select All Products.
   
3. Find and click Laptop, which you assigned the product configurator flow to earlier. The Laptop product record page opens.
   
4. From the quick action pulldown menu, select Preview.
   
   • In the Preview Laptop modal, notice the product attributes arranged into tabs for Display, Graphics, and other categories. The Display tab shows the two-column layout you configured earlier. The other tabs also have this layout but you can’t see it because each of those tabs have just a single field.
     
5. Close the preview.
   

With everything in place, Joey is excited to share this cleaner configurator experience with the sales team and hear all about the super-smooth quoting process later on.

Next Steps

In this unit, you created a custom layout for product configuration and assigned it to a product. Now it’s time to do the hands-on challenge below to create a new flow. Then in the next unit, you explore configuration rules, the logic that powers smart product selection.

Resources

• Salesforce Help: Explore the Product Configurator Flow