Skip to main content

Build a Flexcard to Show Order Information

Learning Objectives

In this badge, you’ll:

  • Build and configure a Flexcard to show order information.
  • Configure the Flexcard to include the shipping address, data source, and an Omniscript action.
  • Build and configure a Flexcard to show country information from a third-party data source.
  • Add Flexcards to the custom order page layout and verify the results.

Before You Start

Before you complete any steps in this badge, make sure you complete the hands-on checks and hands-on challenges (HOCs) in the following badges. The work you do in the HOCs here builds on the work you complete in these badges.

Badge Series Recap

So far in this badge series, you built Data Mappers, Integration Procedures, and an Omniscript. You almost have everything to build Flexcards that give reps a 360-degree view of customer order details. Let’s recap what we’ve done so far.

In the Order and Country Data Management with Omnistudio Data Mappers badge, you created these data mappers to extract, transform, and load data.

  • DMExtractOrderDetails - A Data Mapper Extract that fetches order information.
  • DMTransformOrderAndCountryData - A Data Mapper Transform that restructures and maps order and country data to a format that can be used by other components.
  • DMLUpdateOrderDetails - A Data Mapper Load that updates shipping address information on an order.

In the Order and Country Data Processing with Omnistudio Integration Procedures badge, you created these two Integration Procedures that include the Data Mappers.

  • Process Customer Order calls the extract and transform Data Mappers to fetch and process order and country data, and uses the Data Mapper Load to update the order data. This Integration Procedure divides the process into two workflows: fetch and update. The Omniscript you create in this badge uses the update workflow.
  • Fetch External Country Details uses a Data Mapper Extract to fetch the new shipping country information.

In the previous badge, Order Data Modification with Omnistudio Omniscripts, you created an Omniscript to update the customer’s shipping details in an order. You now can configure this Omniscript in an action button in a Flexcard. When the rep clicks on the action button, a modal window opens with a guided process to update the shipping details.

In this badge, you create and configure two Flexcards: Customer Order Information and Customer Country Details. You later add them to a custom order record page to complete the customer service rep dashboard. The work you do in this badge relies on all of the Data Mappers, Integration Procedures, and Omniscript you built in the prerequisite badges. Use the same Developer Edition org that you used in the Data Mappers, Integration Procedures, and Omniscripts badges for this badge.

Get Started with Flexcards

Let’s get familiar with both the Flexcards. The Customer Order Information Flexcard shows order information, including the shipping address from the Order object. You’ll also configure an Omniscript action in this Flexcard to update the shipping details.

You’ll fetch and display these details for the Customer Order Information Flexcard.

  • Order Details:
    • Account Name
    • Order Number
    • Order Status
    • Shipping Method
  • Shipping Address:
    • Shipping Street
    • Shipping City
    • Shipping State
    • Shipping Postal Code
    • Shipping Country

The Customer Country Details Flexcard shows country information from an external website. Here’s the data you’ll fetch and display.

  • Country Name
  • Capital
  • Region
  • Timezones
  • Google Map Link

Now it’s time to build the Flexcards.

Create a Flexcard to Show Order Details

Let’s start with the Customer Order Information Flexcard.

  1. Click App Launcher, then find and select Flexcards.
  2. Click New.
  3. On the New Flexcard window, enter these details.
    • Name: CustomerOrderInformation
    • Title: CustomerOrderInformation. This field auto-populates the text from the Name field.
    • Theme: Lightning
    • Author: Developer
  4. Click Save.
Note

All the input data in this badge is case-sensitive. Make sure you enter the same data in the org to pass the challenges.

The Flexcard opens in the Flexcard Designer in a new tab. A State element is added by default when you create a Flexcard.

Your Flexcard is now ready to be configured: You change its appearance and add a few elements.

Configure the Flexcard Title

First, add styling to the Flexcard state background.

  1. Click anywhere on the Active State element.
  2. In the Properties panel, click the Style tab.
  3. Under the Appearance section, for Background Color, enter #CFE9FE.
  4. Under the Alignment section, delete any existing padding details and enter these details.
    • Padding Type: Around
    • Padding Size: Medium
    • Click Add Padding to add the padding details.

