Creating and Managing Custom Components in CodeStudio

This document provides a comprehensive overview of the process to create, register, and manage custom components in CodeStudio. Leveraging Salesforce's Lightning components, you can enhance CodeStudio functionality by integrating your own LWC or Aura components into the sidebar, thereby improving user engagement or executing custom logic seamlessly.

Step 1

Begin by defining the custom component setting. In Salesforce, there are two programming models for building Lightning components: Lightning Web Components (LWC) and Aura components.

Step 2

Both models can coexist within an application and interoperate with one another. The CPQX Extensibility Framework allows you to add your own LWC or Aura component to the CodeStudio sidebar to enhance usability or create a headless component to run your custom logic without displaying a user interface. The image below illustrates the CodeStudio sidebar featuring the custom component.

Step 3

This specific component is designed to add quote-level discounts. By clicking on the icon or image, you can apply these quote-level discounts and then click on "Apply Discount."

Step 4

To customize the sidebar, follow three key steps. First, navigate to the component settings by selecting "ZORAconfig" and then choosing "CodeStudio Settings."

Step 5

Select "Custom Component Settings." Here, you will find two tabs: "Manage Existing Components" and "Register a New Component." The process involves three main steps: first, create your component; then, register it here; and finally, manage your component in this section. Let's walk through each step.

Step 6

Step one involves creating your component. You have the option to build either LWC or Aura components. Salesforce provides documentation on how to create both.

Step 7

When creating a component, ensure that you declare the following attributes as GLOBAL: pageState, metricState, quoteState, and textTitle. In step two, you need to register and dispatch events after creating your component.

Step 8

Dispatching events with appropriate parameters ensures that data changes persist within CodeStudio. Now, let's return to "Manage Existing Components" to examine how this is configured. Here, you can see this is an LWC component.

Step 9

The component event action is set to "updateProduct," and it is marked as ACTIVE with the title text "Quote Level Discount." An image represents this component. When defining a component, you can designate it as a headless component and provide a sort order to control its appearance in the sidebar.

Step 10

Add a title, text, and an image resource. Ensure it is set to ACTIVE, and then click "Create." If multiple custom components are registered, you can change the display order from here.

Step 11

Enter a number in the Order column. Lower values move the components higher in the list. Once saved, the sidebar will update to reflect your new order.

Step 12

That concludes the process of using the CPQX Extensibility Framework to create, register, and manage custom components in CodeStudio. This feature allows you to extend CodeStudio with business-specific tools, streamline workflows, and execute background logic with headless components.