Skip to Content
Author's profile photo Emanuele Ricci

[SAPUI5] Extending StandardListItem

#tipoftheday will be a series of blog post that I’m mirroring from my Medium account.

Good morning everyone! In this #tipoftheday we will start extending OpenUI5 Framework with some basics feature when needed.

In everyday work you always finds some special needs that does not meet what is actually offered in the framework (and I always strongly suggest you to create a pull request to contribute those projects).

Today we will extend StandardListItem to support the enable/disable flag that will allow us to simply enable or disable a single item (this control is only available globally on the list and not in the single item).

Here you go:

 * @module it/designfuture/framework/controls
 * @author Emanuele Ricci <>
 * @version 0.0.1

// Provides control it.designfuture.framework.controls.DFStandardListItem.
	], function(StandardListItem) {
	"use strict";

	 * Constructor for a new DFStandardListItem.
	 * @param {string} [sId] Id for the new control, generated automatically if no id is given
	 * @param {object} [mSettings] Initial settings for the new control
	 * @class
	 * <code>sap.m.DFStandardListItem</code> is a list item providing the most common use cases, e.g. image, title and description.
	 * @extends sap.m.StandardListItem
	 * @constructor
	 * @public
	 * @alias it.designfuture.framework.controls.DFStandardListItem
	var DFStandardListItem = StandardListItem.extend("it.designfuture.framework.controls.DFStandardListItem", { 
		metadata : {
			properties : {
				 * Whether the control should be enabled. If set to false, the item is rendered as disabled.
				enabled : {type : "boolean", group : "Appearance", defaultValue : true}
		aggregations: {},
		events: {},
		renderer: {}
	 * Override getMultiSelectControl to enable/disable the StandardListItem
	 * @alias DFStandardListItem#getMultiSelectControl
	 * @function
	DFStandardListItem.prototype.getMultiSelectControl = function() {
		var control = StandardListItem.prototype.getMultiSelectControl.apply(this, arguments);
		control.setEnabled( this.getEnabled() );
		return control;

	 * Override getSingleSelectControl to enable/disable the StandardListItem
	 * @alias DFStandardListItem#getSingleSelectControl
	 * @function
	DFStandardListItem.prototype.getSingleSelectControl = function() {
		var control = StandardListItem.prototype.getSingleSelectControl.apply(this, arguments);
		control.setEnabled( this.getEnabled() );
		return control;

	return DFStandardListItem;

}, /* bExport= */ true);

Do you have to do:

  1. Add a new property enabled that will be used internally. This property is a boolean, with true as default value.
  2. Override getMultiSelectControl and getSingleSelectControl to enable/disable the item based on our enabled property.
  3. Enjoy!

Was that difficult? 😉

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.