SAPUI5 application hangs while running on mobile. Service unable to fetch data on mobile

[former_member591631]

I have developed a SAPUI5 application which consists of 3 tiles. Each tile is altogether a different application and has different functionality. All the tiles (apps) work fine on the browser but one hangs while running it as an application on the mobile. I noticed that the service is unable to fetch the data while running on mobile while this is not the case in desktop application. The BusyIndicator in the javascript code is not hiding that means data is not getting fetched.

Below is my XML and JavaScript code mentioned if there is any problem with the view :

XML :

<mvc:View xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
	xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form" controllerName="hmel.TravelandGuestHouse.controller.BookMeal">
	<Page title="Book your meal !" showNavButton="true" navButtonPress="_onNavBack">
		<VBox renderType="Bare" class="sapUiMediumMarginTop" justifyContent="Center" id="textVBox">
			<Label id="changeText" textAlign="Center" design="Bold"/>
		</VBox>
		<VBox class="sapUiSmallMargin" direction="Column">
			<f:SimpleForm class="form" editable="true" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="4" labelSpanM="4" labelSpanS="12"
				emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" width="100%">
				<f:content>
					<Label text="Meal from date" required="true"/>
					<DatePicker id="fromDate" class="disablekb input" change="onFromDateSelect"/>
					<Label text="Meal to date"/>
					<DatePicker id="toDate" class="disablekb input" change="toDateChange"/>
					<Label text="Meal" required="true"/>
					<ComboBox id="meal" items="{ path: 'Model>/value', filters: [{ path: 'MealField', operator: 'NE', value1: null }] }"
						selectionChange="onMealChanged">
						<core:Item xmlns:core="sap.ui.core" key="{Model>ID}" text="{Model>MealField}"/>
					</ComboBox>
					<Label text="Location" required="true"/>
					<ComboBox id="location"
						items="{ path: 'LocModel>/locValue', filters: [{ path: 'LocationFieldNew', operator: 'NE', value1: null }], sorter: { path: 'LocationFieldNew' } }"
						selectionChange="onLocationChanged">
						<core:Item xmlns:core="sap.ui.core" key="{LocModel>ID}" text="{LocModel>LocationFieldNew}"/>
					</ComboBox>
					<Label text="Meal Type" required="true"/>
					<ComboBox id="mealType" selectedKey="{mTypeModel>/mTypeValue/0/ID}"
						items="{ path: 'mTypeModel>/mTypeValue', filters: [{ path: 'MealTypeFieldNew', operator: 'NE', value1: null }] }"
						selectionChange="onMealTypeChanged">
						<core:Item xmlns:core="sap.ui.core" key="{mTypeModel>ID}" text="{mTypeModel>MealTypeFieldNew}"/>
					</ComboBox>
					<Label text="Diet" id="dietLabel" required="true" visible="false"/>
					<ComboBox id="diet" visible="false">
						<items>
							<core:Item xmlns:core="sap.ui.core" key="1" text="Veg"/>
							<core:Item xmlns:core="sap.ui.core" key="2" text="NonVeg"/>
						</items>
					</ComboBox>
					<Label text="Quantity"/>
					<Input value="1" id="quantity" editable="false"/>
					<Label text="Remarks"/>
					<TextArea width="100%" rows="4" id="remarks" placeholder="An increase/decrease in Chapati/Rice/Veg to be mentioned here." growing="true"
						cols="40"/>
				</f:content>
			</f:SimpleForm>
		</VBox>
		<Label text="Notes : " width="100%" id="label13" textAlign="Center" design="Bold"/>
		<VBox class="sapUiSmallMarginBeginEnd sapUiSmallMarginEnd" alignContent="Start" alignItems="Center" renderType="Bare" width="100%"
			displayInline="true" justifyContent="Center" wrap="Wrap">
			<Label text="Breakfast : to be booked atleast one day prior before 2359 hrs." wrapping="true" class="sapUiSmallMarginTop"/>
			<Label text="Lunch (Veg and Non Veg) : to be booked before 1130 hrs. of that particular day,booking opened for later days."
				class="sapUiSmallMarginTop" wrapping="true"/>
			<Label text="Eve Snacks: To be booked before 1630 hrs. of that particular day,booking opened for later days." class="sapUiSmallMarginTop"
				wrapping="true"/>
			<Label text="Dinner (Veg and Non veg) : to be booked before 1800 hrs. of that particular day ,booking opened for later days"
				class="sapUiSmallMarginTop" wrapping="true"/>
			<Label text="Midnight Snacks: To be booked by 2359 hrs. of that particular day for next day ,booking opened for later days"
				class="sapUiSmallMarginTop" wrapping="true"/>
			<Label text="Non Veg will only be served on Friday in lunch and dinner" class="sapUiSmallMarginTop sapUiSmallMarginBottom" wrapping="true"/>
		</VBox>
		<footer>
			<Bar>
				<contentRight>
					<Button text="Cancel" type="Reject" press="onCancel" id="cancel"/>
					<Button text="Order" type="Accept" press="onSubmit" id="submit"/>
				</contentRight>
				<contentMiddle/>
			</Bar>
		</footer>
		<content/>
	</Page>
