UI Component Settings

Available in: Lightning Experience in Professional, Unlimited, and Enterprise Editions that have Consumer Goods Cloud enabled

Example 1: The Call Calendar component uses #Color1# for the standard font color. By using a theme, however, you can go to the Mobile Themes under Sync Management app, and in the Components subtab, change the font color.calendar.fontcolor has the value

View the settings for a UI component in the Components subtab under the Mobile App Themes tab in the Sync Management app.

Settings that you can customize for a UI component include:

• fontColor: The font color of the UI component.
• borderColor: The border color of the UI component.
• backgroundColor: The background color of the UI component.
• selectedItemBackgroundColor: The background color of the selected element in the UI component.
• selectedItemFontColor: The font color of the selected element in the UI component.
• pressedBackgroundColor: The background color of the element that the user clicks in the UI component.

Use a theme to overwrite standard button macros for a specific UI component. When a button macro isn't defined in the UI component, then the standard button macro is used.

Transfer a UI component to a different theme by exporting the component and its settings as a CSV file and then importing the CSV into another theme in the same org or in a different org.

Keep this considerations in mind when you configure a UI component.

• Each component setting can only refer to other settings in its definition by using the setting name. Components can’t refer to settings in other components.
• The setting can hold an RGB value or a reference to a macro name. When you replace a macro, the modeler searches for the macro in the UI component. If it doesn’t find the macro, then the modeler searches for a matching key in the color or button macros.
• UI component setting names begin with a lowercase letter.

• About Component
  The About UI component shows the version information for the Consumer Goods Cloud Offline mobile app.
• ActionBar Component
  Show action buttons on a card container by using the ActionBar UI component.
• AdvancedSearch Component
  Use the AdvancedSearch UI component to search and to set favorite search conditions.
• Area Component
  The Area UI component is a container for UI components. It defines the look and feel of the menu items and other UI elements in the area.
• AttachmentFolder Component
  The AttachmentFolder UI component stores attachments such as documents, images, and videos.
• AttachmentViewer Component
  Use the AttachmentViewer UI component to open attachments by using an internal or external viewer.
• BannerFilter Component
  Use the BannerFilter UI component to filter the list of options in the order banner.
• Call Calendar Component
  The Call Calendar UI component defines a calendar, such as the calendar in the Agenda module of the core application.
• Card Container Component
  The Card Container UI component defines a Basic, Chart, Highlight, List, or Summary card.
• Checkbox Component
  The Checkbox UI component defines a checkbox that can be selected or cleared.
• Context Menu Component
  The Context Menu UI component defines a menu with a set of options in the page header or in a list.
• Dashboard Component
  Configure a landing page by using the Dashboard UI component in the Consumer Goods Offline Mobile app.
• Date and Time Picker Component
  The Date and Time Picker UI component enables users to select a date and time.
• Dropdown Component
  Use the Dropdown UI component to show and filter menu items in the HeaderLine component.
• EnhancedDecisionList Component
  The EnhancedDescisionList UI component shows a decision list.
• FastDataEntryGrid Component
  Use the FastDataEntryGrid UI component to easily enter large volumes of data.
• GroupedButtonList Component
  The GroupedButtonList UI component shows list items as tiles rather than as rows.
• GroupElement Component
  The GroupElement UI component defines a container that can show any UI element.
• HeaderLine Component
  Accommodate the condition and hurdles button on the Order screen by using the HeaderLine UI component.
• InputArea Component
  Use the InputArea UI component to define the color scheme for font, background, and borders of editable and read-only input areas.
• LinkBar Component
  Use the LinkBar UI component to add custom links in the Consumer Goods Offline mobile app.
• List Component
  The List UI component defines the BreadCrumbControl, CockpitList, EmbeddedList, GroupedList, MultiSelectionBreadCrumbControl, and MultiSelectionGroupedList UI components.
• Lookup Component
  Use the Lookup UI component to perform a lookup search.
• MediaList Component
  Use the MediaList UI component to add attachments.
• MessageBox Component
  With the MessageBox UI component, show the user informational messages.
• NavigationBar Component
  The NavigationBar UI component defines the navigation bar and cockpit navigation components.
• Page Component
  The Page UI component contains all of the UI components on a page in the Consumer Goods Cloud Offline mobile application.
• PageHeader Component
  The PageHeader UI element displays a header with a title, buttons, and menus.
• SelectionBox Component
  The SelectionBox UI component defines a group of elements that the user can select, similar to a group of radio buttons or checkboxes.
• SignatureControl Component
  The SignatureControl UI element captures one or more signatures for a business transaction in the offline mobile app and stores it as an attachment.
• SyncCard Component
  The SyncCard UI component shows the latest sync information.
• Tabs Component
  The Tabs UI defines FilteredViewAreaSection, TabbedViewAreaSection, and TabSelector UI Components.
• Theme Selection Component
  Use the Theme Selection UI component to apply a theme in the Consumer Goods Cloud Offline mobile app. Place the Theme Selection component in the application based on business logic. The list of themes depends on the mobile themes configured in Salesforce.
• TriState Component
  Use the TriState UI in advanced search to indicate the field status.
• UIPlugin Component
  Use the UIPlugin component to include charts and graphs in a card and to refer all color macros in the UI components.