For the managed package runtime, configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. From the Style panel in the Flexcard Designer, design backgrounds, text, and borders; adjust heights, widths, and spacing inside and between elements; apply classes and inline styles; make your element responsive; and more.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Save style settings on an element to use on multiple elements on the Flexcard. Create custom classes from a code editor in the Flexcard Designer and apply them to individual elements. On supported elements, add classes to specific fields inside the element, such as the label and value of a Text element. Conditionally apply styles based on the value of a data field.
Style Options Available to All Elements
|
Style panel Section |
Description |
Reference |
|---|---|---|
|
Add Conditional Style |
Conditionally apply styles to an element. Change style features such as text color and responsiveness when a condition based on the value of a data field is met. |
|
|
Alignment |
Update the padding, margin, and text alignment of an element. |
|
|
Appearance |
Configure the color, background, and border of an element. |
|
|
Custom Styles |
Save style settings on a Flexcard element as a Custom Style to use on multiple elements on a Flexcard.. |
|
|
Custom |
Create and apply custom classes, and add inline styles to an element. |
|
|
Dimensions |
Set the height and configure the responsiveness of an element. |
Style Options Available to Specific Elements
|
Style panel Section |
Reference |
|---|---|
|
Action |
|
|
Datatable |
|
|
Field |
|
|
Icon |
|
|
Menu |
|
|
Toggle |
- Overwrite Global Newport and Lightning Styles for Specific Flexcards (Managed Package)
For the managed package runtime, overwrite the global Newport or Lightning styles for a specific Flexcard. Load new custom styles as a static resource from the Setup panel in the Flexcard Designer. For example, apply specific branding requirements across multiple components on a Flexcard. - Add Conditional Styles to a Flexcard Element (Managed Package)
For the managed package runtime, conditionally apply 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. - Flexcards Element Dimensions (Managed Package)
For the managed package runtime, set the height and width, and configure the responsiveness of a Flexcard element within the Flexcard Designer. In addition to adjusting the width of an element by clicking and moving its drag markers left and right on the canvas, use a slider on the Style panel to adjust the width. - Flexcards Element Appearance (Managed Package)
For the managed package runtime, update the appearance of your Flexcard elements with the Appearance properties in the Style panel of the Flexcard Designer. Change the text color, background, border, and set a Salesforce theme for your elements. - Flexcards Element Alignment (Managed Package)
For the managed package runtime, with Alignment properties in the Style panel of the Flexcard Designer, you can create space inside and around your elements. You can also adjust the position of the text relative to the element's container. - Flexcard Elements Custom CSS (Managed Package)
For the managed package runtime, create, edit, and apply custom CSS classes and inline styles to your Flexcard elements in the Flexcard Designer. When styling options available from the design interfaces of the Style panel don't meet your design needs, create custom CSS classes from a code editor inside the designer, and apply them to supported fields. Or, add inline styles to a specific element. - Create Custom CSS Within the Flexcard Designer (Managed Package)
For the managed package runtime, create custom CSS classes within the Flexcard Designer to apply to Flexcard elements or supported fields inside elements. Create custom CSS classes when the design interfaces in the Style panel do not meet your design needs. - Apply Custom CSS to a Flexcard Element (Managed Package)
For the managed package runtime, when the design interfaces available in the Style panel of the Flexcard Designer don't meet your design needs, apply custom CSS to your elements. Add custom CSS to edit the internal components of an element or a child element. Use this feature sparingly to optimize performance. - Add Inline Styles to a Flexcard Element (Managed Package)
For the managed package runtime, when styling options available from the design interfaces in the Flexcard Designer don't meet your design needs, add inline CSS styles to an element on a Flexcard. Override classes and target specific elements or element components. - Flexcards Action Style Properties (Managed Package)
For the managed package runtime, configure style properties specific to the Action element from the Style panel in the Flexcard Designer. - Flexcards Block Style Properties (Managed Package)
For the managed package runtime, configure style properties specific to the Block element from the Style panel in the Flexcard Designer. - Flexcards Chart Style Properties (Managed Package)
For the managed package runtime, configure style properties specific to the Chart element from the Style panel of the Flexcard Designer. - Flexcards Datatable Style Properties (Managed Package)
For the managed package runtime, configure style properties specific to the Datatable element from the Style panel of the Flexcard Designer. - Flexcards Field Style Properties (Managed Package)
For the managed package runtime, configure style properties specific to the Field element from the Style panel of the Flexcard Designer. - Flexcards Icon Style Properties (Managed Package)
For the managed package runtime, configure style properties specific to the Icon element from the Style panel of the Flexcard Designer. - Flexcards Menu Style Properties (Managed Package)
For the managed package runtime, configure style properties specific to the Menu element from the Style panel of the Flexcard Designer. - Flexcards Toggle Style Properties (Managed Package)
For the managed package runtime, configure style properties specific to the Toggle element from the Style panel in the Flexcard Designer. - Create a Custom Style for a Flexcard Element (Managed Package)
For the managed package runtime, save style settings on a Flexcard element as a Custom Style to use on multiple elements on your Flexcard. For example, to apply the same font color, font size, text color, and background color to multiple Field elements on a Flexcard, create a Custom Style called blue-field-scheme on one Field element. Then apply blue-field-scheme to other Field elements as needed. - Display Records Side-By-Side on a Flexcard (Managed Package)
For the managed package runtime, display records side-by-side instead of stacked on top of each other by embedding a child Flexcard and adjusting the widths of its states. By default, records display one on top of the other regardless of the widths of individual elements in the Flexcard. - Arrange, Duplicate, and Remove Elements on a Flexcard (Managed Package)
For the managed package runtime, arrange, duplicate, and delete elements on the canvas of a Flexcard in the Flexcard Designer. Drag elements onto the canvas, and rearrange them by dragging them below, above, and next to other elements. Duplicate and remove elements with one click. - Brand Flexcards Globally with the Newport Design System (Managed Package)
For the managed package runtime, customize the appearance of Flexcards throughout your org with the Newport Design System. The Newport Design System enables you to download, edit, and override the existing Newport CSS styles with your own customizations. Newport includes Storybook.js, a browser-based preview tool that enables you to see your changes in action. - Apply Global Branding to Flexcards with the Newport Design System (Managed Package)
For the managed package runtime, use the Newport Design System (NDS) to apply global style changes to Flexcards. The Newport Design System enables you to download, edit, and override the existing Newport CSS styles with your own customizations. - Deploy Global Style Changes to Flexcards with the Newport Design System (Managed Package)
For the managed package runtime, add any changes to the Newport Design System theme by uploading the theme in a Salesforce org. Install your theme so that all Flexcard designer users can use it to preview their Flexcards. Apply modifications to the Newport templates by adding a Static Resource that overrides the Newport preview wherever it is available.