Icon in table incompatible with mergeDuplicates="true"

2
votes

I have a Table and I want to merge duplicates in the first column:

<Column mergeDuplicates="true">
    <Text text="Society"/>
</Column>
<Column>
    <Text text="Ref2"/>
</Column>
 ...

I want to have a complex element in the first column: An icon that shows the flag of society.

<items>
    <ColumnListItem>
        <cells>
            <StandardListItem title="{model>society/description}"
             icon="{path: 'model>society/code', 
             formatter: 'ui5bp.Formatter.iconGeneral'}"/>
            <!--<Text text="{model>society/description}"/>-->
            <Text text="{model>ref2}"/>
        </cells>
    </ColumnListItem>
</items>

But if I set the StandardListItem instead the simple text the mergeDuplicates="true" does not work.

Are complex column items and the mergeDuplicates property incompatible?

Now StandardListItem has this result: enter image description here

How can I create a correct "MyCustomColumnListItem" to show the flag on the left and descriprion on the right without space up and down?

2
sapui5
I believe your use of the StandardListItem inside a cells aggregation is not correct; as you see, the rendering of it looks a bit weird too... Can't you jsut use an Icon or Image control instead? Or maybe a custom control, specific to your needs, and set the appropriate mergeFunctionName value accordingly - Qualiture
I can't create my custom costrol. How can I start? - padibro

2 Answers

1
votes

The data in your example is not mergeDuplicate ready (from what you show, nothing would be merged), but I took a guess and set up some test data that might be similar. You can perhaps look at using an ObjectAttribute which has an icon and a text, as shown in this snippet.

sap.ui.xmlview("main", {
	viewContent: jQuery("#view-main").html()
})
.setModel(new sap.ui.model.json.JSONModel({
    records : [
        { icon : "http://www.flags.net/images/smallflags/ANTA0001.GIF", text : "Delete", comment : "delete" },
        { icon : "http://www.flags.net/images/smallflags/ANBA0001.GIF", text : "Delete", comment : "negative" },
        { icon : "http://www.flags.net/images/smallflags/ANDR0001.GIF", text : "Remove", comment : "sys-minus" }
    ]
}))
.placeAt("content");
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex"></script>
<div id="content"></div>

<script id="view-main" type="ui5/xmlview">
	<mvc:View
		displayBlock="true"
		xmlns:mvc="sap.ui.core.mvc"
		xmlns="sap.m">
		<Table
            items="{/records}">
            <columns>
                <Column mergeDuplicates="true"><Label text="Icon" /></Column>
                <Column><Label text="Comment" /></Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <ObjectStatus
                            text="{text}"
                            icon="{icon}" />
                        <Text text="{comment}" />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
	</mvc:View>
</script>
0
votes

Not sure if a custom control or ListItem will work...
As an alternative, you could also use two columns, each set with mergeDuplicates="true" and display an Image and Text separately. That should definitely work

I.e.:

<Table id="tbl" items="{model>/yourData}">
    <columns>
        <Column mergeDuplicates="true" mergeFunctionName="getSrc">
            <Text text="Society" />
        </Column>
        <Column mergeDuplicates="true" />
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <Image src="{model>society/flagImg}"/>
                <Text text="{model>society/description}" />
            </cells>
        </ColumnListItem>
    </items>
</Table>