Sorting Bootstrap Table with App Connect API Data Source

@George and @Hyperbytes : thank you gentlemen!

So given this direction, I did some experimenting today and I would like to share my steps for the benefit of anyone else who needs to do this but doesn’t know how. It took me a minute to get my head wrapped around the necessary components and configuration to support this, but as with all things Wappler, once it “clicked” it all seemed very logical. Shall we…?

Step 1: Setup your API Data Source
Not much explanation required here. Link it up to which ever API you like and make sure you are getting data back.

Step 2: Setup Session Storage Manager
This is critical, as this will be needed in order to store the sort information from the Bootstrap 4 Table which is then passed over to the Data View in Step 3. Click on Define Session Storage Items and create 2 variables to contain information about the column to sort on and the direction to sort in. When you create your Bootstrap Table in Step 4, it is going to ask you for this information:

Step 3: Setup your Data View
So this is where the magic is happening. The Data View is receiving it’s input from the the Session Storage Manager (which is receiving it’s input everytime the user’s clicks on the table headers to change the sort). So in order for the Data View to do this, we need to set it’s data source as the API Data Source we created in Step 1 and add 2 Dynamic Attributes: Sort On and Sort Direction, which are linked to the 2 variables we created above in Step 2. These variables will be used in Step 4.

image

Step 4: Add the Bootstrap Table
And this last step wires it all together:

:sunglasses:

4 Likes