Visual Studio Code For Salesforce

If you are working with Salesforce Commerce Cloud, then you know that before you start, you need to choose the right editor. There is no right or wrong when it comes to editors. You can choose editors based on your own preferences. There are, however, some characteristics of the editors you should take into account before you make your decision. Also, new tools for development are being launched almost every day, so you also need to see how these tools can help you. For the development in SFCC, I prefer Visual Studio Code or Eclipse. In this tutorial, I will show you how to setup VSC for Salesforce Commerce Cloud development.

If you are building storm from source, developing new features, or otherwise hacking storm source code, then dev@storm.apache.org is more appropriate. If you are committers and/or PMCs, or contributors looking for following up and participating development of Storm, then you would want to also subscribe issues@storm.apache.org in addition to. Download Visual Studio Code Install the Salesforce Extensions. Code Builder (coming soon) Code Builder is a browser-based version of Salesforce Extensions, with everything installed and pre-configured for you. It's provides all the goodness of the desktop experience, but provides you the flexibility to work anywhere, from any computer. Hello Trailblazers,In this video, we're going to learn how we can setup vscode for salesforce development. I am going to tell you how you can setup vscode an.

Why Visual Studio Code for SFCC development?

VSC is one of the most popular editors today. It is an open-source editor which makes it quite attractive to developers, built in git client and it's lightweight. We all like this and need this. However, from my experience, the main advantage of VSC over Eclipse (and other editors) is speed. VSC has faster cartridge uploading and a better templating engine, which is more attractive to most developers. VSC can be easily extended with extensions and it provides some cool and effective features, such as IntelliSense that analyzes code and the semantics of what you are inputting. To sum up, it's built to save you time and help you be more effective. Now, let's jump to the installation process.

Visual Studio Code download and setup

The first step is to download the Visual Studio Code. Go to the official VSC website, and download the latest version for your system. VSC is supported for Windows, Mac and Linux.

After downloading the installer, simply follow the instructions to install VSC on your machine. Once your installation is done, you will see the following screen.

And you are ready to go on.

Install & configure Prophet Debugger

There are two ways to install Prophet Debugger. I will show you both of them, and you can choose the one you prefer more.

1. Navigate to your extensions section in VS Code

Click on the icon marked on the screen below:

In the search section, type Prophet Debugger, and press install.

That's it!

2. Install Prophet Debugger extension from the Marketplace

The second way to install Prophet Debugger is to install it directly from the Marketplace. Go to the website and click the install button.

By pressing the button, you will be prompted with a modal which will try to launch Visual Studio Code, and then press continue.

This will launch the VS Code app, and you will land on the same page as in the first approach. Press install and you are all done. Now, let's move to Salesforce Commerce Cloud.

Just stream mac download. The Mac app – JustStream is a perfect tool to cast video files and mirror them from your desktop to your TV. This app works on all Mac computers with OS X 10.12+ and above. JustStream is a 'friendly yet advanced app' which is designed for Mac, and works to mirror your Macbook wirelessly over your local network. Well, if you want to stream through your wireless network, then the JustStream app can take care of that as well. Mirror Your Mac Display to a Smart TV, Chromecast, Apple TV or DLNA-certified devices with ease. Whenever you want to see your favorite movies on a big screen or you just want to stream a presentation so that everyone can see it better, you can turn to JustStream as your all-in-one solution to mirror the display of your Mac. Doesn't matter if the subtitles your video comes with are external or embedded - JustStream.

Adding SFCC in the mix

If you are starting a new project, you can find storefront core cartridges in the GitHub repository. There are 3 different architectures in SFCC:

• Pipelines
• Controllers
• SFRA

A few things to know about architectures

The oldest architecture is based on pipelines, and some projects are still using them.

However, more and more projects are built with Controllers or SFRA. We highly recommend SFRA as it has more advantages when compared to the old architectures.

To find Controllers and Pipelines, follow this link and to find SFRA, go to GitHub.

Before accessing repositories, you need to have the SFCC account, the xChange account and a connected GitHub account to your SFCC account. Once you got your repository setup with cartridges, you can proceed with setting up a digital server connection.

To connect your Visual studio code to SFCC sandbox, you need to create a few json configurations. First, you need to create a .vscode folder in your root directory. So, in .vscode directory, create two files in the following order:

• launch.json
• settings.json
• SFRA

In the root of your project, create another json file called dw.json.

