Create the Display Cockpit Card

For the Your Day page, the search returns this UI contract: Application::CockpitUI

Component	Description
CardContainer	Wrapper around the cockpit card. Name of the card: DisplayCard. <CardContainer name="DisplayCard">
Resource Title	Title string (static label) for the card. <Resource target="Title" type="Label" id="DisplayCardTitle" defaultLabel="Displays" />
Resource Information	Information or static title for the card. <Resource target="Information" type="Label" id="DisplayCardInfo" defaultLabel="Info / Counter" />
Binding IsReadyToLoad	Dynamic flag that indicates that all needed data is loaded to render the card UI. <Binding target="IsReadyToLoad" type="Text" binding="ProcessContext::CardDisplay_DataLoaded" bindingMode="ONE_WAY" />
Binding DisplayedSubcomponentName	Dynamic string that defines the subcomponent name. Subcomponents are a second component or UI element in the card container that you can use. For example, you can use subcomponents to show a message instead of a list if there’s no data to show. This is the typical use of subcomponents in the CG Cloud offline mobile app. <Binding target="DisplayedSubcomponentName" type="Text" binding="ProcessContext::CardDisplay_SubComponentName" bindingMode="ONE_WAY" />
Visible Roles	The CG Cloud offline mobile app uses a role concept to react to specific user roles. For example, you can hide buttons, menu entries, cockpit cards and other UI elements based on roles. For this use case, the card is independent of any roles. <VisibilityRoles allRoles="true" />
Events	You must load some data by using a process contract to load the data to appear on the card. Define the LoadContainerData event name in the UI and configure this event in the process contract. <Events> <LoadContainerData event="CardDisplay_loadData" /> </Events>
NoDataMessage	Use the NoDataMessage UI Plugin as a sub component to show a message, see the DisplayedSubcomponentName binding. This component has a static main text that is rendered in bold, a static sub-text that is rendered in standard font, and a small icon before the text. <NoDataMessage name="CardNoDataMessageUiPlugin"> <Bindings> <Resource target="maintext" type="Label" id="MyNoCardNoDataMainText" defaultLabel="No data available " /> <Resource target="subtext" type="Label" id="MyNoCardNoDataSubText" defaultLabel="relax and enjoy the sun!" /> <Resource target="infoIcon" type="Image" id="Done" /> </Bindings> </NoDataMessage>

<!-- Display Card START->
   <CardContainer name="DisplayCard">
        <Bindings>
             <!-- Title and counter -->
             <Resource target="Title" type="Label" id="DisplayCardTitle" defaultLabel="Displays" />
             <Resource target="Information" type="Label" id="DisplayCardInfo" defaultLabel="Info / Counter" />
             <!-- Data loaded flag (by setting this card gets rendered) ->
             <Binding target="IsReadyToLoad" type="Text" binding="ProcessContext::CardDisplay_DataLoaded" bindingMode="ONE_WAY" />
             <! -- Subcomponent (e.g. used for no data message) ->
             <Binding target="DisplayedSubcomponentName" type="Text" binding="ProcessContext::CardDisplay_SubComponentName" bindingMode="ONE_WAY" />
       </Bindings>
        <VisibilityRoles allRoles="true" />
        <Events>
             <LoadContainerData event="CardDisplay_loadData" />
        </Events>
        <! -- No Data Message Subcomponent -->
        <NoDataMessage name="CardNoDataMessageUiPlugin">
             <Bindings>
                  <Resource target="maintext" type="Label" id="MyNoCardNoDataMainText" defaultLabel="No data available " />
                  <Resource target="subtext" type="Label" id="MyNoCardNoDataSubText" defaultLabel="relax and enjoy the sun!" />
                  <Resource target="infoIcon" type="Image" id="Done" />
             </Bindings>
       </NoDataMessage>
   </CardContainer>
   <!-- Display Card END ->