Display multiple files in a grid

Hi folks, 

 

I need to display multiple files stored in a particular folder in a grid on an interface. 

 

Any help will be appreciated. TIA. 

  Discussion posts and replies are publicly visible

Parents Reply Children
  • load(
    local!data: {
    {
    id: 1,
    folderId: 5180/* Folder ids*/

    },
    {
    id: 2,
    folderId: 7366/* Folder ids*/

    }
    },
    a!gridLayout(
    label: "Editable Grid",
    labelPosition: "ABOVE",
    headerCells: {
    a!gridLayoutHeaderCell(
    label: "Header Cell"
    )
    },
    columnConfigs: {},
    rows: {
    a!forEach(
    items: local!data,
    expression: a!gridRowLayout(
    id: fv!index,
    contents: a!richTextDisplayField(
    value: a!forEach(
    items: folder(
    index(
    fv!item,
    "folderId",
    {}
    ),
    "documentChildren"
    ),/*Getting documents from folder*/
    expression: {
    a!richTextItem(
    text: document(
    fv!item,
    "name"
    ),
    link: a!documentDownloadLink(
    document: fv!item
    )
    ),
    a!richTextItem(
    text: char(10),
    showWhen: not(
    fv!isLast
    )
    )
    }
    )
    )
    )
    )
    },
    selectionSaveInto: {},
    validations: {},
    shadeAlternateRows: true
    )
    )
  • 0
    A Score Level 1
    in reply to apoorvam
    Can you explain a bit more about your use case it will be helpful for us to get more clarity.
  • Hi Sachin,

    I need to display all the documents contained in a particular folder in the form of a grid as follows:

     

  • 0
    A Score Level 2
    in reply to apoorvam
    Hi You can use, GetDocumentsFromFolder function to retrieve details of documents from a folder and then display it in the grid.
    Why cannot you use the Browser Component that is available?
  • Hi apoorva,

    Please find the below code, Hope it will help your requirement.


    load(
    local!data: {
    {
    id: 1,
    folderId:81389/* Folder ids*/

    },
    {
    id: 2,
    folderId: 81469/* Folder ids*/

    }
    },
    local!doc:tointeger(a!forEach(
    items:index(
    local!data,
    "folderId",
    {}
    ),
    expression:folder(fv!item,"documentChildren"))),
    a!gridLayout(
    label:"Test Grid",
    labelPosition: "ABOVE",
    headerCells: {
    a!gridLayoutHeaderCell(
    label: "Document"
    ),
    a!gridLayoutHeaderCell(
    label: "Uploaded By"
    )
    },
    columnConfigs: {},
    rows: {
    a!forEach(
    items: local!doc,
    expression: a!gridRowLayout(
    id: fv!index,
    contents:{a!richTextDisplayField(
    value :a!richTextItem(
    text:document(documentId:fv!item,property:"name"),
    link: a!documentDownloadLink(
    document: fv!item
    )
    )
    ),
    a!textField(
    value:document(documentId:fv!item,property:"lastUserToModify")
    )
    }
    )
    )
    },
    selectionSaveInto: {},
    validations: {},
    shadeAlternateRows: true
    )
    )

  • Thank you . This works but is there a way to add paging to this?
  • +1
    A Score Level 1
    in reply to apoorvam

    Hi  

     To make the code simpler and also considering pagingnation i have refined the code and used the gridField instead of gridLayout.

    Please find the below code for your reference.

     

    load(
      local!data: {
        {
          id: 2,
          folderId: 3/* Folder ids*/
          
        }
      },
      local!doc: tointeger(
        a!forEach(
          items: index(
            local!data,
            "folderId",
            {}
          ),
          expression: folder(
            fv!item,
            "documentChildren"
          )
        )
      ),
      local!pagingInfo: a!pagingInfo(
       startIndex: 1,
       batchSize: 10
      ),
      with(
        local!currentData: todatasubset(
          local!doc,
          local!pagingInfo
        ),
        a!gridField(
          label: "",
          labelPosition: "ABOVE",
          totalCount: if(
            rule!APN_isEmpty(
              local!doc
            ),
            0,
            length(
              local!doc
            )
          ),
          columns: {
            a!gridTextColumn(
              label: "Document",
              data: a!forEach(
                items: local!currentData,
                expression: document(
                  fv!item,
                  "name"
                )
              ),
              links: a!forEach(
                items: local!currentData,
                expression: a!documentDownloadLink(
                  document: fv!item
                )
              )
            ),
            a!gridTextColumn(
              label: "Uploaded By",
              data: a!forEach(
                items: local!currentData,
                expression: document(
                  fv!item,
                  "lastUserToModify"
                )
              )
            )
          },
          saveInto: local!pagingInfo,
          value: local!pagingInfo
        )
      )
    )

    Hope this will help you

    Regards,

    Sachin

  • Hi apoorva,
    Please find the updated code

    load(
    local!data: {
    {
    id: 1,
    folderId: 81389/* Folder ids*/

    },
    {
    id: 2,
    folderId: 81469/* Folder ids*/

    }
    },
    local!batchSize: 3,
    local!gridSelection: a!gridSelection(
    pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: local!batchSize,
    sort: a!sortInfo(
    field: "createdAt",
    ascending: true()
    )
    )
    ),
    local!doc: tointeger(
    a!forEach(
    items: index(
    local!data,
    "folderId",
    {}
    ),
    expression: folder(
    fv!item,
    "documentChildren"
    )
    )
    ),
    with(
    local!docPi: index(
    local!doc,
    local!gridSelection.pagingInfo.startIndex + enumerate(
    if(
    count(
    local!doc
    ) - local!gridSelection.pagingInfo.startIndex < local!batchSize,


    count(
    local!doc
    ) - local!gridSelection.pagingInfo.startIndex+1,
    local!batchSize
    )
    ),
    null
    ),
    a!sectionLayout(
    contents: {
    a!gridLayout(
    label: "Test Grid",

    labelPosition: "ABOVE",
    headerCells: {
    a!gridLayoutHeaderCell(
    label: "Document"
    ),
    a!gridLayoutHeaderCell(
    label: "Uploaded By"
    )
    },
    columnConfigs: {},
    rows: {
    a!forEach(
    items: local!docPi,
    expression: a!gridRowLayout(
    id: fv!index,
    contents: {
    a!richTextDisplayField(
    value: a!richTextItem(
    text: document(
    documentId: fv!item,
    property: "name"
    ),
    link: a!documentDownloadLink(
    document: fv!item
    )
    )
    ),
    a!textField(
    value: document(
    documentId: fv!item,
    property: "lastUserToModify"
    ),
    readOnly: true()
    )
    }
    )
    )
    },
    selectionSaveInto: {},
    validations: {},
    shadeAlternateRows: true
    ),
    a!richTextDisplayField(
    align: "RIGHT",
    value: {
    a!richTextItem_18r1(
    showWhen: not(
    local!gridSelection.pagingInfo.startIndex = 1
    ),
    text: "<",
    link: a!dynamicLink(
    saveInto: {
    a!save(
    local!gridSelection,
    a!gridSelection(
    pagingInfo: a!pagingInfo(
    startIndex: local!gridSelection.pagingInfo.startIndex - local!batchSize,
    batchSize: local!batchSize
    )
    )
    )
    }
    )
    ),
    " ",
    local!gridSelection.pagingInfo.startIndex,
    " - ",
    if(
    local!gridSelection.pagingInfo.startIndex + local!gridSelection.pagingInfo.batchSize - 1 > count(
    local!doc
    ),
    count(
    local!doc
    ),
    local!gridSelection.pagingInfo.startIndex + local!gridSelection.pagingInfo.batchSize - 1
    ),
    " of ",
    count(
    local!doc
    ),
    " ",
    a!richTextItem_18r1(
    showWhen: (
    count(
    local!doc
    ) >= local!gridSelection.pagingInfo.startIndex + local!batchSize
    ),
    text: ">",
    link: a!dynamicLink(
    saveInto: {
    a!save(
    local!gridSelection,
    a!gridSelection(
    pagingInfo: a!pagingInfo(
    startIndex: local!gridSelection.pagingInfo.startIndex + local!batchSize,
    batchSize: local!batchSize
    )
    )
    )
    }
    )
    )
    }
    )
    }
    )
    )
    )
  • Thank you @Sachin. This works. I had a requirement to sort the docs by the latest date and tried to use sort in paginginfo on the "dateCreated" field but it gives an error regarding complex type. Any help would be appreciated. TIA
  • Hi Apoorva,

    I have tweaked the above code a bit to accommodate sorting. Please find the code snippet,

    load(
      local!data: {
        {
          id: 2,
          folderId: 10245/* Folder ids*/
          
        }
      },
      local!doc: tointeger(
        a!forEach(
          items: index(
            local!data,
            "folderId",
            {}
          ),
          expression: folder(
            fv!item,
            "documentChildren"
          )
        )
      ),
      local!pagingInfo: a!pagingInfo(
        startIndex: 1,
        batchSize: 3,
        sort: a!sortInfo(
          field: "dateCreated",
          ascending: true
        )
      ),
      local!data2: a!forEach(
        items: local!doc,
        expression: {
          id: fv!item,
          doc: document(
            fv!item,
            "name"
          ),
          uploadedBy: document(
            fv!item,
            "lastUserToModify"
          ),
          dateCreated: document(
            fv!item,
            "dateCreated"
          )
        }
      ),
      with(
        local!currentData: todatasubset(
          local!data2,
          local!pagingInfo
        ),
        a!gridField(
          label: "",
          labelPosition: "ABOVE",
          totalCount: local!currentData.totalCount,
          columns: {
            a!gridTextColumn(
              label: "Document",
              data: index(
                local!currentData.data,
                "doc",
                {}
              ),
              field: "doc",
              links: a!forEach(
                items: local!currentData.data,
                expression: a!documentDownloadLink(
                  document: fv!item.id
                )
              )
            ),
            a!gridTextColumn(
              label: "Uploaded By",
              field: "uploadedBy",
              data: index(
                local!currentData.data,
                "uploadedBy",
                {}
              )
            ),
            a!gridTextColumn(
              label: "Date Created",
              field: "dateCreated",
              data: index(
                local!currentData.data,
                "dateCreated",
                {}
              )
            )
          },
          saveInto: local!pagingInfo,
          value: local!pagingInfo
        )
      )
    )

    I have created a dictionary with all the fields required and then using todatasubset() function, have converted the same into a datasubset. I have used the final datasubset to display data in the grid.

    Hope this helps!

     

    Thanks,

    Hema