Banner

Overview

Custom control defining a banner. This control supports multiple cards that can have associations to model binds.

Example

This example is taken from EntityDashboard.

XML

            <CustomView head="true" name="PersonHTMLLabel" type="md:Banner">
               <Toolbar name="tbPersonDashboard">
                  <Item action="true" caption="IDS_EDIT" event="sysProperties" icon="edit" name="mitEditPerson"/>
                  <Item caption="ids.email" event="sendEmailToContact" icon="email" name="mitSendMailItemPerson" visible="`(@ model item hasEmail)"/>
               </Toolbar>
               <Models>
                  <Instance name="item" value="(@)">
                     <Bind name="summary" value="summaryStringStatusPositionCompany"/>
                     <Bind name="birthTime" value="summaryStringBirthTimeAge"/>
                     <Bind converter="image" name="avatar" value="(image . image)(data . mimeData)(type . mimeType)(icon . icon)(default . "icon:")"/>
                     <Bind name="fullName" value="fullNameDetail"/>
                     <Bind name="addressName" value="defaultAddress name"/>
                     <Bind name="address" value="defaultAddress fullName"/>
                     <Bind name="addressIcon" value="defaultAddress type icon"/>
                     <Bind name="telcomName" value="defaultTelcom name"/>
                     <Bind name="telcom" value="defaultTelcom fullAddress"/>
                     <Bind name="telcomIcon" value="defaultTelcom type icon"/>
                  </Instance>
                  <Collection name="badges" value="(@ dashboardBadges)">
                     <Bind name="captions" value="tooltipText"/>
                     <Bind name="icons" value="icon"/>
                  </Collection>
               </Models>
               <Configuration>
                  <Properties vertical="#f"/>
                  <Children>
                     <TopBannerCard>
                        <VerticalTile caption="item fullName" comment="item birthTime" description="item summary" icon="item avatar" round="#t"/>
                        <BannerBadges icons="badges icons" items="badges" vertical="#t"/>
                     </TopBannerCard>
                     <BannerCard header="#t" responsive="#t" size=""l"">
                        <Tile caption="item fullName" comment="item birthTime" description="item summary" icon="item avatar" name="personBanner" size=""l"" tool=":toolbar"/>
                     </BannerCard>
                     <BannerCard responsive="#t" size=""s"">
                        <BannerBadges captions="badges captions" icons="badges icons" items="badges"/>
                     </BannerCard>
                     <BannerCard size=""m"">
                        <Tile caption="item telcom" comment="item telcomName" icon="item telcomIcon"/>
                        <Tile caption="item address" comment="item addressName" icon="item addressIcon"/>
                     </BannerCard>
                  </Children>
               </Configuration>
            </CustomView>

Explanation

The configuration defines multiple cards to be shown in the banner, with one TopBannerCard. For each card, the properties are configured using custom binds relative to item and badges.

The Models metadata specifies the binds for the configurations by defining item and badges relative to the instance of Entity that the layout containing this custom view is associated with.

If you set the responsive property to true, the card will be resized in smaller screens. If responsive is false (default), the card is not displayed in smaller screens.

For details regarding the banner control, see the "Banner" custom control, which is defined in the finance-md project.