Scrollable table/list within/inside sap.f.Card

[sushant_nath2]

Hello All,

My client has a requirement, where in there should be a table/list, inside a Card and that table should be scrollable within the card itself.(SAP ui5 version 1.69.1)

To suffice the requirement, I have used a table/list in side a card but the list is not getting scrollable inside the card.

PFA, screenshot images of my actual requirement and the output am getting with an image of xml view code.

Can anyone, please help me out, on achieving the same?

BR,

Sushant

[ankurbabu1]

Hi sushant.nath2,

Did you find any solution to this?

Best regards,

Ankur

[catano]

Hi sushant.nath2,

Use ResponsiveTable inside a ScrollContainer.

Example:

<mvc:View controllerName="sap.m.sample.TablePerso.Table" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.f"
          xmlns:card="sap.f.cards">
    <f:Card class="sapUiMediumMargin" width="400px">
        <f:header>
            <card:Header title="Products"/>
        </f:header>
        <f:content>
            <ScrollContainer height="200px" width="100%" vertical="true" focusable="true">
                <Table id="productsTable" items="{/ProductCollection}" growing="true">
                    <columns>
                        <Column id="productCol" width="12em">
                            <Text text="Product"/>
                        </Column>
                        <Column id="supplierCol" minScreenWidth="Tablet" demandPopin="true">
                            <Text text="Supplier"/>
                        </Column>
                        <Column id="dimensionsCol" minScreenWidth="Tablet" demandPopin="true" hAlign="End">
                            <Text text="Dimensions"/>
                        </Column>
                        <Column id="weightCol" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                            <Text text="Weight"/>
                        </Column>
                        <Column id="priceCol" hAlign="End">
                            <Text text="Price"/>
                        </Column>
                    </columns>
                    <items>
                        <ColumnListItem>
                            <cells>
                                <ObjectIdentifier title="{Name}" text="{ProductId}" class="sapMTableContentMargin"/>
                                <Text text="{SupplierName}"/>
                                <Text text="{Width} x {Depth} x {Height} {DimUnit}"/>
                                <ObjectNumber number="{WeightMeasure}" unit="{WeightUnit}"
                                              state="{ path: 'WeightMeasure', formatter: 'sap.m.sample.TablePerso.Formatter.weightState' }"/>
                                <ObjectNumber
                                        number="{ parts:[{path:'Price'},{path:'CurrencyCode'}], type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }"
                                        unit="{CurrencyCode}"/>
                            </cells>
                        </ColumnListItem>
                    </items>
                </Table>
            </ScrollContainer>
        </f:content>
    </f:Card>
</mvc:View>

Regards,

Peter

[vedaradhya]

Hi Sushant Nath,

According to your requirement use the UI Table instead of List.

check the below code and attached screens for sample.

<f:Card class="sapUiTinyMargin" width="300px">
	<f:header>
		<card:Header title="Sales Orders"/>
	</f:header>
	<f:content>
		<table:Table rows="{/SalesOrderSet}" selectionMode="None" visibleRowCount="8">
			<table:columns>
				<table:Column>
					<Label text="Customer Name"/>
				<table:template>
					<Text text="{CustomerName}" wrapping="false"/>
				</table:template>
				</table:Column>
				<table:Column >
					<Label text="Id"/>
				<table:template>
					<Text text="{CustomerID}"/>
				</table:template>
				</table:Column>
			</table:columns>
		</table:Table>
	</f:content>
</f:Card>

[sushant_nath2]

Hello Vedaradhya,

Thanks for looking into my issue!

This piece of code, works fine for sap.ui.table.

I am sorry, to say that using sap.ui table, won't suffice my requirement as per the screenshot attached(the colums get hidden).

However, in my case am using sap.m controls/table and this gives me an error as per attached screenshot.

Can you please, provide any pointers on the same?

tablecodeerror.png

BR,

Sushant