Scribd Logo
Upload

Welcome to Scribd!

  • 123 views

    OmniStudio Style The Elements On A FlexCard

    Uploaded by

    Amol Mane

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    OmniStudio Style The Elements On A FlexCard

    Uploaded by

    Amol Mane
    123 views8 pages

    Original Title

    3. OmniStudio Style the Elements on a FlexCard

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    123 views8 pages

    OmniStudio Style The Elements On A FlexCard

    Uploaded by

    Amol Mane

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 8

    FlexCards

    Exercise Guide

    Style the Elements on a FlexCard


    NOTE:
    Did you sign up for a special OmniStudio Developer Edition org already? You’ll
    need one to do the steps in this guide. If not, use the link to fill out the form
    and have an org delivered to your inbox. The Exercise Guide in the first unit of
    this module has more detailed steps for this process if you need them.

    Requirements

    Once a FlexCard contains elements, style them to achieve the look you want.

    Prerequisites
    ● Display Data and Actions on a FlexCard

    Tasks
    1. Style Elements in the FlexCard

    Time
    ● 10 mins

    © Copyright 2021 Salesforce.com, inc. All rights reserved. 1


    FlexCards
    Exercise Guide

    Task 1: Style Elements in the FlexCard

    Style all the elements now, starting with the icon and header block, followed by the Primary
    Contact field, the actions menu, and the remaining data fields.

    1. Style the Icon and Text elements in the Icon Header block.

    a. Return to the Design view.

    b. Select the Icon Header block. Go to the Style panel.

    c. Scroll to APPEARANCE.

    d. In Background Color enter #3A6D9D in the field. The color of the entire
    background changes, and the icon and account name are now visible.

    © Copyright 2021 Salesforce.com, inc. All rights reserved. 2


    FlexCards
    Exercise Guide

    e. Locate ALIGNMENT.
    f. For Text Align, select Center.

    Now that the header is complete and styled, configure the Primary Contact
    field.

    2. Style the Primary Contact field.

    a. Select the Primary Contact text element. In the Style panel under
    DIMENSIONS > Default, adjust the element width to 7.

    b. Scroll to ALIGNMENT and configure the field as follows:

    © Copyright 2021 Salesforce.com, inc. All rights reserved. 3


    FlexCards
    Exercise Guide

    Field Value
    Padding Type Around

    Padding Size x-Small

    Click the + button

    Margin Type Top

    Margin Size Small

    Click the + button

    Margin Type Left

    Margin Size Small

    Click the + button

    Text Align None

    NOTE: The Padding and Margin settings may not be immediately visible in the
    Properties pane, but you can see them applied on the Canvas.

    © Copyright 2021 Salesforce.com, inc. All rights reserved. 4


    FlexCards
    Exercise Guide

    3. Style the Menu element.

    a. Select the Menu element and go to the Style panel.

    b. Scroll to DIMENSIONS > Default adjust the element width to 4.

    c. Scroll to ALIGNMENT and configure the menu as follows:

    Field Value
    Padding Type Around

    Padding Size xx-Small

    Click the + button

    Margin Type Top

    Margin Size Large

    Click the + button

    Text Align Center

    Almost there! Style the last three fields with a saved style to save time.

    4. Style the Phone field. Save the style and apply it to the last two fields.

    a. Select the Phone field and go to the Style panel.

    © Copyright 2021 Salesforce.com, inc. All rights reserved. 5


    FlexCards
    Exercise Guide

    b. Locate DIMENSIONS > Default and adjust the element width to 11.

    c. Scroll to ALIGNMENT and configure the field as follows:

    Field Value
    Padding Type Around

    Padding Size x-Small

    Click the + button

    Margin Type Left

    Margin Size Small

    Click the + button

    Text Align None

    d. Scroll up to the top of the panel. Under CUSTOM STYLES, click the dropdown
    arrow. Select Save As.

    e. Enter AccountFieldsStyle as the Style Name, then click Save.

    f. Select the Website field and go to the Style panel. Apply the saved style to
    this field. Click the magnifying glass icon.

    © Copyright 2021 Salesforce.com, inc. All rights reserved. 6


    FlexCards
    Exercise Guide

    g. Select the style and watch how the display of the field changes in the preview.
    Click Save.

    h. Apply the saved style to the Postal Code field.

    NOTE: Styles are saved in the FlexCard and not across all cards. A saved style
    will cross over to clones of a FlexCard and all versions of it.

    5. Preview the FlexCard.

    a. Click Preview in the header to preview the FlexCard.

    © Copyright 2021 Salesforce.com, inc. All rights reserved. 7


    FlexCards
    Exercise Guide

    © Copyright 2021 Salesforce.com, inc. All rights reserved. 8

    You might also like