Skip to main content
S
shivat246139
March 17, 2025
Solved

issue on file upload component and grid

  • March 17, 2025
  • 2 replies
  • 0 views

I am currently working on a file upload component and do not require any process model for my use case. I have successfully uploaded an Excel file containing data for five users. To read this data, I have written an expression rule, which is functioning correctly. However, I am encountering an issue: after uploading the Excel file and clicking the submit button, I need to display the data in a read-only grid. Could anyone provide a suggestion or solution for this matter?

Thank you in advance for your assistance.

a!localVariables(
  a!formLayout(
    label: "",
    contents: {
      a!sectionLayout(
        label: "Create Users in Bulk",
        contents: {
          a!linkField(
            instructions: "Add additional rows with user information based on the header",
            links: {
              a!documentDownloadLink(
                label: "CSV Template",
                document: cons!GUM_USER_CSV_DOC
              )
            }
          ),
          a!fileUploadField(
            label: "User List",
            labelPosition: "ABOVE",
            target: cons!TAP_TARGET_FOLDER,
            maxSelections: 1,
            value: ri!excelDocument,
            saveInto: { ri!excelDocument },
            required: true,
            
          )
        }
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Submit",
          value: false,
          saveInto: ri!cancel,
          submit: true,
          style: "SOLID",
          loadingIndicator: true
        )
      },
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: true,
          saveInto: { ri!cancel },
          submit: true,
          style: "OUTLINE",
          validate: false
        )
      }
    )
  ),
  rule!TAP_upload(
    userdata: ri!excelDocument,
    showwhen: ri!cancel = true()
  )
)

#uicode -tap_upload#
a!localVariables(
  local!userData: rule!TAP_ReadUsers(document:ri!userdata),
  
  {
    a!sectionLayout(
      label: "",
      contents: {
        a!gridField(
          data: local!userData,
          columns: {
            a!gridColumn(
              label: "Username",
              sortField: "username",
              value: fv!row.username
            ),
            a!gridColumn(
              label: "First Name",
              sortField: "firstName",
              value: fv!row.firstName
            ),
            a!gridColumn(
              label: "Last Name",
              sortField: "lastName",
              value: fv!row.lastName
            ),
            a!gridColumn(
              label: "Email",
              sortField: "email",
              value: fv!row.email
            )
          }
        )
      },
      showWhen: ri!showwhen
    )
  }
)

Best answer by mathieud0001

Here is a working example:

1. To be able to access the files, you need to submit the form if you are in a start or task form. Otherwise, you can use submitUploadedFiles as I have demonstrated.

2. You'll need the [mention:bbc0ee004d9b43bfacb170c0bec475f9:f7d226abd59f475c9d224a79e3f0ec07] plugin to have access to the readtextfromfile function.

a!localVariables(
  local!userData,
  local!csvFile,
  local!csvData,
  a!formLayout(
    label: "",
    contents: {
      a!sectionLayout(
        label: "Create Users in Bulk",
        contents: {
          a!linkField(
            instructions: "Add additional rows with user information based on the header",
            links: {
              a!documentDownloadLink(
                label: "CSV Template",
                document: cons!S_DRUG_PRODUCTS
              )
            }
          ),
          a!fileUploadField(
            label: "User List",
            labelPosition: "ABOVE",
            target: cons!S_FOLDER_UPLOAD,
            maxSelections: 1,
            value: ri!excelDocument,
            saveInto: {
              ri!excelDocument,
              if(
                a!isNotNullOrEmpty(ri!excelDocument),
                a!submitUploadedFiles(
                  documents: ri!excelDocument,
                  onSuccess: {
                    a!save(
                      local!csvFile,
                      readtextfromfile(ri!excelDocument, true)
                    ),
                    a!save(
                      local!csvData,
                      a!localVariables(
                        local!csvLines: split(local!csvFile, char(10)),
                        /* Splitting by newline */
                        a!forEach(
                          items: local!csvLines,
                          expression: a!localVariables(
                            local!items: split(fv!item, ","),
                            if(
                              fv!index=1,
                              {}, /* Skip first line */
                              /* Splitting by comma */
                              a!map(
                                username: local!items[1],
                                firstName: local!items[2],
                                lastName: local!items[3],
                                email: local!items[4]
                              )
                            )
                          )
                        )
                      )
                    )
                  }
                ),
                {}
              )
            },
            required: true
          )
        }
      ),
      a!gridField(
        data: todatasubset(local!csvData).data,
        columns: {
          a!gridColumn(
            label: "Username",
            sortField: "username",
            value: fv!row.username
          ),
          a!gridColumn(
            label: "First Name",
            sortField: "firstName",
            value: fv!row.firstName
          ),
          a!gridColumn(
            label: "Last Name",
            sortField: "lastName",
            value: fv!row.lastName
          ),
          a!gridColumn(
            label: "Email",
            sortField: "email",
            value: fv!row.email
          )
        }
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Submit",
          value: false,
          saveInto: ri!cancel,
          submit: true,
          style: "SOLID",
          loadingIndicator: true
        )
      },
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: true,
          saveInto: { ri!cancel },
          submit: true,
          style: "OUTLINE",
          validate: false
        )
      }
    )
  )
)