In this json, you are setting your credentials for your sandbox instance.

In cartridge array, you can define your cartridges related to your project. This is a basic SFCC setup, so no additional cartridge is added.

If you want to automatically upload all cartridges within your project, you can simply omit cartridges attribute from dw.json configuration. By placing dw.json in the root folder of your project, prophet will automatically look through all folders and find all cartridges for you.

Code-version is a version created on your sandbox and the name can differ, so once you get your sandbox, check which version you need to use in Administration > Site Development > Code Deployment.

Note: do NOT share your dw.json file, since you will share your personal details with the third party!

To activate your prophet, connect to your sandbox and start uploading your cartridges, open up the search bar and type Prophet: Enable Upload.

A hint: To open the search bar on Windows - press ctrl + shift + p, on Mac - command + shift + p.

Once you enable the cartridge upload, you will see the similar output in your console:

Wrapping up

If you've followed the steps, you are now all set up for SFCC development.

The last thing you need to do is to check if your instance is up and running smoothly.

If you want to compare VCS and Eclipse, check out our blog post about setting up Eclipse and the advantages of the editor. Did you like the article? Share it with friends who might need some help with VSC setup. Happy coding!

This extension brings the same functionality available in the Query Editor in the Salesforce Developer Console to VS Code.

Features

• [x] SOQL Builder.
• [x] Execute SOQL Queries.
• [x] Get SOQL Query Plans.
• [x] Update, Create and Delete Records.
• [x] Add Relationship Fields.
• [x] Add Child Parent Relationship Fields.
• [x] Works with any VS Code Theme.
• [x] Works side by side with your Apex Class.
• [x] Access to Field Details, such as Name, Label, Required, Updateable, Groupable and more.
• [x] Compact to not take away the space you have available while writing code.
• [x] Works with Gitpod - https://www.gitpod.io/
• [ ] Query Storage and History.
• [ ] Aggregated functions.
• [ ] Group By.
• [ ] Having.
• [ ] Portuguese (PT-BR).
• [ ] Tooling API.
• [ ] SOSL.

Paid Features

• [x] Remove BUY PRO golden button.
• [x] Window Mode.
• [x] Desktop App (PWA).
• [x] Quickly update or add a new Query to apex using Add to Apex and Update Apex buttons.
• [x] Run multiple queries in different tabs.

I'm also selling the source code. If you are interested, send an email to allanoricilcos@outlook.com

Requirements

• sfdx-cli/7.93.1-762bca056d
• VS Code 1.54.3 -> To update your vscode go to Help -> then click on Check for Updates / Restart to Update
• MUST BE USED FROM A SFDX PROJECT
• YOU MUST NOT HAVE ANYTHING RUNNING ON PORT 5000

Issues

You can open issues here https://github.com/AllanOricil/SOQL-Editor-Issues

• Open the extension

• Click on the Buy Pro golden button

• It will open a page where you can see the available premium features

• Scroll down to the bottom of the page and click on the Buy Licenses button

• You will be redirected to the Subscription page. If it does not pick up your login credentials, it will ask you to login again. This is necessary because the Subscription and the Licenses are connected to an Account.

• Choose your Subscription Plan and the number of licenses you want to acquire. Each license can only be activated in one machine.

• Add your Debit or Credit Card Details.

• Click on the Pay button and wait for the Success message.

• After that you should receive an email with the license keys and instructions on how to activate a license.

• Inside the app, one the account page you can manage all your subscriptions and licenses. You can choose to cancel your subscription, and activate/deactivate licenses.

Obs: The payment system is implemented using Stripe Elements. You can read more about it here https://stripe.com/en-ie/payments/elements

• Open VS Code and wait the extension's activation message

• Go to https://salesforcequeryeditor.com, log into the app, then click on the Go To Account button

• Click on the Add License button

• Fill the form with your license and click on the Activate button

• You will be redirected back to the account page and now the editor button will be available in the sidebar menu

This app does not send any information to an external server. Every request is performed by your machine and the data is flushed when VS Code is closed. You can also check every request that is issued by the app in the output tab if you select the Salesforce Query Editor option.

Commands (1)

Settings (14)

IMPORTANT Set a 'defaultusername' before opening the extension. IMPORTANT

How to open the Salesforce Query Editor

There are three ways to open the editor.

Using the File Explorer Context

