Get record backed grid data on button click

johng0005 said:

we have a requirement where on a button click we will show additional information which is fetched from an API and displayed in the grid.

Does this mean a separate grid or any show When conditions in the existing grid? Is this button on row level or Grid level? 

johng0005 said:

I'm trying to find a way to fetch the data from the API for only the records which are currently shown in the grid. Is there a way to get the list of values currently being shown in the grid

I would recommend getting the data with a batch Size that will be accommodated on the grid and a custom paging which would update the start index and batch size, this will be in a local variable and used as your grid data and also the same local will be used to get the data from the API.

It would be with show when conditions in the existing grid, and the button would need to be on grid level to get the data for all visible rows.

Is it possible to use custom paging with a grid that shows data fetched via a!recordData?

Yes, you can implement custom paging with a!recordData. You'll manage paging logic yourself, updating startIndex and batchSize parameters based on user interactions to control which records are displayed and fetched from the API.

Yes, definetely. here's an example. Please use dynamic values or constant where ever I have hardcoded the integers.

a!localVariables(
  local!startIndex: 1,
  local!batchSize: 5,
  local!data: rule!yourQueryHere(
    isActive: true,
    pagingInfo: a!pagingInfo(
      startIndex: local!startIndex,
      batchSize: local!batchSize
    )
  ),
  local!APIData: rule!yourAPIquery(
    ids: index(local!data, "recordField", null)
  ),
  {
    a!gridField(
      label: "Read-only Grid",
      labelPosition: "ABOVE",
      data: local!data.data,
      columns: {
        a!gridColumn(),
        a!gridColumn(),
        a!gridColumn(),
        a!gridColumn(
          label: "API Data",
          value: "use index and whereContains to get the respective value by identifier"
        )
      },
      validations: {},
      refreshAfter: "RECORD_ACTION",
      
    ),
    a!richTextDisplayField(
      labelPosition: "COLLAPSED",
      value: {
        a!richTextIcon(
          icon: "chevron-circle-left",
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!startIndex,
                local!startIndex - local!batchSize
              )
            }
          ),
          linkstyle: "STANDALONE",
          showWhen: local!startIndex > local!batchSize,
          color: if(
            local!startIndex > local!batchSize,
            "ACCENT",
            "SECONDARY"
          ),
          size: "MEDIUM"
        ),
        a!richTextItem(
          text: concat(
            "  ",
            local!startIndex,
            " to ",
            if(
              (local!startIndex + local!batchSize) - 1 > local!data.totalCount,
              concat(local!data.totalCount, " "),
              concat(
                (local!startIndex + local!batchSize) - 1,
                " "
              )
            )
          ),
          style: { "STRONG" }
        ),
        a!richTextItem(
          text: concat("of ", local!data.totalCount, "  "),
          color: "SECONDARY",
          style: {}
        ),
        a!richTextIcon(
          icon: "chevron-circle-right",
          link: a!dynamicLink(
            saveInto: {
              a!save(
                local!startIndex,
                local!startIndex + local!batchSize
              )
            }
          ),
          linkstyle: "STANDALONE",
          showwhen: (local!startIndex + local!batchSize) - 1 < local!data.totalCount,
          color: "ACCENT",
          size: "MEDIUM"
        )
      },
      showWhen: local!data.totalCount > 0,
      align: "CENTER"
    )
  }
)