Add paging to your External API call (Slack)

You will learn

All APIs handle paging a little differently. In this tutorial, you will learn how to implement paging in the Slack API. Paging with the Slack API, or at least the method you are using, as not as intuitive as some other APIs. When working with other APIs, you may find that the paging data is actually provided for you.

Step 1: Review the Slack Method Documentation

Take some time to review the channel history method documentation to learn more about the method you are working with. In order to page with this Slack method, there are a couple arguments to get familiar with. You will need to include the count parameter, the latest parameter, and the oldest parameter in your API call.

The count parameter will be your page size and the latest parameter will tell the API which message to start the page with.

Open you Web IDE and open View1.controller.js for your Slack API project, found in the slack_app > webapp > controller folder.

In order to page with Slack, you need 3 additional parameters as part of the API call. Define a new pageLimit variable which will correspond to the count parameter, a new latestTimestamp variable which will correspond to the latest parameter, and a new oldestTimestamp variable which will correspond to the oldest parameter in Slack. Initiate the variables to match the Slack defaults for now.

Back in the View1.controller.js file, you will create 2 functions for the paging buttons you just added.

First, you will need to add a new model to contain the paging data. This model will contain the information you need when trying to page. Add in a new global model. To declare a global variable, define the paging variable before the return for the controller function.

You need to create 2 functions for the button press attribute you set in your view.Define a new function calls onNextPress and onPrevPress before the _loadChannelMessages functions and after the onInit function.

onNextPress: function(){
},
onPrevPress: function(){
},

Your _loadChannelMessages function now needs some parameters. Replace the function definition for the _loadChannelMessages with the one below.

function(latest, oldest) {}

Set the variables you created for latestTimestamp and oldestTimestamp to the new parameters. Also, change the definition of the pageLimit variable to be the pageLimit from the model.

You need to add some functionality to the press functions you defined previously so the buttons will initiate an action.

In the onNextPress function, you need to access the latest attribute from the paging model. Add the following line to your onNextPress function. Then you will call the _loadChannelMessages, setting only the latest parameter.

In the onPrevPress function, you need to access the oldest attribute from the paging model. Add the following line to your onPrevPress function. Then you will call the _loadChannelMessages, setting only the oldest parameter.

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 globalinitPage 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.

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.

Make sure all your changes are saved and RUN your application. For testing purposes, you should have set the pageLimit property in the paging model to be smaller than your total dataset. If you did, you should see that the Next button is enabled and you can click it to load the next page. Once you move to the next page, you should the Previous button enabled.