Salesforce Code Builder (Beta) #inSalesforce

This is a brand new innovation that just came last month (Jul '22). This is a modern, web-based development environment optimized for Salesforce that empowers teams to build how they want, from whereever they want.

This is beta version that is just try it out before its fully ready. (This product just started and is not a finished solution as of now)

We are currently using developer tools like -

Salesforce CLI which provides Command Line Interface to simplify development or automation.

Visual Code extensions for Salesforce which is a set of extensions for visual studio code.

You know that these tools take time to install on your machine.

Additionally in some organizations, permissions may be required to install these tools like you have to raise the request and get this request approved and once approved, you are allowed to install.

Overall, installing such tools may be hectic and sometimes requires some amount of CPU to run in your machine e.g., while loading visual studio in a machine - which has less RAM power (like if you have windows operating system) and you are using visual studio code, command line tool and some other tool or applications etc. all such tools utilize the CPU of your computer and its difficult or system gets slow when you don't have sufficient CPU capability.

Now, what if you can use all the above mentioned tools in the browser because in that case, you don't have to install anything when you are on the browser, you are just launching a tool and working from there. That is what is Code Builder. Now you get flexibility to code virtually on any device with just an internet connection.

Code Builder is powered by AWS so behind the scenes Amazon Web Services is used to power up the infrastructure that code builder needs. One of the Requirement in Code Builder is Developer Edition (Sign Up, Activate and Verify)

Suppose in your personal org :

Steps:

1. Go to App Exchange > search for 'Code Builder' > click on 'Get it Now' > Install it.

Direct link - https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3u00000Qsdi5EAB

If you get any message like App does not support for your edition. Would you like to continue > as of now, ignore that message, Confirm and Install >

It may now ask for Username and Password for security reasons > You may now "Install for all Users' > Install (this usually takes couple of minutes)

2. Give a permission set to the code builder so go to permission sets and find the permission set called 'Code Builder' and make sure that you assign that permission set to your user.

Please note, in future all the above mentioned steps may change like this set up we are doing may change since its open beta. As of now, this is the process that you have to follow. e.g. the way you give access to Dev Ops Center : you go to Dev Ops Center, there it just asks to install the package directly from there without even going to app exchange etc.

Post installation and after providing the necessary permission, if you go to App launcher, you will see the new application card board 'Code Builder (Beta)'.

Open that > Get started > New Project | Import from Github

If you already have a project you can simply import the existing project by providing the URL from Github and if you can create a new salesforce project.

Lets create a new project > may be give 'sampleWork' as project name and project type can be 'standard' > Next step is to authorize the development environment to launch the code builder environment and start coding. That is, on click of Next, it will ask to connect a development environment. Let's connect to developer environment (it may or may not ask you to log again) > org alias > may be 'mySampleOrg' > Create an Environment.

Now, code builder instance or code builder dashboard is ready to go when you click on the launch (when your environment is ready you will see this launch button).It may try to reconnect sometimes.

Finally you are in code builder instance (its up and running)

What you see here -

Now you see the familiar view (as in visual studio), here you see the basic things are by default installed. Basically, you see a full-featured IDE in your browser.

Code Builder comes with the same set of extensions as in the Salesforce Extensions pack for Visual Studio Code, and the look and feel is similar to the Visual Studio Code User Interface.

You see an extra icon which is code builder icon.

Resource to Learn - If someone is new to visual studio code interface like if you want to connect to org this help will provide the details in step by step manner like how to switch org , remove org etc. if something is inside org and you want to download it to your local, refresh metadata, retrieve metadata etc. Even trailhead links etc. are available. Like in visual studio, you can download everything like components etc. from org.

Features available:

-Access Salesforce-specific commands:

Use Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS/Linux) to open the command palette and type SFDX to access all of the Salesforce-specific commands.

-Connect to multiple Salesforce orgs

You can use Code Builder to authorize against multiple Salesforce orgs and switch between them as needed.

-Explore org metadata using Org Browser

Browse and retrieve metadata from your org without having to use a manifest file.

-Create and deploy Apex & LWC

Code Builder has rich support for Apex and the LWC programming model with autocomplete and IntelliSense. It brings the same great features and language support because it’s the same extensions whether you access them from VS Code on the desktop or Code Builder.

Example:

Lets do some work in the org you are connected to:

Suppose you want create a simple LWC Component > Add a folder .lwc > Create a component (lightning component)

Click Ctrl+Shift+P to open the command palette and create from there a new LWC component like in the attached visual. (or once the palette opens, start typing lwc)

helloWorld.html

<lightning-card title="HelloWorld" icon-name="custom:custom14">

<p>Hello, {greeting}!</p>

<lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>

</div>

</lightning-card>

</template>

helloWorld.js

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {

greeting = 'World';

changeHandler(event) {

this.greeting = event.target.value;

}

helloWorld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<target>lightning__AppPage</target>

<target>lightning__RecordPage</target>

<target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>

Once done, deploy the source to org > right click and deploy like you do in visual studio.

Make sure isExposed is set to true. Add this component to the page you want and you should be able to see the component

You can even Switch between multiple projects. (As of now, dashboard that's displayed here, don't support multiple project.)

-Write and execute SOQL queries using SOQL Builder

Code Builder comes preloaded with everything you need to build and run a SOQL query as a part of the Salesforce Extensions pack.

Running queries:

Like create .soql file like accounts.soql lets try something, the returned result can can exported as .csv or .json

Click Ctrl+Shift+P to open the command palette and start typing soql to find the related command.

-Use the Code Builder terminal to run your Salesforce CLI commands

Code Builder comes with the Salesforce Command Line tool pre-installed.

Considerations:

Salesforce have capped usage for the Beta at 20 hours for a maximum of 30 days. It is highly recommend that you save your work and close the browser tab that is running Code Builder to stop the usage clock when you aren’t using Code Builder.

Conclusion:

As a whole, Code Builder is a modern, web-based development environment optimized for Salesforce. Using this, you can deploy a full-featured IDE in your browser from your Salesforce org with the push of a button. It includes key features that boost developer productivity, such as code completion and refactoring, is easy to integrate with typical DevOps workflows with access to source control and CLI, and empowers the development of anything, from anywhere, including all Salesforce languages and frameworks, from Lightning Web Components to Apex to SOQL queries, Functions and more.

Visual:

https://www.youtube.com/watch?v=ELoxXRBFdDs

https://www.youtube.com/watch?v=bB3ArnXCdOw

Reference:

https://developer.salesforce.com/blogs/2022/07/build-from-anywhere-with-salesforce-code-builder-beta

https://developer.salesforce.com/tools/vscode/en/codebuilder/cb-setup

https://trailhead.salesforce.com/content/learn/modules/code-builder-quick-look

The Salesforce Tutorial

Search This Blog

Salesforce Code Builder (Beta) #inSalesforce

Comments

Post a Comment