Next, add a text element to configure the Flexcard title.

  1. In the Flexcard designer, drag a Text element from the Display category in the Elements panel and drop it in the Active state Flexcard element. The Properties panel opens.
    The Flexcard designer interface, highlighting the Text element and showing the Text element dropping on the State element.
  2. In the Properties panel, under the Element Details tab, for Element Name, enter OrderFlexcardTitle.
  3. In the edit text area, remove Edit Me! text and enter Customer Order Information.

Now style the element and its content.

  1. Select the Customer Order Information text in the text area of the Properties panel.
  2. Select Block Type, then Headings, then Heading 1.
  3. While the text is still selected, click Reveal or hide additional toolbar items in the text toolbar.
  4. Select Bold and Center Align.
    The edit text area with the Customer Order Information text highlighted.
  1. In the Properties panel, click the Style tab.
  2. Under the Appearance section, enter these details.
    • Background Color: #FBF3E0
    • Border Type: Top, Right, Bottom, and Left. You can select one option at a time.
    • Border Width: 1
    • Border Color: #CA8501

Appearance section in the Properties panel.

7. Under the Alignment section, enter these details.

    • Padding Type: Top
    • Padding Size: x-Small.
    • Click Add Padding.

8. Drag a Block element from the Display category and drop it after the OrderFlexcardTitle element in the Active state (we won’t check this).

You use a Block element to add space between two Text elements.

It’s time to add order details to the OrderFlexcardTitle element.

Add Order Details

Add a text element to display order information.

  1. Drag a Text element from the Display category and drop it after the Block element.
  2. In the Properties panel, under the Element Details tab, for Element Name, enter OrderDetails.
  3. In the edit text area, remove Edit Me! and enter Order Details.
  4. Select the Order Details text and click Reveal or hide additional toolbar items.
  5. Select Bold and Underline.
  6. While the text is selected, click the Font Size dropdown and select 18pt.
  7. Place your cursor after the Order Details text and press Enter or Return twice.

Next, add the display field names and their corresponding merge fields.

  1. Enter Account Name: {AccountName}.
    The ‘Account Name:’ text is the field name shown on the Flexcard. The ‘{AccountName}’ text is a merge field that gets the account name value from the Order record.
  2. Select the entire text and deselect Underline.
  3. While the text is selected, click Font Size and select 14pt.
  4. Select only the {AccountName} text and deselect Bold.
  5. Click after the {AccountName} text and press Enter.
  6. Enter Order Number: {OrderNumber}. Make sure that the font size is 14pt if it’s not.
  7. Select only the Order Number: text and select Bold.
  8. Similarly, add these display field names and merge fields. Make sure the text formatting for the display field names and merge fields is the same as for Account Name and Order Number.
    • Order Status: {OrderStatus}
    • Shipping Method: {ShippingMethod}
    • Order Amount: ${OrderAmount}

Here’s what the configuration looks like on the Element Details tab.

The Properties panel with the Element Details tab selected and showing the formatted text area.

Now style the OrderDetails text element.

  1. Select the OrderDetails element.
  2. In the Properties panel, click the Style tab.
  3. Under the Dimensions section, drag the Default slider to 5.
  4. Under the Appearance section, enter these details.
    • Background Color: #FBF3E0
    • Border Type: Top, Right, Bottom, and Left. You can select one option at a time.
    • Border Width: 1
    • Border Color: #CA8501
  5. Under the Alignment section, enter these details.
    • For Padding Type, select Around.
    • For Padding Size, select x-Small.
    • Click Add Padding.

Notice that there’s some space on the right: You add shipping details here in the next unit. Let’s add a Block element to leave a tiny gap between order and shipping details (we won’t check this).

  1. Drag a Block element and drop it to the right of the OrderDetails element.
  2. Select the Block element.
  3. In the Properties panel, click the Style tab.
  4. Under the Dimensions section, drag the Default slider to 2.

Order details element with the Block element selected.

You did great! Your order details element is now ready.

What's Next

In this unit, you learned how to build and configure a Flexcard to show ‌customer order information. You added a title, some basic details, some blocks for spacing, and styled them all.

In the next unit, learn how to add the shipping address, data source, and an Omniscript action in the Flexcard.

Resources

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios