Adding Custom Control under ‘App Settings’ of a FIORI/UI5 App

Hi All,

Introduction:

Sometimes there are scenarios when you need to provide a feature in your app, which is only relevant for a small set of End-Users of the App.

Also, this feature could be like a one-time configuration or a switch which means the user will not be using it frequently.

Such kind of feature shouldn’t be directly made available to End-Users of the App as it may not be relevant for everyone because of above reasons & also the real estate could be utilized for something important.

Recently I came across such a situation and have used the below approach 🙂

Preview:

This is how a custom control in App Settings would look like

Implementation:

In ‘onAfterRendering’ method of controller file of your default view, add the below code

onAfterRendering: function () {
	let oAppConfig = sap.ushell.services.AppConfiguration,
		// Text of button
		sMenuItemText = this.getResourceBundle().getText("textMenuItemSCN"),
		that = this;

	// Initializing the Fragment, as the data is not available untill the App setting button is clicked.
	if (!this._oAppSettingDialogSCN) {
		this._oAppSettingDialogSCN = sap.ui.xmlfragment("xxxxxx.fragment.AppSettingSCN", this);
		this.getView().addDependent(this._oAppSettingDialogSCN);
	}

	let oAppSettingsBtnSCN = new sap.m.Button({
		text: sMenuItemText,
		press: function (oEvent) {
			if (!that._oAppSettingDialogSCN) {
				that._oAppSettingDialogSCN = sap.ui.xmlfragment("xxxxxx.fragment.AppSettingSCN", that);
				that.getView().addDependent(that._oAppSettingDialogSCN);
			}
			that._oAppSettingDialogSCN.open();
		}
	});
	oAppConfig.addApplicationSettingsButtons([oAppSettingsBtnSCN]);
}

Result:

Run the App & you should see the button under ‘App Settings’.

Click on this button should open your fragment.

Please let me know if you have any suggestions or feedback.

Thanks,

Shubham