</mvc:View>

JavaScript :

/*eslint-disable no-console, no-alert */
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"hmel/TravelandGuestHouse/controller/formatter",
	"sap/m/Button",
	"sap/m/Dialog",
	"sap/m/Text",
	"sap/m/Label",
	"sap/m/TextArea",
	"sap/m/MessageBox"
], function (Controller, MessageToast, formatter, Button, Dialog, Text, Label, TextArea, MessageBox) {
	"use strict";
	return Controller.extend("hmel.TravelandGuestHouse.controller.BookMeal", {
		onInit: function () {
			this.router = sap.ui.core.UIComponent.getRouterFor(this);
			this.mealmodel = new sap.ui.model.json.JSONModel();
			this.getView().setModel(this.mealmodel, "Model");
			this.originalModel = new sap.ui.model.json.JSONModel();
			this.getView().setModel(this.originalModel, "OrgModel");
			this.locModel = new sap.ui.model.json.JSONModel();
			this.getView().setModel(this.locModel, "LocModel");
			this.mealTypeModel = new sap.ui.model.json.JSONModel();
			this.getView().setModel(this.mealTypeModel, "mTypeModel");
			this.EmpModel = sap.ui.getCore().getModel("EmpModel");
			this.UserData = sap.ui.getCore().getModel("EmpModel").getData();
			this.router.attachRoutePatternMatched(this._handleRouteMatched, this);
		},
		_handleRouteMatched: function (evt) {
			if (evt.getParameter("name") !== "BookMeal") {
				return;
			}
			var fdate = new Date();
			//setting minimum date and automatic date on from date
			this.getView().byId("fromDate").setMinDate(fdate);
			this.getView().byId("fromDate").setDateValue(new Date());
			//setting minimum and automatic date on to date
			this.getView().byId("toDate").setMinDate(fdate);
			this.getView().byId("toDate").setDateValue(new Date());
			//setting maximum date on from and to date
			var dateOnly = formatter.mealDateFormat(fdate);
			fdate = new Date(dateOnly);
			var time = fdate.getTime();
			fdate.setDate(fdate.getDate() + 6);
			this.getView().byId("toDate").setMaxDate(fdate);
			this.getView().byId("fromDate").setMaxDate(fdate);
			var that = this;
			sap.ui.core.BusyIndicator.show();
			$.ajax({
				url: "/Non_sap_create_requests/odata/MealSelfLocMealType",
				method: "GET",
				dataType: "json",
				success: function (data) {
					var arr = data.value;
					var objString = JSON.stringify(data.value);
					that.newArr = JSON.parse(objString);
					that.mCopiedArray = $.extend(true, [], arr);
					that.originalModel.setProperty("/newValue", data.value);
					// original model. Will not be used in any dropdown
					var changeText;
					for (var i = 0; i < arr.length; i++) {
						if (arr[i].RichTextContent != null) {
							changeText = arr[i].RichTextContent;
							break;
						}
					}
					changeText = changeText.replace("\n", "");
					if (changeText != "") {
						that.getView().byId("textVBox").setVisible(true);
						that.getView().byId("changeText").setVisible(true);
						that.getView().byId("changeText").setText(changeText);
					}
					that.mealmodel.setProperty("/value", data.value);
					//model for value in meal dropdown
					that.locModel.setProperty("/locValue", data.value);
					//model for values in location dropdown.
					that.mealTypeModel.setProperty("/mTypeValue", data.value);
					that.onFromDateSelect(); // model for values in mealtype dropdown
					sap.ui.core.BusyIndicator.hide();
				},
				error: function (err) {}
			});
		}
		
	});
});

[nabheetscn]

With code it will be tough to get the rootcause. You can debug via developer console and add some screen shot if you see any exception being thrown.

[former_member322772]

There could be so many reasons. You are best to plug it in to your computer and debug. E.g. if it is an iPhone, plug it into a MacBook, open Safari, and open the developer tools and check the console.

Also check for OData error logs.