You are here:
Store Cockpit Section
The CockpitSections control in the Consumer Goods Cloud offline mobile app framework defines cards in the cockpit. You can use the control in a CardContainer control or GoogleMapDetails element.
Required Editions
| Available in: Lightning Experience in Performance, Unlimited, and Enterprise Editions that have Consumer Goods Cloud enabled. |
A CockpitSections control can have up to five CockpitSection elements. The CockpitSections root contains the required name attribute, which specifies the unique name of the CockpitSections control.
| Property Name | Description | Type and Value | Required? |
|---|---|---|---|
| Name | Unique name of the CockpitSection element. | Any string | Yes |
| sectionPattern | Defines the layout of CockpitSections. | 2 columns or 3 columns | Yes |
| showSeparator | Defines a line that is used as a separator between two sections. The supported values are true and false. The default value is false. | Boolean | No |
| Bindings | Defines the container element that contains the resources and the binding data. The supported binding targets are:
|
Supported binding types are listed in the 3-columns table. | Yes |
| Events | Defines the container element that contains the name of the event, which is called in the process and the framework. | – | No |
Three-Columns Section Pattern Types
The table lists the binding targets for a three-column layout.
| Binding Target | Supported Binding Type |
|---|---|
| col1row1 | Blob and Image |
| col2row1 | Phone, Email, ItemIdentifier, and ItemSecondary |
| col2row2 | Phone, Email, ItemIdentifier, and ItemSecondary |
| col2row3 | Phone, Email, ItemIdentifier, and ItemSecondary |
| col2row4 | Phone, Email, ItemIdentifier, and ItemSecondary |
| col3row4 | Image |
| Visible | Visible Enables the section to be visible or hidden based. The section is visible if the value is true and hidden if the value is false. |
Binding Type Properties
The properties of the binding types of section patterns are:
- Phone
- ItemIdentifier
- ItemSecondary
Phone
The Phone binding type renders a phone call icon and displays the phone number next to it.
| Property Name | Description | Required? |
|---|---|---|
| phoneType | Determines which phone icon is displayed. The supported values are mobile and work. This setting is ignored if the alternateImage property is set. The default value is work. | No |
| alternateImage | Passes an image ID that is displayed as the phone call icon. This property overrides the phoneType setting. | No |
| alternateImageFileType | Specifies the file type of the image defined in the alternateImage property. The default values are .png and .svg. | No |
| target | Defines the binding target that the section pattern supports. | Yes |
| binding | Defines the binding path. | Yes |
The Email binding type renders an email icon and displays the email address next to it. When you tap the icon, EmailButtonPressedEvent is triggered.
| Property Name | Description | Required? |
|---|---|---|
| target | Defines the binding target that the section pattern supports. | Yes |
| binding | Defines the binding path. | Yes |
| alternateImage | Passes an image ID, which is displayed as an email icon. | No |
| alternateImageFileType | Specifies the file type of the image defined in the alternateImage property. The supported file types are .png and .svg. The default value is .png. | No |
ItemIdentifier
The ItemIdentifier renders text that is bigger than the available space in the column and truncates it with ellipses.
| Property Name | Description | Required? |
|---|---|---|
| target | Defines the binding target that the section pattern supports. | Yes |
| binding | Defines the binding path. | Yes |
ItemSecondary
This binding type renders a smaller black text.
Blob
The Blob binding type renders an attachment specified in the binding element. An encrypted attachment has a lock icon displayed against it.
| Property Name | Description | Required? |
|---|---|---|
| target | Defines the binding target that the section pattern supports. | Yes |
| binding | Defines the binding path. | Yes |
| fileTypeBinding | Specifies the binding path that contains the file type. The supported file types are .jpg and .png. | No |
| defaultImage | Specifies the image ID to display if the binding value is surrounded in quotes or has a null value. | No |
| roundedEdge | Specifies whether the attachment is rendered as is or with rounded edges. The supported values are true and false. The default value is false. | No |
| defaultImageType | Specifies the file type of the default image. | No |
| verticalAlignment | Sets the vertical alignment of the displayed attachment. The supported values are Center, Bottom, and Top. The default is Center. | No |
Image
This binding type renders an image specified by its image ID.
| Property Name | Description | Required? |
|---|---|---|
| target | Defines the binding target that the section pattern supports. | Yes |
| binding | Defines the binding path. | Yes |
| imageType | Defines the file type of the image. The supported file types are .png and .svg. | No |
| verticalAlignment | Sets the vertical alignment of the displayed image. The supported values are Center, Bottom, and Top. The default is Center. | No |
Events
PhoneButtonPressedEvent is triggered when the phone icon is tapped. It has phoneNumber as the parameter with binding value as the value.
EmailButtonPressedEvent: is triggered when the email icon is tapped. It has emailAddress as the parameter with binding value as the value.
Sample code for a cockpit section:
<CockpitSections name="ContactStore">
<CockpitSection name="StoreSection" sectionPattern="3columns" showSeparator="true">
<Bindings>
<Binding target="col1row1" type="Blob" binding="ProcessContext::ObjectData.customerProfilePicture" roundedEdge = "true" fileTypeBinding="ProcessContext::ObjectData.profilePictureFileType" defaultImage="StoreCockpit" defaultImageType=".svg"/>
<Binding target="col2row1" type="ItemIdentifier" binding="ProcessContext::CustomerDetail.name" />
<Binding target="col2row2" type="ItemSecondary" binding="ProcessContext::CustomerDetail.LoCustomerAddress.MainAddress.street" />
<Binding target="col2row3" type="ItemSecondary" binding="ProcessContext::CustomerDetail.LoCustomerAddress.MainAddress.zipCodeAndCity" />
<Binding target="col3row1" type="Image" imageType=".svg" binding="ProcessContext::CustomerDetail.priorityImage" verticalAlignment = "Bottom" horizontalAlignment = "Left"/>
</Bindings>
</CockpitSection>
<CockpitSection name="ContactSection" sectionPattern="3columns" showSeparator="true">
<Bindings>
<Binding target="col1row1" type="Blob" binding="ProcessContext::ObjectData.profilePicture" defaultImage="UserMale" verticalAlignment = "Bottom" horizontalAlignment = "Left"/>
<Binding target="col2row1" type="ItemIdentifier" binding="ProcessContext::ObjectData.name" />
<Binding target="col2row2" type="ItemSecondary" binding="ProcessContext::ObjectData.mainFunction" />
<Binding target="col2row3" type="Phone" binding="ProcessContext::ObjectData.phone" phoneType="WORK" />
<Binding target="col2row4" type="Phone" binding="ProcessContext::ObjectData.mobile" phoneType="MOBILE" />
<Binding type="Visible" target="Visible" bindingMode="ONE_WAY" value ="true">
</Bindings>
<Events>
<PhoneButtonPressedEvent event="cardHeader_phonePressed">
</PhoneButtonPressedEvent>
</Events>
</CockpitSection>
</CockpitSections>