In the file explorer, click with the right button on any Apex class to see the option SFDX: Salesforce Query Editor in the Menu.

Using the Editor Context

Open an Apex class and click with the right button anywhere in the editor context to see the option SFDX: Salesforce Query Editor in the Menu.

Using the Editor Navigation Context

Open an Apex class and click on the button shown in the image below. This button only appears when editing Apex classes.

How to add a query, or updated it, in the Apex Class without copy and paste

• Open an Apex Class

• Open the Salesforce Query editor extension

• Create/Write your query

• Click anywhere in the Apex class to set the cursor/anchor where you want to place the query.

• If the cursor/anchor is anywhere inside a soql query (inside the []), the Update Apex button appears. Use it to quickly update queries without having to copy and paste.

• If the cursor/anchor is anywhere else in the class, the Add to Apex button appears. Use it to quickly place new queries, for instance, in for loops.

How to perform CRUD Operations

• Query an Id field and at least one updateable field to show a table in edit mode and the delete button.

• Every table cell is in edit mode by default when you query the Id and one updateable field.

• If you want to discard all of your changes for a record, click on the cancel button or click anywhere in that row and then press ESC key.

• If you want to discard all changes of every record, click on the cancel button that is on the top right corner of the table.

• To create a new record click on the New Record button that is on the top right corner of the table.

• If all the changes you did for that record are saved without any errors, the record changes back to read mode and the cancel button vanishes. If the changes are not accepted by Salesforce, a modal appears with detailed informatiion about what went wrong, and the record stays on edit state. You can choose to fix the errors or cancel the changes.

How to add fields

To add fields you can either drag and drop them, or click twice on a field in case you get tired of using the first approach

You can also use the Add All button to add all the fields of the current selected SObject or Child Relationship

How to remove fields

To quickly remove a field, click on the field with the right mouse button. Or you click on the field with the left mouse button, and then select the bin icon on the top left side of the field menu.

If you click on the Clear All button that is to the left of the Add All button, you will remove all the fields for the current selected SObject or Child Relationship.

If you click on the Clear All that is above the area to drop fields, it will clear all the fields.

How to add child relationship fields

How to add filters

You can add filters by clicking on a field:

How to add Date Literals

Date literals can be added on any datetime field.

How to add ORDER BY

How to add LIMIT and OFFSET

How to add FOR VIEW, FOR UPDATE, FOR REFERENCE, ALL ROWS

These keywords only work on Apex Classes and you can add them using the query builder, but they will only appear once you've added the query on the apex class. This only works with the buttons Add to Apex and Update Apex, which are only available for paid users.

How to display the field type

You can configure the extension to show the field type in the query builder and also in the table

Query builder

Table

How to display Required and Updateable fields

When users are editing data, it is good to know if the field is updateable and required before doing any changes. So, by default, these two options are already enabled. But you can choose to turn it off if you don't like it.

How to Open Window Mode

• File -> Preferences -> Settings
• Type 'Salesforce Query Editor' in the search bar
• Look for Window Mode and click on the checkbox

Now every time you open the extension, using any of the three methods listed above, it will be opened in a separate window. This way users that have multiple monitors can have a better experience while developing as the extension will not take any space of their editor.

How to Install the App

Google Chrome

Microsoft Edge (Chromium Version)

Safari

Safari also has PWA features available. I just don't have a machine to show how to install it. If anybody could do it and then send an e-mail to me, that would be much appreciated.

Opera

Opera does not support PWA features yet.

Firefox

Mozilla has no plans for PWA features. But why are you using Firefox? You should change to any of the Chromium based browsers.

Settings

The extension has some settings that you can use to have a personalized experience. To access those settings, go to File -> Preferences -> Settings, and search for 'Salesforce Query Editor'.

Shortcuts

• ctrl + shift + o to refresh the objects for the selected environment

• ctrl + shift + e to refresh the Environments list

• ctrl + shift + q to execute the Query

• ctrl + shift + t to expand the table

• ctrl + shift + s to save the table changes

• ctrl + shift + c to cancel all the table changes

• ctrl + shift + d to export data as source tree

Release Notes

1.5.0

• The web app is now accessed through https://www.salesforcequeryeditor.com and https://app.salesforcequeryeditor.com

• The api has a proper domain https://api.salesforcequeryeditor.com now

1.4.0

• The floating Help Button can now be disabled in the Workspace Settings. The default value is 'true'

1.3.0

