Skip to Content

Binding Issue in sap.m.table when try to bind by using Grouped Data

Hi All,

I need to group the table by using the "Category" and show it like below image

ModelScreen.png

Please find the JSON structe of my data in the below image,

capture.png.

Please help me to bind the data in the table.

	<Table id="idProductsTabld" items="{ path: 'init_data>/product'}">
					<headerToolbar>
						<OverflowToolbar>
							<content>
								<Title text="Products" level="H2"/>
							</content>
						</OverflowToolbar>
					</headerToolbar>
					<columns>
						<Column width="12em">
							<Text text="Product"/>
						</Column>
						<Column demandPopin="true">
							<Text text="Supplier"/>
						</Column>
						<Column demandPopin="true" hAlign="Center">
							<Text text="Dimensions"/>
						</Column>
						<Column demandPopin="true" hAlign="Center" mergeDuplicates="true">
							<Text text="SupplierName"/>
						</Column>
						<Column demandPopin="true" hAlign="Center" mergeDuplicates="true">
							<Text text="Year"/>
						</Column>
						<Column demandPopin="true" hAlign="Center">
							<Text text="Month"/>
						</Column>
						<Column demandPopin="true" hAlign="Center">
							<Text text="Date"/>
						</Column>
					</columns>
					<items>
						<ColumnListItem type="Navigation" press=".onCPSReqItemPress">
							<cells>
								<Link text="{ProductID}" emphasized="true"/>
								<Text text="{Name}"/>
								<Text text="{Width} x {Depth} x {Height}"/>
								<Text text="{SupplierName}"></Text>
								<Text text="{path : 'CreatedAt',type:'sap.ui.model.type.Date',formatOptions: { pattern: 'yyyy-MM' }}"></Text>
								<Text text="{path : 'CreatedAt',type:'sap.ui.model.type.Date',formatOptions: { pattern: 'MM' }}"></Text>
								<Text text="{path : 'CreatedAt',type:'sap.ui.model.type.Date',formatOptions: { pattern: 'yyyy-MM-dd' }}"></Text>
							</cells>
						</ColumnListItem>
					</items>
				</Table>
d.png (18.7 kB)
capture.png (78.9 kB)
Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

2 Answers

  • Best Answer
    Posted on Oct 14, 2019 at 08:32 PM

    Hi

    Your data structure (array of arrays) is not suitable to bind it to a Table or List!

    Use a "flat table" (only one array of products) -

    the grouping can be done by the List control with a sorter at the binding:

    <List id="ProductList" class="sapUiResponsiveMargin" width="auto"
          items="{ path : '/product', sorter: { path: 'Category', group: true } }">
    

    If you also want to have counters and sums, you need to build this on your own!

    regards

    Domi

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Oct 15, 2019 at 08:58 AM

    Hi Ranjithkumar,

    Based on your JSON data, you would need to use associations.

    One approach would be to create a SplitApp.

    In Master: list all categories.

    In Detail: list all products of the selected category.

    Do let me know in case you face any issues with this approach.

    Regards,

    Rohit

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.