In order to retrieve the oldest and latest properties, you need to define them from the results of the AJAX call. Add the following lines to the AJAX done
function before the oView.setBusy
call.
self.getView().getModel("pageData").setProperty("/latest", results.messages[results.messages.length-1].ts);
self.getView().getModel("pageData").setProperty("/oldest", results.messages[0].ts);
Additionally, in the done
function, you need to toggle the enable/disable of the Next and Previous buttons on the page. Determining if you need to enable or disable to Next and Previous buttons is a little tricky in this Slack method since the concept of a page does not exist. In order to introduce that concept to your application, you will need to establish the page boundaries.
Start by creating a global initPage
boolean variable that will help you determine if the initial page boundaries have been set. Set it to true in the onInit
function. In the AJAX response, you will set it to false once the initialization data has been captured.
var initPage;
initPage = true;
In the done
function of the AJAX call, add a new if
statement to determine if the initialization variables need to be set. If initPage
is equal to true, you will need to set the values for 2 new properties in the paging model called oldestInit
and latestInit
. Once your init variables are set, change initPage
to false.
if(initPage === true){
self.getView().getModel("pageData").setProperty("/oldestInit", results.messages[0].ts);
self.getView().getModel("pageData").setProperty("/latestInit", results.messages[results.messages.length-1].ts);
initPage = false;
}
You can now use these init properties in the paging model to determine when to toggle the enable attribute for the paging buttons. If the page’s newest message is older than the oldestInit
variable, the Previous button should be enabled. If the page’s oldest message is newer or equal time to the latestInit
variable, the Next button should be enabled.
if(results.messages[results.messages.length-1].ts >= self.getView().getModel("pageData").getProperty("/latestInit")){
self.getView().byId("nextButton").setProperty("enabled", true);
} else {
self.getView().byId("nextButton").setProperty("enabled", false);
}
if(results.messages[0].ts < self.getView().getModel("pageData").getProperty("/oldestInit")){
self.getView().byId("prevButton").setProperty("enabled", true);
} else {
self.getView().byId("prevButton").setProperty("enabled", false);
}
SAVE your changes.