Images in Lists for Cockpit

To enable this feature, an items binding type, blob, is supported in list items of the UI contracts. You can use this binding in all list elements, except MediaList. The referenced property must also have blob as the binding type. The images are displayed as thumbnails. When you click the image or the row, an ItemSelectedEvent is triggered.

The image types supported are:

• JPG
• PNG

An error message is displayed if the contract refers to an image type that isn’t supported.

A replacement image is displayed in the application to indicate the missing image when an unsupported image type is used.

Here’s an example of the code:

UIDescription name="ImageList::OverviewUI" schemaVersion="0.0.0.5">

 <Page pagePattern="SingleSectionPage">

   <PageHeader>

     <Bindings>

       <Resource target="title" type="Label" id="ImageListOverviewId" defaultLabel="Image List test module" />

     </Bindings>

       </PageHeader>

     <Section sectionName="masterSection" sectionPattern="SingleAreaSection">

<Area areaName="mainArea" areaPattern="SingleElementArea">

<GroupedList name="ImageListList" searchable="false" dataSource="ProcessContext::ImageList">

<SearchAttributes>

</SearchAttributes>

<Items name="Items" itemPattern="ImageListOverviewItem">

<ItemListLayout>

<Default>

<Col width="5em" layoutType="Image" bindingId="Logo" />

<Col width="5em">

<Row layoutType="itemSecondary itemRight" bindingId="FileNameLabel" />

<Row layoutType="itemSecondary itemRight" bindingId="FileTypeLabel" />

</Col>

<Col width="6em"><Row layoutType="itemValue" bindingId="FileName" >

<Row layoutType="itemValue" bindingId="FileType" />

</Col>

<Col>

<Row layoutType="itemIdentifier" bindingId="Id" />

</Col>

</Default>

</ItemListLayout>

<Bindings>

<Binding target="Logo" type="Blob" binding=".attachmentBlob" fileTypeBinding=".fileType" />

<Binding target="Id" type="Text" binding=".pKey" />

<Binding target="FileName" type="Text" binding=".fileName" />

<Binding target="FileType" type="Text" binding=".fileType" />

<Binding target="FileNameLabel" type="Literal" value="File Name" />

<Binding target="FileTypeLabel" type="Literal" value="File Type" />

</Bindings>

</Items>

<Events>

</Events>

</GroupedList>

</Area>

</Section>

</Page>

</UIDescription>

If the roundedEdge attribute within the blob binding type is set to true, the edges of images in the list cards are rounded and scaled up to cover the images within the circle. The parts of the image outside the circle cut aren’t visible. Use images with equal width and height in pixels to ensure that maximum area of the image is visible.

Thumbnails are created for all .jpg and .png files and are displayed in the lists. If an image is encrypted, a generic icon is displayed instead. The thumbnails aren’t synced with the back end but are available on the device.

Note Thumbnail creation is enabled by Consumer Goods Cloud Mobile App Framework and doesn’t require customization.