CODEWITHSUNDEEP
sapui5
Tina Chen
Tina Chen

Reputation: 2030

How to implement info bar about filter setting in sap.m.table?

Responsive Table View Setting

In fiori guideline of View Setting and Responsive Table, there is a info bar shows the filter setting. How to implement it?

It looks like a sap.m.MessageStrip, but there are only five kinds of MessageType in MessageStrip(Error, Information...), seems no such color suits for this bar. Should I overwrite this color?

In this Demo, message strip is put above the Table, but in design, it seems to put between table title and column, how to implement it?

I've tried this: 

<Table>
    <headerToolbar>
        <Toolbar>
            <Title id="tableHeader" text="title"/>
            <!--BUTTONS-->
            <VBox>
                <MessageStrip
                    text="Filtered By:"
                    type="Information"
                    showCloseButton="true"
                    showIcon="false">
                </MessageStrip>
            </VBox>
        </Toolbar>
    </headerToolbar>
</Table>

But it looks like this: enter image description here

Upvotes: 0

Views: 1849

Answers (1)

Tina Chen
Tina Chen

Reputation: 2030

It is called infoToolbar, not infoBar...

<Table>
    <infoToolbar>
            <Toolbar
                active="true"
                press="handleInfobarPress" >
                <Label text="Filtered By: " />
                <ToolbarSpacer />
                <core:Icon
                   tooltip="Reset filter"
                   src="sap-icon://sys-cancel"
                   class="size2"
                   color="white" 
                   press="onResetFilters">
                </core:Icon>
            </Toolbar>
    </infoToolbar>
    <headerToolbar>
        <Toolbar>
            <Title id="tableHeader" text="title"/>
            <!--BUTTONS-->
        </Toolbar>
    </headerToolbar>
</Table>

infoToolbar is implemented in sap.m.ListBase as Aggregations: https://openui5.hana.ondemand.com/#/api/sap.m.ListBase

Both sap.m.List and sap.m.Table borrowed these aggregations/methods from sap.m.ListBase.

Upvotes: 1

Related Questions