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

  • Hi  

     Please find the below code just replace it with valid folder ids.

    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: "  ",
                      showWhen: not(
                        fv!isLast
                      )
                    )
                  }
                )
              )
            )
          )
        },
        selectionSaveInto: {},
        validations: {},
        shadeAlternateRows: true
      )
    )

     

    Regards,

    Sachin

  • Is there is a way to display the fields one after the other in vertical rows? Thanks!
  • 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