I remember the first time I leveraged a component in an application I was building. It was the 1990s, and I was creating Windows-based applications for a large insurance company. The experience of working with a customer to provide something of value sparked a thrill inside me that confirmed I had made the right career choice. Without much effort, I introduced a progress bar to provide a pleasant user experience while a long-running task processed data. Below is an example of the progress bar control from that same time period: While the progress bar may not seem impressive now, this change was a huge improvement compared to the text-based progress approach I had used in an earlier release. I found that simply showing on the screen wasn’t all that exciting. *** 50% complete *** Despite the fact that a large portion of the application development process has changed since that time, I still find myself leveraging components and frameworks to provide a better user experience in my applications. In fact, starting in 2021, I have been trying to live by the following mission statement: “Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.” - J. Vester In this article, I’ll demonstrate how the (LDS) allows developers to employ a collection of production-ready components that have been provided at no cost by . Lightning Design System Salesforce Engineering From a UI/UX perspective, LDS provides the following features: accessible (WCAG Standard at the AA Level) responsive for a wide range of devices comes with a large set of icons and graphic assets. customizable/themeable with CSS properties By making use of these components, feature teams developing applications in can stay focused on meeting the business needs requested by their product owners. React The Lightning Design Framework for React The (LDS for React) allows developers using the React framework to include into their applications the same components that have been made popular in Salesforce. These components are designed for a quick turnaround time to prototype new ideas. Because they are heavily tested and validated by the Salesforce platform, the components are production-ready. Lightning Design Framework for React In fact, LDS for React takes the strengths of LDS (noted above) and wraps everything conveniently into a React layer to provide ready-to-use dynamic components. Salesforce takes the boilerplate code away so that you don't have to implement LDS blueprints manually and takes care of testing for you. Creating a New React Application Reading about the Lightning Design Framework excited me, and I wanted to see just how easy it is to use these components outside of Salesforce. Keep in mind; I am primarily a service-layer developer. So, my skills in JavaScript client frameworks are not considered “expert level” by any stretch of the imagination. Using my MacBook Pro, I started the process of creating a new React application called by executing v2 of the CLI using the following command: having-fun-with-the-lightning-design-system Create React App npx create-react-app having-fun-with-the-lightning-design-system The context of my example is a music service where users can use credits to purchase albums by their favorite artists. I selected a few albums by the Canadian band, , for my sample data. Rush Next, I navigated to the following URL, which explains how to update the webpack config in order to install the Lightning Design Framework into the application: https://github.com/salesforce/design-system-react/blob/master/docs/create-react-app-2x.md These instructions, also included in the of my personal GitLab repository for this article, include the following steps: README.md Install and configure the dependency into the React application react-app-rewired Install the and Salesforce dependencies into the React application. design-system design-system-react Copy a series of elements into the folder of the React application. ./public Update the of the React application to include the stylesheet file. index.html salesforce-lightning-design-system.min.css Update the of the React application to wrap the element inside an < element. index.js <App /> Icon Settings> After completing these steps, I executed the command to make sure all the necessary dependencies were installed and ready. npm ci Adding Lightning Design Framework Components With the React core application in place, I wanted to work with the following Lightning Design Framework components: Alert Spinner Badges Data Table Trial Bar To keep things simple, I decided to include the data for this application as a static array in JavaScript. I also planned to use a timer to make the spinner act as if something is being loaded from a remote service. For simplicity, I made all my code changes in the file already created by the Create React App CLI. setTimeout() App.js Adding an Alert An alert provides the ability to present information to the end-user at the top of the application. I was able to create an alert using the following code in the function: render() {this.state.showAlert &&
<div>
  <AlertContainer>
    <Alert
      icon={<Icon category="utility" name="user"></Alert>}
      labels={{
        heading: 'This is an Informational Alert',
        headingLink: 'Close this Alert',
      }}
      onClickHeadingLink={() => this.closeAlert()}
    />
  </AlertContainer>
