Composite Control (XMLComposite) for a ListItem

[former_member194549]

Hi everyone,

i would like to create a composite control like it's documented in XML Composite Controls in the documentation (https://ui5.sap.com/#/topic/b83a4dcb7d0e46969027345b8d32fd44).

My composite control should be a custom list item.
Because the composite control is a instance of sap.ui.core.XMLComposite i always get the error that the control is not valid for aggregation "items" of an sap.m.List which it is because the list wants a instance of sap.m.ListItemBase.

Does anybody has a solution for this?

[boghyon]

Update: The module "sap/ui/core/XMLComposite" is unfortunately deprecated since 1.88.
Related commit: https://github.com/SAP/openui5/commit/25ae0f1a4e8d9da209ff7241e05f87c60b58b885

[boghyon]

Due to the deprecation, and since there was no response from the UI5 team, I closed the enhancement request: https://github.com/SAP/openui5/issues/2423

[boghyon · Accepted solution]

You could create the content of the CustomListItem as an XMLComposite control.

<List items="{...}" xmlns="sap.m">
  <CustomListItem xmlns:custom="my.custom">
    <custom:MyCustomListItemContent ... />
  </CustomListItem>
</List>

<!-- MyCustomListItemContent.control.xml -->
<HBox xmlns="sap.m" width="100%" height="100%" renderType="Bare" ...>
  <!-- ... --->
</HBox>

Otherwise, I just created an enhancement request here since it's not just a CustomListItem problem but a general concept to be able to assign XMLComposite to specifically typed aggregations.

[former_member194549 · Accepted solution]

Hi Boghyon,

thanks for your answer, i solved it with a little workaround like this.

I extended the sap.m.List to allow sap.ui.core.Control in the items aggregation.

sap.ui.define([
	"sap/m/List",
	"sap/m/ListMode"
], function(List, ListMode) {
	"use strict";
	
	var oList = List.extend("custom.List", {
		metadata: {
			aggregations: {
				items: {
					type: "sap.ui.core.Control",
					multiple: true,
					singularName: "item",
					bindable: "bindable",
					selector: "#{id} .sapMListItems",
					dnd: true
				},
				defaultAggregation: "items"
			}
		},
		renderer: "sap.m.ListRenderer"
	});


	oPhotoList.prototype.init = function() {
		List.prototype.init.call(this, arguments);
		this.addStyleClass("thumbnailList");
		
		this.setShowSeparators("None");
	};

	return oList;
}, true);

The List item is implemented as XMLComposit as follows:

sap.ui.define([
	"sap/ui/core/XMLComposite"
], function(XMLComposite) {
	"use strict";
	
	var _oParent;
	
	var oListItem = XMLComposite.extend("custom.ListItem", {
		metadata: {
			properties: {
				imageSrc: {
					type: "string"
				},
				description: {
					type: "string"
				},
				_mode: {
					type: "sap.m.ListMode",
					group: "Behavior",
					visibility: "hidden"
				}
			}
		},
		fragment: "custom.ListItem",

		onBeforeRendering: function() {
			_oParent = this.getParent();
			this.setProperty("_mode", _oParent.getMode());
		}
	});


	oListItem.prototype.getSelected = function() {
		var oListItem = this.byId("idListItem");
		if (oListItem.isSelectable()) {
			return oListItem.getProperty("selected");
		}
		return false;
	};


	oListItem.prototype._onPhotoPressed = function(oEvent) {
		<some code>
	};


	oListItem.prototype._onDeletePressed = function(oEvent) {
		_oParent.fireDelete({
			listItem: <code to get sap.m.CustomListItem>
		});
	};


	return oListItem;
}, true);

In onBeforeRendering i had to store the parent in a separate variabel because afterwards this.getParent() returns null.
In addition i had to implement getSelected because this method is called from the sap.m.List.
I also propagated the list mode to the item in the onBeforeRendering method to show a delete button. I had to add a custom delete buttion because the renderer of sap.m.CustomListItem calls methods from sap.m.List which only return the mode value when the caller is of type sap.m.ListItemBase, which isn't.

So with a little workaround i solved it.

Regards
Simon