2 replies

O
orlandos8991
March 18, 2025

Hi. The formLayout() component is a top-level component, meaning you can't have multiple components at the same level. To prevent your interface from throwing an error, you can place your "rule!TAP_upload" interface inside the "contents" parameter of formLayout(). Refer the example below:

a!formLayout(
  label: "Form",
  contents: {
    a!sectionLayout(
      label: "Section",
      contents: {}
    ),
    rule!TAP_upload(
      userdata: ri!excelDocument,
      showwhen: ri!cancel = true()
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidget(
        label: "Submit",
        submit: true,
        style: "SOLID",
        loadingIndicator: true
      )
    },
    secondaryButtons: {
      a!buttonWidget(
        label: "Cancel",
        value: true,
        saveInto: {},
        submit: true,
        style: "OUTLINE",
        validate: false
      )
    }
  )
)

mathieud0001
mathieud0001Answer
March 18, 2025

Here is a working example:

1. To be able to access the files, you need to submit the form if you are in a start or task form. Otherwise, you can use submitUploadedFiles as I have demonstrated.

2. You'll need the [mention:bbc0ee004d9b43bfacb170c0bec475f9:f7d226abd59f475c9d224a79e3f0ec07] plugin to have access to the readtextfromfile function.

a!localVariables(
  local!userData,
  local!csvFile,
  local!csvData,
  a!formLayout(
    label: "",
    contents: {
      a!sectionLayout(
        label: "Create Users in Bulk",
        contents: {
          a!linkField(
            instructions: "Add additional rows with user information based on the header",
            links: {
              a!documentDownloadLink(
                label: "CSV Template",
                document: cons!S_DRUG_PRODUCTS
              )
            }
          ),
          a!fileUploadField(
            label: "User List",
            labelPosition: "ABOVE",
            target: cons!S_FOLDER_UPLOAD,
            maxSelections: 1,
            value: ri!excelDocument,
            saveInto: {
              ri!excelDocument,
              if(
                a!isNotNullOrEmpty(ri!excelDocument),
                a!submitUploadedFiles(
                  documents: ri!excelDocument,
                  onSuccess: {
                    a!save(
                      local!csvFile,
                      readtextfromfile(ri!excelDocument, true)
                    ),
                    a!save(
                      local!csvData,
                      a!localVariables(
                        local!csvLines: split(local!csvFile, char(10)),
                        /* Splitting by newline */
                        a!forEach(
                          items: local!csvLines,
                          expression: a!localVariables(
                            local!items: split(fv!item, ","),
                            if(
                              fv!index=1,
                              {}, /* Skip first line */
                              /* Splitting by comma */
                              a!map(
                                username: local!items[1],
                                firstName: local!items[2],
                                lastName: local!items[3],
                                email: local!items[4]
                              )
                            )
                          )
                        )
                      )
                    )
                  }
                ),
                {}
              )
            },
            required: true
          )
        }
      ),
      a!gridField(
        data: todatasubset(local!csvData).data,
        columns: {
          a!gridColumn(
            label: "Username",
            sortField: "username",
            value: fv!row.username
          ),
          a!gridColumn(
            label: "First Name",
            sortField: "firstName",
            value: fv!row.firstName
          ),
          a!gridColumn(
            label: "Last Name",
            sortField: "lastName",
            value: fv!row.lastName
          ),
          a!gridColumn(
            label: "Email",
            sortField: "email",
            value: fv!row.email
          )
        }
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Submit",
          value: false,
          saveInto: ri!cancel,
          submit: true,
          style: "SOLID",
          loadingIndicator: true
        )
      },
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: true,
          saveInto: { ri!cancel },
          submit: true,
          style: "OUTLINE",
          validate: false
        )
      }
    )
  )
)

    Terms & ConditionsAccessibility statement