Building a custom user interface (UI) for your Salesforce application can be daunting. Many factors can make building a custom UI for a Salesforce application a daunting task.

Salesforce is a complex platform with many features and customization options, making it difficult to know where to start. Creating a custom UI often requires knowledge of web development languages such as HTML, CSS, and JavaScript

Creating a UI that is intuitive and user-friendly can be challenging and time-consuming. Ensuring that the UI is compatible with different devices and screen sizes is a significant challenge.

What you will learn

In this blog post, we will walk through the process of building a custom UI with LWC. We will start by creating a new project using the Salesforce CLI, and then we will create our first LWC component, and a lightning page.

Why use LWC to build Custom UI

Lightning Web Components (LWC) aims to make creating custom, and scaleable UI much easier. LWC is a programming model for building web components on the Salesforce platform, and it allows developers to create custom UI elements that can be easily integrated into any Salesforce page.

Installing the Salesforce CLI

First, let’s start by installing the Salesforce CLI. The Salesforce CLI is a command-line interface that allows developers to create, manage, and deploy Salesforce applications. You can download the CLI from the Salesforce website and follow the instructions to install it on your machine.

Once the CLI is installed, we can use it to create a new project. To do this, open a terminal window and navigate to the directory where you want to create your project. Then, run the following command:

sfdx force:project:create -n myproject

This will create a new project called “myproject” in the current directory. Next, we will create our first LWC component. To do this, run the following command:

sfdx force:lightning:component:create -n mycomponent -d force-app/main/default/lwc

This will create a new LWC component called “mycomponent” in the “force-app/main/default/lwc” directory. The “mycomponent” directory will contain the following files:

• mycomponent.html: The HTML template for the component
• mycomponent.js: The JavaScript controller for the component
• mycomponent.js-meta.xml: The metadata for the component

The mycomponent.js-meta.xml needs to be set for the type of page you want to use it on. In the next section, we’ll talk a bit about the different pages.

This is done in the targets section using the target tag. For example, a page that needs to be on the RecordPage would include the following.

<targets>
      <target>lightning__RecordPage</target>
  </targets>

Now we have a basic LWC component ready and you can start to customize the component’s HTML, JS and CSS as per your requirement.

Creating a Lightning Page

Lightning Pages provide a flexible and customizable way to create user interfaces for Salesforce applications, and they are an important part of Salesforce’s modern and responsive user interface.

A Lightning Page is a type of Salesforce page that is built using Lightning components, including Lightning Web Components (LWC) and Aura components.

There are several types of Lightning Pages, including App Pages, Record Pages, and Home Pages. App Pages are used to create custom applications within Salesforce, while Record Pages are used to display and edit records in Salesforce. Home Pages are used to create custom landing pages for Salesforce users.

Lightning Pages can be created and customized using the Lightning App Builder, a drag-and-drop interface that allows users to add and configure components on the page. This allows users to create custom interfaces for specific use cases and user groups.

We must create a Lightning page to display the component. To create a Lightning Page run the following command:

sfdx force:lightning:page:create -n mypage -t mytemplate -c mycomponent

This will create a new Lightning page called “mypage” and add the “mycomponent” component to it.

Once you have created the page, you can deploy it to your Salesforce org using the following command:

sfdx force:source:deploy -p force-app/main/default/pages/mypage

And that’s it! You have now created a custom UI with LWC and have deployed it to your Salesforce org. You can now access the new page by navigating to the URL “https://yourinstance.lightning.force.com/mypage” in your browser.

Adding Multiple Components to a Page

Multiple Lightning Web components can be added to a page. It’s possible to do this through code or through the Lightning App Builder. I normally use the Lightning App Builder though.

In the Lightning App Builder, drag and drop the LWC components onto the page. You can find the LWC components in the “Custom” section of the component palette.

Configure the LWCs: In the properties panel for each LWC component, you can configure the attributes and properties for that component.

Save and activate the Lightning Page: Once you have added and configured all the LWC components, save the Lightning Page and activate it.

Lightning Web Component Communication

There are many ways that LWC can communicate with each other, and the best method depends on the specific use case. The most important thing is to choose a method that is reliable, efficient, and maintainable over time.

1. Parent-Child Communication: In a hierarchy of components, data can be passed from parent components to child components using attributes and events. The parent component can set values for attributes in the child component, which the child component can then use. Similarly, the child component can emit events that the parent component can listen for and respond to.
2. Pub/Sub Model: Components can communicate with each other using a publish-subscribe (pub/sub) model. A pub/sub model involves a publisher component that sends out an event and multiple subscriber components that listen for the event. When the publisher component sends out an event, all subscriber components receive the event and can take action based on the data in the event.
3. Apex Methods: LWC can also communicate with Apex methods, which can then communicate with other components or external systems. LWC can call an Apex method using the wire service or an imperative call. The Apex method can then perform any necessary operations and return data to the LWC.
4. Platform Events: Platform events are a type of event in Salesforce that can be used to communicate between LWC and external systems. LWC can publish a platform event, which can then be subscribed to by other components or external systems. This allows LWC to communicate with other systems in real-time. More on Platform Events can be found in the article: An Introduction to Salesforce Platform Events.

Wrapping it Up

By following the steps outlined in this blog post, you can create a custom UI for your Salesforce application in no time.

Lightning Web Components (LWC) make it easy to build custom UI elements for your Salesforce application. With the Salesforce CLI, you can quickly create new projects and components, and deploy them to your org.

Also published on Medium.