</div>
} The rendering code relied on the value of the showAlert boolean property, which was initialized to be true when the application started: state = {
  showAlert: true,
  ... Clicking the “Close this Alert” link fires the function in the JavaScript portion of the file to cause the alert to no longer display: closeAlert() App.js closeAlert() {
  this.setState({showAlert: false});
} Simulating a Spinner I added a simple boolean called to the file and included the following timer code to simulate waiting for a service request to finish: showSpinner App.js state = {
  ...
  showSpinner: true,
  ...

componentDidMount() {
  this.timer = setTimeout(
    () => {
      this.setState({showSpinner: false});
    },
    3000,
  );
  } After three seconds, we set the value of the property to , which causes the spinner to no longer display. Adding the spinner to the application was quite simple: showSpinner false {this.state.showSpinner &&
<div style={{marginTop: 10, position: 'relative', height: '5rem'}}>
  <Spinner
    size="small"
    variant="base"
    assistiveText={{label: 'Getting Data, Please Wait ...'}}
  ></Spinner>
</div>
} For the remaining components, I employed the rule that they would show only when the boolean was set to . This would emulate typical functionality where the spinner displays while data is being retrieved. Once retrieved, the spinner disappears and the application content—presented using a badge, data table, and trial bar—becomes available. showSpinner false Adding a Badge I added the badge component to provide a summary of the user’s remaining available credits. The few lines of code listed below provide a badge (which includes a money bag icon as well) that communicates to the end-user that 2,112.00 credits are available for music purchases: <div style={{marginTop: 10}}>
  <Badge
    id="badge-base-example-success"
    color="success"
    content="2,112.00 Purchase Credits Available"
    icon={
      <Icon
        category="utility"
        name="moneybag"
        size="xx-small"
        colorVariant="base"
      ></Badge>
    }
   />
</div> Including a Data Table Using a static array of data, I created a nicely-styled data table, which not only displays information about each album, but includes action links to buy, save, and preview a given release by the artist. The function in the included the data table code shown below: render() App.js <div style={{marginTop: 25, overflow: 'auto'}}>
  <DataTable
    items={this.state.items}
    id="DataTableExample-music"
    striped
  >
    <DataTableColumn key="album" label="Album Name" property="albumName"></DataTableColumn>
    <DataTableColumn key="release-date" label="Release Date" property="releaseDate"></DataTableColumn>
    <DataTableColumn key="sales" label="Original Copies Sold" property="sales"></DataTableColumn>
    <DataTableColumn key="label" label="Label" property="label"></DataTableColumn>
    <DataTableColumn key="credits" label="Credits" property="credits" right="right"></DataTableColumn>
      <DataTableRowActions
        options={[
          {
            id: 0,
            label: 'Buy this Song',
            value: '1',
          },
          {
            id: 1,
            label: 'Save for Later',
            value: '2',
          },
          {
            id: 2,
            label: 'Preview this Song',
            value: '3',
          }
        ]}
      onAction={this.handleRowAction}
      dropdown={<Dropdown length="3"></DataTableRowActions>}
    />
  </DataTable>
</div> This code leveraged an items array which followed the design noted below: [
  {
    id: '0',
    albumName: 'Grace Under Pressure',
    releaseDate: '7/1/1984',
    sales: '1,000,000 (Platinum)',
    label: 'Mercury',
    credits: 13.06
  },
  ... Upon selecting one of the action items, the current code merely logs the action and item data to the JavaScript console: handleRowAction = (item, action) => {
  console.log(item, action);
}; Displaying a Trial Bar Finally, I added the trial bar to the function using the following code: render() <div style={{marginTop: 25}}>
  <TrialBar
    labels={{timeLeft: '15', timeLeftUnit: 'days'}}
    onRenderActions={() => (
      <Button variant="success" label="Subscribe Now"></Button>
    )}
  >
  <div style={{marginTop: 15}}>Never miss another deal again, press the <strong>Subscribe Now</strong> button to get started today.
  </div>
  </TrialBar>
</div> Running the React Application With the components in place and my IntelliJ IDEA client providing no errors or warnings, I started the React application with the following command: npm start After compiling the code, I was able to view the application with my browser pointing to . Here’s how it looks: http://localhost:3000 When the application loads, the alert component displays, along with the spinner. After a few seconds, the spinner is hidden, while the badge, data table, and trial bar components appear. I was able to dismiss the alert component, which provided a glimpse of the header text for the application. I completed all of this work in less than an hour, which I believe would be much faster for feature developers who are focused on building React applications. Conclusion In the introduction to this article, I mentioned the thrill of being able to provide something of value to my customer. Fast forward 30 years, and I still get excited when given the opportunity to use my skills and expertise to help solve business problems. In fact, when I find the opportunity to speak with those who are ready to start (or even change) their career, I always provide instructions which place “finding your passion” at the center of the criteria. If you find passion in what you are doing, the quality of work and financial goals will certainly follow. In an earlier series, I focused on ways in which the Salesforce platform can be utilized via a and client applications written in , , , and . Each article in that series offered a different experience to interact with the Salesforce ecosystem. Spring Boot service Svelte Vue.js React Native Angular In this article, I took a different approach to employ the use of rich components provided by Salesforce for use in a React application that might have no connection to the Salesforce service. I was quickly able to include components that provide an amazing user experience. This also helped me remain aligned with my 2021 mission statement to leverage a quality collection of components in order to stay focused on meeting business needs. My next article will take things a step further and introduce a custom component based upon the Lightning Design Framework for React. Once ready, I will show how easily this component can be added to a React application. If you are interested in the source code for this article, simply navigate to the following repository on GitLab: https://gitlab.com/johnjvester/having-fun-with-the-lightning-design-system Have a really great day!

Initialized

Salesforce

salesforce.com

2022 - HackerNoon Contributor of the Year - Cloud Computing

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Salesforce

2022 - Hackernoons Tech Storyteller of the Year

I ♥ writing code. Find me on GitLab.

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Hackernoons Tech Storyteller of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Cloud Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Having Fun with the Lightning Design System for React

Having Fun with the Lightning Design System for React

Too Long; Didn't Read

Companies Mentioned

John Vester

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Having Fun with the Lightning Design System for React

Too Long; Didn't Read

Companies Mentioned

John Vester

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES