How can I have two different Paging Grids on the same interface?

As the other users have said, the main takeaway here is that "local!pagingInfo" and "local!dataSubset" are just variable names and could be renamed to anything else.

One practice I find helpful is to name my paging infos according to the data type they will be paging. So if I have a form with one grid of documents and one grid of contracts, for example, I will name my variables local!documentPagingInfo and local!contractPagingInfo, and name my datasubsets similarly.

I would recommend having your queries in load() local variables rather than inside with(). When a component inside the with() is interacted with, all of the variables are recalculated, so both of your queries would be re-queried anytime you sort or page. Here is another way to structure your SAIL code to be better performant.

load(
local!firstQuery,
local!secondQuery,
local!firstpagingInfo,
local!secondPagingInfo,

with(
local!firstDataSubset: todatasubset(local!firstQuery, local!firstPagingInfo),
local!secondDataSubset: todatasubset(local!secondQuery, local!SecondPagingInfo),
{
/*First Paging Grid*/
a!gridField()

/*Second Paging Grid*/
a!gridField()

}
)
)

If you want to be more careful about performance, you can page the queries themselves instead of moving paging into the with() block. Something like  the following:

=load(
  local!firstPagingInfo,
  local!secondPagingInfo,
  local!firstQuery: rule!query(pagingInfo: local!firstPagingInfo),
  local!secondQuery: rule!query(pagingInfo: local!secondPagingInfo),
  
  {
    /* first grid */
    a!gridField(
      value: local!firstPagingInfo,
      saveInto: {
        local!firstPagingInfo,
        a!save(
          local!firstQuery,
          rule!query(pagingInfo: local!firstPagingInfo)
        )
      }
    ),
    /* second grid */
    a!gridField(
      value: local!secondPagingInfo,
      saveInto: {
        local!secondPagingInfo,
        a!save(
          local!secondQuery,
          rule!query(pagingInfo: local!secondPagingInfo)
        )
      }
    )
  }
)

Hi,

It is possible to combine datasubsets, such as the following:

=load(
  local!ds1: rule!query1(),
  local!ds2: rule!query2(),
  local!pagingInfo: topaginginfo(1,10),
  with(
    local!datasubset: todatasubset(
       {
         local!ds1.data,
         local!ds2.data
       },
       local!pagingInfo
    ),
    a!gridField(
      value: local!pagingInfo,
      saveInto: local!pagingInfo,
      totalCount: local!datasubset.totalCount,
      columns: {...}
    )
  )
)

However, this requires querying all data up front, so whenever possible you should look into using a view to combine the datasets you are working with rather than doing it like this on-form.