[SAPUI5] Extending StandardListItem

[ericci]

#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 <stermi@gmail.com>

 * @version 0.0.1

 */



// Provides control it.designfuture.framework.controls.DFStandardListItem.

sap.ui.define([

		'sap/m/StandardListItem'

	], 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? 😉