Add manual pagination to an interface

You need a local variable that stores the document id and then is used within UI_Preview. the local needs to be updated with document id on click of the pagination button. You can achieve it by indexing the variable that holds the list of documents. This, way whether user moves forward or backward you can set the appropriate value indexed from the variable storing all documents. 

Thanks for the explanation :) I got 1 more question: After clicking the button, I the document ID will be updated with the new document ID, which is the next one, but the ID are not increment in a row, but each case will have a set of random document ID. If If I sort the ID by order, how can I get the 2nd ID, then 3rd, 4th in the list every time I click the button? Can Index() do this function?

yes index() can help you with this. you can make a index variable that stores the index as 1,2,3,4 etc for each data row in the document cdt. So upon pagination click you can increment the index variable to index +1 and using that get the next document details and id. e.g.  index(local!documentsCDT, local!index,{})

Sorry I didn't get your guidance here :(

The list of document IDs was queried from a table, and is saved in local variable, below you can see that for the same case, there are different document ID:

For example, I am choosing the 1st one: id = 2943356, if I click button next, I want the local!selectedDocumentId to be updated with Id = 2948520. 

How can I do it by using index()?

I have mentioned the steps so that its more clear. Hope this clarifies.

First declare a variable say

local!arrayIndex:1,

then, within the saveInto of pagination button add the line as

a!save(local!arrayIndex,
    if(local!arrayIndex<length(local!dataSToreEntityVariable),
        local!arrayIndex+1,
        local!arrayIndex))

just below the above code add the below line of code, to set the next document Id to the variable used to preview document. Thus, index increment and indexing the next row from the main variable happens on click of pagination button. 

a!save(local!selectedDocumentId,
index(local!dataStoreEntityVariable.id, local!arrayIndex,{}))

I have mentioned the steps so that its more clear. Hope this clarifies.

First declare a variable say

local!arrayIndex:1,

then, within the saveInto of pagination button add the line as

a!save(local!arrayIndex,
    if(local!arrayIndex<length(local!dataSToreEntityVariable),
        local!arrayIndex+1,
        local!arrayIndex))

just below the above code add the below line of code, to set the next document Id to the variable used to preview document. Thus, index increment and indexing the next row from the main variable happens on click of pagination button. 

a!save(local!selectedDocumentId,
index(local!dataStoreEntityVariable.id, local!arrayIndex,{}))

Thanks a lot for the detail explaination, I apply the same logic and it totally worked for me

Glad it helped!