• Workspace Config properties names were changed from 'SOQL Editor' to 'Salesforce Query Editor'

• Webview Panel name was changed from 'SOQL Editor' to 'Salesforce Query Editor' Anydesk version 5.

• Webview Panel Icon is now using VS Code database codicon icon

• The command name was changed from 'SFDX: SOQL Editor' to 'SFDX: Salesforce Query Editor'

1.2.0

• Add floating Help button in the editor and login pages.

1.1.0

• Now you can use the extension with Gitpod - https://www.gitpod.io/

• Fix 'Display Query Builder' setting.

1.0.0

• The extension is now called Salesforce Query Editor as it brings the same functionality available in the Query Editor tab in the developer console.

• Fully refactored using Nuxt JS.

• Enables Window Mode and PWA App.

• Enables Window Mode.

• Improves Records Table.

• Add Update Apex Button.

• Enables Child Relationship queries.

• Adds Date Time Literals for DateTime fields when configuring filters.

• Adds FOR UPDATE, FOR VIEW, FOR REFERENCE, ALL ROWS. Only available when using Add to Apex or Update Apex buttons.

• Adds Copy button to copy the query to clipboard.

• It now uses the Monaco Editor for the Query Editor.

• Improves the looking and feel by adding support to many vscode themes. Now the Query Editor text also changes between a Light and Dark color when changing themes.

• Now it shows Field Details.

• Now the user can quickly change between the orgs connected to SFDX.

• Now it uses the Composition API to bundle together 20 requests to the Database.

• The App also changes its colors when the user chooses a new theme in VS Code.

0.10.0

• It introduces the 'Add All' and 'Clear All' buttons on the relationship fields modal. This enables users to quickly pick up all the fields of a certain relationship instead of adding one by one. If the user clicks on 'Add All' it will add all the fields shown in the last displayed picklist.

• It adds the Offset input.

• It changes the name of the commit changes button to 'save'.
• It adds new input types on the soql results table when the user is edditing a record. Now when the user queries a picklist field, the table displays a picklist selector with only the 'active' picklist 'labels'. And when the user queries a boolean field, the table displays a checkbox input.

• It enables the Delete Record button.
• It adds the number of results retrieved in the top left corner of the results table.

• It turns the Auto Format SOQL checkbox into a VSCode workspace/user property.

• It automatically translates the relationship fields picklists container to the left for every new level the user selects.

• It improves output messages.

• It adds shortcut keys for the refresh objects and hide/show form buttons. To use these shortcuts it is necessary to focus on the SOQL Editor.

  CTRL + R: Refresh the SObjects list

  CTRL + H: Hide/Show the form

0.9.0

• Now users can choose to display the field type in the form and in the query table header. These properties are off by default because they don't look that good yet. I will properly format it later.

Result:

0.8.0

• Now users can Export data as Source Plan.

The exported files are saved inside a folder called data/sourcetree in the root of your sfdx project.

• Now users can Add Multiple relationship fields at once. Previously it was necessary to open and close the modal to add multiple fields.

• The Limit field was moved to a better place. And the API field was properly labeled.

• The Add to Apex button was separating each Query Token by two white spaces, but now it is only one when added to an editor.
• Now there is only one Output Channel for the Webview. Previously, the extension was creating one for every time the editor was opened.

0.7.0

• Fields are now added using a checkbox input.

• Relationship fields can now be added.

• The number of relationship fields added is displayed between parenthesis.

0.6.0

• Hide the form using the soqlEditor.displayEditor setting. This setting defaults to true, so if you want to hide the editor just change it to false.

• Select the API version.

Use Visual Studio Code For Salesforce Development

• The loading animation was changed to one that it is not flickering.

0.5.0

• Removes 'attributes' from nested results.

• Now users can Edit and Commit changes. The Edit button only appears if you Query the Id field and at least one editable field.

0.4.0

• Reduce the size of the extension.

• Now you can get SOQL Query Plans. If you are not used to it, check this Article about the SOQL Query Plan Tool

Visual Studio Code Extensions For Salesforce

• Now whenever you switch orgs, the Schema builder will Reload the Sobjects List automatically:

• Now you can refresh the SObject List clicking on the Refresh Button:

• Fix the activation event related to this issue

Visual Studio Code Salesforce Retrieve Source From Org

0.3.0

Salesforce Vs Code Install

• Ids can now be clicked to open the Record Detail Page.