Restart progress indicator button selection press in SAPUI5? - sapui5

Question

I am new to SAPUI5. I have two controllers participantList.controller.js and Topic.controller.js. I have defined function called refreshData in participantList.js and I am trying to call that function Topic.Controller.js. Overall, I have progress indicator set up at top in participantList view. So, every time when I navigate from Topic view to participant view by selecting topic on topic view, I want to restart progress indicator that's on participant view. Please help!
Here is code for ParticipantList.controller.js:
var reset;
var list;
sap.ui.define([
"fiveminuteapp/controller/BaseController",
"fiveminuteapp/controller/Topic.controller"
],
function(BaseController, participant) {
"use strict";
return BaseController.extend("fiveminuteapp.controller.participant.ParticipantList", {
onInit: function() {
var topicheader = this.byId("employeeListPage");
topicheader.setTitle(topic);
this.listfunction();
this.testFunction();
},
refreshData: function() {
clearInterval(reset);
lTime.setText("5:00");
setInterval(reset);
},
testFunction: function() {
var setMinutes = 5;
var originalTime = setMinutes * 60;
var time = originalTime;
var lTime = this.byId("labelTimeLeft");
var progress = this.byId("progressIndicator");
reset = setInterval(function() {
var minutes;
var seconds;
if (time > -1) {
minutes = Math.floor(time / 60);
seconds = time % 60;
time = time - 1;
if (minutes < 10 && seconds < 10) {
lTime.setText("0" + minutes + ":" + "0" + seconds);
} else if (minutes < 10) {
lTime.setText("0" + minutes + ":" + seconds);
} else if (seconds < 10) {
lTime.setText(minutes + ":" + "0" + seconds);
}
progress.setPercentValue((time / originalTime) * 100);
} else {
clearInterval(reset);
lTime.setText("5:00");
setInterval(reset);
if(lTime.getText() === "00:00"){
$.ajax({
type: "post",
data:{username: username},
url:"/fiveminuteapp/AddPoints"
})
}
}
}, 1000);
},
listfunction: function(){
var test = this.getView().byId("participantList");
setInterval(function(){
var aData = $.ajax({
type: "get",
data:{topic : topic},
contentType : "application/json",
url:"/fiveminuteapp/RetrieveName",
dataType: "json",
async:false,
}).responseJSON;
var oModel = new sap.ui.model.json.JSONModel(aData);
test.setModel(oModel, 'listmodel')
},5000)
}
});
});
and here is code for Topic.Controller.js:
sap.ui.define([
"fiveminuteapp/controller/BaseController",
"fiveminuteapp/controller/participant/ParticipantList.controller"
], function(BaseController, participant) {
"use strict";
return BaseController.extend("fiveminuteapp.controller.Topic", {
onNavToParticipant: function(oEvent) {
var otime = window.originalTime;
var oItem = oEvent.getSource();
var oContext = oItem.getBindingContext("topics");
var topicSelected = oContext.getProperty("TopicChoices");
topic = topicSelected;
$.ajax({
type: "post",
data:{username: username, topic : topic},
url:"/fiveminuteapp/InsertTopic"
})
this.getRouter().navTo("participantList");
var time = participant.refreshData();
//sap.ui.controller("ParticipantList.controller.js").refreshData();
}
});
});
Topic view
Participant view

Answer 1

I assume you are using Routing in your application. If yes, you can attach route pattern match handlers to specific routes, which handlers will be invoked by the framework every time when the specific route has been matched.
Register a handler in your ParticipantList.controller.js onInit() method:
oRouter.getRoute("participantList").attachPatternMatched(this._onRouteMatched, this);
Then implement the handler function itself in ParticipantList.controller.js with name _onRouteMatched():
_onRouteMatched: function (oEvent) {
this.refreshData();
}
More details can be found in the official UI5 documentation.