Message toast dynamically through List

[iamcharran83]

Hi all,

I have a scenario like when we run the application the Messagetoast need to come after that list is loaded the messagetoast need to disappear automatically and without using the time duration. help me on this.

[MioYasutake]

Hello,

What is the purpose of showing MessageToast while the list is loading?

[iamcharran83]

like we need to show "list is loading". this is our requirement. help me on this

[boghyon]

MessageToast is a wrong control for indicating that the "list is loading". According to Fiori Design Guidelines, a message toast should be used only for success messages.

Instead, make use of busy indicator, which is automatically shown in case of an ODataListBinding as shown in this sample: https://openui5.hana.ondemand.com/entity/sap.m.List/sample/sap.m.sample.ListLoading

[iamcharran83]

Hi Hoffmann,

But for me the requirement will be like this. when the time of list loading we need message toast. after the list getting loaded the message toast will be disappear dynamically help me on this.

[MioYasutake]

Hi iamcharran83,

Unfortunately, MessageToast cannot be used for that purpose, as we cannot hide MessageToast dynamically. All we can do is to specify duration before showing one.

Instead, I would suggest using a Dialog. You can show a Dialog on binding's dataRequested event, and hide it on dataReceived event.

[iamcharran83]

Hi Mio

Thanks for suggesting the dialog instead of message toast. Can you elaborate how to do. I'm unable to find

thank,

Charan

[MioYasutake]

Hi iamcharran83,

You can do like below code.

However, loading data usually takes no more than a few seconds, so showing a dialog for such a short amount of time may seem flickering. I would recommend using a busy indicator as boghyon.hoffmann suggested.

Dialog definition (fragment)

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:core="sap.ui.core">
	<Dialog type="Message" title="Message">
		<Text text="Now Loading data..."/>
	</Dialog>
</core:FragmentDefinition>

View

		<App id="app">
			<Table id="table" items="{/Products}">
				<!-- ... -->
			</Table>
		</App><br>

Controller

		onInit: function () {
			var oTable = this.byId("table");
			oTable.getBinding("items").attachDataRequested(this._showDialog, this);
			oTable.getBinding("items").attachDataReceived(this._closeDialog, this);
		},

		_showDialog: function () {
			if (!this._oDialog) {
				Fragment.load({
					name: "demo.dialog.fragment.Dialog",
					controller: this
				}).then(function (oDialog) {
					this._oDialog = oDialog;
					this.getView().addDependent(this._oDialog);
					this._oDialog.open();
				}.bind(this));
			} else {
				this._oDialog.open();
			}
		},
		
		_closeDialog: function () {
			if (this._oDialog) {
				this._oDialog.close();
			}
		}<br>

Regards,

Mio

[iamcharran83]

Hi Mio,

Thanks for the update mio. It helps a lot.

Thanks and regards,

Charan