Style a Flexcard

Configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. Configure backgrounds, text, and borders; adjust dimensions and element spacing; apply classes and inline styles; make your element responsive; and more.

1. From the App Launcher, find and select Flexcards.
2. Expand a Flexcard and select a version.
3. If needed, deactivate the Flexcard for editing the Flexcard.
4. On the Style tab, select a custom style that you saved, or configure style settings as needed.
5. To save your settings for reuse, under Custom Style, click and then select Save As.

• Add Conditional Styles to a Flexcard Element
  Show the most relevant information to your users by conditionally applying styles to a Flexcard element. Change style features such as text color, background image, and responsiveness when a condition based on the value of a data field is met. For example, add a red border around a billing Flexcard when the bill status is past due.
• Configure Flexcard Element Dimensions
  Set the dimensions of the Flexcard according to your company or institution’s style. Set the height properties of Flexcard elements by using CSS values. Turn on responsiveness so that the width adjusts dynamically to the page’s visible area. For example, expand the width of the fields for a contact’s first and last names to the full page width on smaller devices. And for better user experience, limit the width to 50% on larger devices such as laptops and desktops.
• Create Custom CSS Classes for a Flexcard
  Expand preconfigured style options by creating custom CSS classes in a code editor when you set up your Flexcard. Omnistudio saves the CSS classes in a Salesforce attachment each time you save the Flexcard. After you activate the Flexcard, Omnistudio adds a CSS file to the generated Lightning web component package. The CSS file is available to other Flexcard elements or to supported fields inside elements.
• Apply Custom CSS to a Flexcard
  Apply CSS classes from style sheets such as the global Salesforce Lightning Design System (SLDS) and Newport. Or, apply classes that you create when building your Flexcard.
• Overwrite Global SLDS or Newport Styles
  Apply your own branding by overwriting a Flexcard’s global SLDS styles. For example, if your Flexcard requires a specific appearance across multiple components, create custom SLDS styles and load them to your Flexcard as a static resource. For minor style changes on elements, we recommend that you use the settings from the Style tab.

Configure Flexcard Element Dimensions

Set the dimensions of the Flexcard according to your company or institution’s style. Set the height properties of Flexcard elements by using CSS values. Turn on responsiveness so that the width adjusts dynamically to the page’s visible area. For example, expand the width of the fields for a contact’s first and last names to the full page width on smaller devices. And for better user experience, limit the width to 50% on larger devices such as laptops and desktops.

1. Select an element on the Flexcard.
2. On the Style tab, to set a default fixed width relative to the viewport, adjust the slider or drag the border of the element on the canvas.

   An element’s width is one to 12 parts of a 12-column grid. For example, if you select 6, the element takes up 50% of the available horizontal space.

   

   Note

   You can adjust a state element’s dimensions only when it’s on a child card, and by using the slider.

3. If needed, turn on Responsive, and then enter the width for each viewport.

   When you make the element responsive, Omnistudio adjusts the element’s width to the smallest viewport breakpoint for use on mobile devices as the new default.

4. If needed, test the element’s responsiveness by selecting different devices from the viewport picklist on the canvas.
   

   

   Tip

   Easily identify responsive elements by hovering over or selecting an element. Responsive elements show next to their names on the canvas.

Responsive Subject and CaseId Field Elements

For a given account, you want to show the Subject and CaseId field elements next to each other in the medium and large viewports, and stacked in the small and smaller viewports.

Set the Subject element’s dimensions to these settings:

• Responsive: On

• Large and medium sliders: 10

• Small and smaller sliders: 12

Set the CaseId element’s dimensions to these settings:

• Responsive: On

• Large and medium sliders: 2

• Small and smaller sliders: 12

Create Custom CSS Classes for a Flexcard

Expand preconfigured style options by creating custom CSS classes in a code editor when you set up your Flexcard. Omnistudio saves the CSS classes in a Salesforce attachment each time you save the Flexcard. After you activate the Flexcard, Omnistudio adds a CSS file to the generated Lightning web component package. The CSS file is available to other Flexcard elements or to supported fields inside elements.

Warning

Use custom CSS cautiously and avoid targeting DOM elements in components you don’t own. Changes to a component's internal structure might break your CSS. Salesforce might update component implementations at any time, and Salesforce Support can't assist with custom CSS issues.

1. On the Flexcard header, click , and then select Add Custom CSS.
2. Enter your custom classes.
3. To load these styles as a style sheet in the header of the page, turn on Load as Global CSS.

   If you don’t, Omnistudio loads the style only in the header of the Flexcard.

4. Save your changes.

Apply Custom CSS to a Flexcard

Apply CSS classes from style sheets such as the global Salesforce Lightning Design System (SLDS) and Newport. Or, apply classes that you create when building your Flexcard.

1. Select an element on the Flexcard.
2. On the Style tab, under Custom CSS, enter CSS class names as needed.
   

   Note

   Inline CSS styles override container and element classes.

3. To apply a custom class to an element, in the Properties panel, enter a CSS class as an additional or extra class.

   Omnistudio supports custom classes for icons, datatables, images, and toggles.

Grouped Data Table Element With Alternating Background Colors

You have a data table that displays account cases grouped by case type.

• To alternate background colors for body rows and set a different background color for the group heading:
  1. Create these custom CSS classes:

     • alt-table-rows for the datatable element

     • alt-bg-group-wrapper for the group heading

     .alt-table-rows .tableRow:nth-child(even) {
         background:#cccccc;
     }
     
     .alt-table-rows .tableRow:nth-child(odd) {
         background:#ebebeb;
     }
     
     .alt-table-rows .alt-bg-group-wrapper.tableRow {
         background-color: #000000;
         color: #ffffff;
     }
     
     .branded-header {
         font-variant: small-caps;
         border-top: 1px dotted #8d1818;
         border-bottom: 1 px dotted #8d1818;
         padding: 1rem;
         color: #999999;
     }
     

  2. On the Style tab, in Custom Class, enter alt-table-rows.
  3. In Properties, enter alt-bg-group-wrapper as the additional or extra class.

Overwrite Global SLDS or Newport Styles

Apply your own branding by overwriting a Flexcard’s global SLDS styles. For example, if your Flexcard requires a specific appearance across multiple components, create custom SLDS styles and load them to your Flexcard as a static resource. For minor style changes on elements, we recommend that you use the settings from the Style tab.

Important

Loading custom Newport styles directly on the Flexcard overwrites custom global Newport styles.

1. Get global styles for your Flexcard theme:
   • SLDS: See Lightning Design System Downloads.
   • Newport: See Apply Global Branding to Omniscripts.
2. Customize styles as needed.

   See Lightning Apps and Components.

3. Upload the custom styles from a zipped file as a static resource.

   See Creating a Static Resource.

4. From Setup, expand the Styling Options section, and enter the static resource name.
   See Configure Flexcard Settings.