Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Get to Know the E-Bikes Sample App

Now that the app is deployed, let’s tour it. Start by exploring the E-Bikes Lightning app with the product explorer and reseller orders then take a look at the community.

Discover the Product Explorer

E-Bikes account executives can use the product explorer to browse the list of products and access technical specifications. The product explorer is a Lightning page built with custom Lightning web components that let you browse through the bike models (product records).

  1. From the App Launcher, find and select the E-Bikes card with the red bike logo. This card opens the Lightning app. The other E-Bikes card opens the Community (we explore it later).
  2. Click the Product Explorer tab.

The page contains three top-level custom components: a set of filters, a paginated list of products, and product details.

  1. Try out the different filters and see how the product list is dynamically updated.
  2. Select a bike to see its detailed description.

Product explorer Lightning page that lets you search for and view bikes

The information displayed on this page comes from product records. Let’s take a closer look.

With a bike model selected, click double arrow iconon the detailed product view to open the record page.

DynamoX1 detail product view screen with the arrow highlighted

This record page includes a custom component that displays a list of similar products. These products are retrieved from the records belonging to the same product family.

Now that you’re more familiar with the E-Bikes products, let’s create a reseller order.

Create a Reseller Order

E-Bikes account representatives can create reseller orders for their retailers.

Let’s create a new order.

  1. Click the Reseller Orders tab.
  2. Click New.
  3. Select the Northern Trail Cycling account then click Save.

A reseller order is like a shopping basket. Let’s add a few products to it.

  1. Drag the Dynamo X4 bike from the right, and drop it on the grey placeholder with the E-Bike logo.
  2. Drag the Electra X4 bike into the same space as the previous step (where Dynamo X4 is now displayed with editable fields).

Feel free to modify those fields. You can adjust the price and quantity for specific sizes for each order item. Make sure to save your changes by clicking the grey check icon that appears on the top right of the product tile.

If you would like to remove an item from the order, click the Bin iconicon that appears when you hover over the product with your cursor.

Reseller order record page that lets you add products (bikes) to a reseller order.

Now that you know how to create a reseller order, let’s move on to the E-Bikes Community.

Explore the Community

Bike enthusiasts can browse the E-Bikes product line from a dedicated Salesforce Community. Communities are a great tool to create rich customer-facing experiences.

From the App Launcher, find and select the E-Bikes  card without the red bike logo.

E-Bikes community card

Notice the media-rich site with a custom layout that includes videos. This was created with a combination of code with custom Lightning web components and declarative features like the Community Builder.

E-Bikes Community home page showing a man riding a bike through the mountainside. There’s an Explore More call-to-action button under the brand tagline.

E-Bikes Community lets customers browse through its products and create cases when they require assistance.

Explore the different tabs and notice how some Lightning web components are reused. For instance, the Product Explorer in the Lightning app uses the same components as the Community.

Now that you’re familiar with the E-Bikes Lightning app and Community, let’s take a look at how to implement a community.