Getting started with the Salesforce CPQ Quote Calculator Plugin VSCode Extension

Austin Turner
Photo by rawpixel on Unsplash

Working with the Salesforce CPQ Quote Calculator Plugin (QCP) can be a very painful process because of the architecture of the plugin. I was frustrated each time I needed to write or maintain a QCP, which prompted me to build an extension for VSCode to provide a painless developer experience.

This is how I feel about the developer experience in regards to QCP:

The Good

  1. We get to use ES6!
  2. The QCP provides a lot of flexibility in managing pricing and fields during the quote calculation sequence.

The Bad

  1. Debugging can only be done by logging to the console.
  2. The quoteModel and quoteLineModel have circular references and can not be stringified (would be useful in some cases for debugging purposes).

The Ugly

  1. The code is stored as text on a database record…. This reminds me of editing html in notepad. I never want to go back to that place.
  2. Developer Workflow:
    1. Copy / paste code from editor to SBQQ__Code__c
    2. Refresh the QLE
    3. Realize you made a mistake
    4. Make code change
    5. Copy / paste code from editor to SBQQ__Code__c — attempt to save, and get a “this record has been modified” error
    6. Refresh the page
    7. paste code to SBQQ__Code__c again, save
    8. Refresh QLE

These are the goals that I started work on the Extension:

  1. Ability to use an IDE for development without the need to copy/paste code from Salesforce to my IDE.
  2. Ability to get some benefits of type completion to catch code syntax errors.
  3. Ability to easily commit code to source control.
  4. Ability to backup remote or local files to have a reference point at any point in the process.
  5. Initialize a new project with a good stock QCP file without having to search the documentation or referring to prior projects.
  6. Avoid performing any manual steps on Salesforce for interacting with the Custom Scripts object.
  7. Compare my local files with remote files.

Getting Started

Prerequisites:

  • Salesforce Sandbox or Developer org with Salesforce CPQ installed
  • Salesforce API token or IP addresses whitelisted for your assigned profile
  • Products configured to work with Salesforce CPQ
  • VSCode

To get started, open VSCode and search the extension marketplace for Salesforce CPQ or go here to install the extension.

After that, you will need to create an empty folder somewhere on your computer and open the folder with VSCode. If you don’t have a project open, the plugin won’t work.

Initialize Project

Open the command pallet cmd+shift+p or ctrl+shift+p and type in QCP to see a list of the available commands.

Choose Initialize Project, choose your org type and enter your credentials.

Extension Commands

After you initialize your project, make sure that your credentials are validated.

Start with Example Files

To get started, choose the command SFDC QCP: Create example QCP files in your project. There are a number of example files that can be added to your project. These will not be added to Salesforce unless you explicitly push them.

Important: Some of the Example files were copied directly from the Salesforce CPQ Documentation and don’t follow JavaScript best practices (e.x. using = = instead of = = =), so you should not consider all the examples as good coding practices. There is a link at the top of any examples that were sourced from the Salesforce CPQ Documentation.

Example files available for selection

Project Structure

All QCP files are stored in the /src folder and are stored with a .ts file extension.

Important: Even though the files are stored as .ts, there is no compilation step and the files must be valid javascript files. Using a typescript file extension allows VSCode to provide much better intellisense and catch common syntax errors.

The .qcp folder houses a configuration file

In the root directory, some basic files have been created that you should have in every project. If you have not used prettier, you may want to install the VSCode extension.

Pushing Your First Change

Open the command palette and type in push and choose the command SFDC QCP: Push specific files to Salesforce.

Then choose one of the files you would like to push and press ok or press enter.

Choosing a file to push to Salesforce

Make sure that your file was successfully pushed to Salesforce.

BOOM!

Now you can go to Salesforce and look at the record!

When you push a file to Salesforce, the following will happen:

File was created locally

  1. The filename is used to query Salesforce
  2. If a record with the same name exists then the record on Salesforce will be updated with your code.
  3. If a record is not found, a new record will be created

File was pulled from Salesforce or has already been pushed

  1. In /.qcp/qcp-config.json the files[] is searched when the filename is found, we know which Salesforce record to update.

Pulling Records from Salesforce

To pull one or all records from Salesforce, choose either SFDC QCP: Pull all QCP records from Salesforce or SFDC QCP: Pull remote records from Salesforce then, depending on which option you chose, choose the file you would like to pull down.

Important: Even though the “Name” field on Salesforce is not required to be unique, it is important that you do not have records with the same Name to ensure that the correct files are updated. Also, It is also best to use filesafe names, but this is not a strict requirement.

Choosing a remote file

Comparing Records and Files

To compare local files with the remote version of the code, a SFDC QCP: Compare records and show differences. This will provide some additional options. Choose Compare a local file and any remote record, then choose a remote file to compare.

Comparing a local file with the what is on Salesforce

Backing up Records or Files

The extension provides some convenience shortcuts for backing up files. Since we cannot easily use source control to deploy records between environments, it is common that you may want to create a snapshot of what is in Salesforce right now, or you might want to backup the current state before making major changes.

Backing up files copies all files to directories outside of the /src as a place to store snapshots at a point in time.

From the menu, choose SFDC QCP: Backup local or remote files and you can choose to backup local files or to query all the files from Salesforce and copy into a backup folder. The folder will be named with today’s date and will increment if a folder with that name already exists.

Conclusion

Working with QCP is still a pain, but now some better tooling exists. I would love to hear your thoughts and feedback on the tool! Make sure you checkout the Readme on the VSCode Marketplace for additional information not covered here!

Happy coding!

Austin Turner

Written by

Full stack JavaScript/TypeScript engineer & Salesforce.com soldier

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade