Uploading image in editable grid for each row

Hello,

There is a requirement in my project where I want to upload the image in an editable grid for every device and give a preview before submitting

a!localVariables(
  local!counter: 0,
  local!deleteDeviceIds,
  local!device: a!refreshVariable(
    value: rule!SABOT_GetAllDeviceSku(),
    refreshOnVarChange: local!counter
  ),
  local!deviceCount: length(local!device),
  local!result: null,
  local!showButton: false,
  local!tableName: "SABOT_DEVICE_SKU",
  local!DEV_ID: rule!SABOT_GetSABOT_REFR_FLDByColumn(local!tableName, "DEV_ID"),
  local!SKU: rule!SABOT_GetSABOT_REFR_FLDByColumn(local!tableName, "SKU"),
  local!DEV_NME: rule!SABOT_GetSABOT_REFR_FLDByColumn(local!tableName, "DEV_NME"),
  local!DEV_IMAG_NBR: rule!SABOT_GetSABOT_REFR_FLDByColumn(local!tableName, "DEV_IMAG_NBR"),
  local!DSPL_ORDR_NBR: rule!SABOT_GetSABOT_REFR_FLDByColumn(local!tableName, "DSPL_ORDR_NBR"),
  local!ACTV_CD: rule!SABOT_GetSABOT_REFR_FLDByColumn(local!tableName, "ACTV_CD"),
  a!boxLayout(
    label: "Spectrum Barter Account Devices",
    /*isCollapsible: true(),*/
    /*accessibilityText: "Spectrum Barter Account Device list",*/
    contents: {
      a!gridLayout(
        label: "",
        labelPosition: "ABOVE",
        totalCount: local!deviceCount,
        emptyGridMessage: "No Device SKUs found, use the Add Device SKU link to create one",
        headerCells: {
          a!gridLayoutHeaderCell(label: local!DEV_ID.FLD_LABEL_TXT),
          a!gridLayoutHeaderCell(label: local!SKU.FLD_LABEL_TXT),
          a!gridLayoutHeaderCell(label: local!DEV_NME.FLD_LABEL_TXT),
          a!gridLayoutHeaderCell(label: local!DEV_IMAG_NBR.FLD_LABEL_TXT),
          a!gridLayoutHeaderCell(label: "Upload Device Image"),
          a!gridLayoutHeaderCell(
            label: local!DSPL_ORDR_NBR.FLD_LABEL_TXT
          ),
          a!gridLayoutHeaderCell(label: local!ACTV_CD.FLD_LABEL_TXT),
          a!gridLayoutHeaderCell(label: "")
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "NARROW",
            showWhen: isusermemberofgroup_21r2(loggedInUser(), cons!SABOT_ADMIN_GROUP)
          ),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 4),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 1),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 1),
          a!gridLayoutColumnConfig(width: "ICON"),
          a!gridLayoutColumnConfig(width: "ICON")
        },
        rows: {
          a!forEach(
            items: local!device,
            expression: a!gridRowLayout(
              id: fv!index,
              contents: {
                a!integerField(
                  /*value: fv!item.DEV_ID,*/
                  /*readOnly: true*/
                  labelPosition: if(ri!readOnly, "ADJACENT", "ABOVE"),
                  instructions: local!DEV_ID.INSTRTN_TXT,
                  helpTooltip: local!DEV_ID.HELP_TOOLTIP_TXT,
                  value: fv!item.DEV_ID,
                  saveInto: fv!item.DEV_ID,
                  required: local!DEV_ID.REQR_CD,
                  requiredMessage: local!DEV_ID.REQR_MSG_TXT,
                  /*   NOTE this is the only time we override the ri!readOnly input               */
                  readOnly: true,
                  validations: if(
                    isnull(local!DEV_ID.MAX_LGTH_QTY),
                    "",
                    if(
                      len(fv!item.DEV_ID) > local!DEV_ID.MAX_LGTH_QTY,
                      "The data entered is " & len(fv!item.DEV_ID) & " characters long, but the maximum characters allowed is " & local!DEV_ID.MAX_LGTH_QTY,
                      {}
                    )
                  ),
                  accessibilityText: local!DEV_ID.ACCESSIBILITY_TXT
                ),
                a!textField(
                  /*value: fv!item.SKU,*/
                  /*saveInto: fv!item.SKU*/
                  /*label: "SKU " & fv!index,*/
                  labelPosition: if(ri!readOnly, "ADJACENT", "ABOVE"),
                  instructions: local!SKU.INSTRTN_TXT,
                  helpTooltip: local!SKU.HELP_TOOLTIP_TXT,
                  placeholder: local!SKU.PLACEHOLDER_LABEL_TXT,
                  value: fv!item.SKU,
                  saveInto: {
                    fv!item.SKU,
                    a!save(local!showButton, true)
                  },
                  required: local!SKU.REQR_CD,
                  requiredMessage: local!SKU.REQR_MSG_TXT,
                  readOnly: ri!readOnly,
                  disabled: ri!readOnly,
                  validations: if(
                    isnull(local!SKU.MAX_LGTH_QTY),
                    "",
                    if(
                      len(fv!item.SKU) > local!SKU.MAX_LGTH_QTY,
                      "The data entered is " & len(fv!item.SKU) & " characters long, but the maximum characters allowed is " & local!SKU.MAX_LGTH_QTY,
                      {}
                    )
                  ),
                  accessibilityText: local!SKU.ACCESSIBILITY_TXT
                ),
                a!textField(
                  /*value: fv!item.DEV_NME,*/
                  /*saveInto: fv!item.DEV_NME*/
                  label: "DEV_NME " & fv!index,
                  labelPosition: if(ri!readOnly, "ADJACENT", "ABOVE"),
                  instructions: local!DEV_NME.INSTRTN_TXT,
                  helpTooltip: local!DEV_NME.HELP_TOOLTIP_TXT,
                  value: fv!item.DEV_NME,
                  saveInto: fv!item.DEV_NME,
                  required: local!DEV_NME.REQR_CD,
                  requiredMessage: local!DEV_NME.REQR_MSG_TXT,
                  readOnly: ri!readOnly,
                  disabled: ri!readOnly,
                  validations: if(
                    isnull(local!DEV_NME.MAX_LGTH_QTY),
                    "",
                    if(
                      len(fv!item.DEV_NME) > local!DEV_NME.MAX_LGTH_QTY,
                      "The data entered is " & len(fv!item.SKU) & " characters long, but the maximum characters allowed is " & local!DEV_NME.MAX_LGTH_QTY,
                      {}
                    )
                  ),
                  accessibilityText: local!DEV_NME.ACCESSIBILITY_TXT
                ),
                a!imageField(
                  size: "MEDIUM",
                  images: if(isnull(ri!file),
                  {},
                  a!documentImage(
                    document: ri!file,
                    /*altText: fv!item.DEV_IMAG_NBR*/
                  )
                 )
                ),
                a!fileUploadField(
                  /*label: "Image Upload",*/
                  /*labelPosition: "",*/
                  required: "",
                  buttonStyle: "",
                  buttonSize: "SMALL",
                  maxSelections: 1,
                  target: cons!SABOT_SAVING_DEVICE_IMAGE,
                  value: fv!item.DEV_IMAG_NBR,
                  saveInto: {
                    fv!item.DEV_IMAG_NBR,
                    a!save(ri!file,fv!item.DEV_IMAG_NBR)
                  },
                  validations: a!localVariables(
                    local!invalidExtensions: difference(upper(fv!files.extension), { "PNG", "JPG" }),
                    if(
                      length(local!invalidExtensions) > 0, 
                      "Attachments must be images. Remove: " & 
                      index(fv!files, "name", wherecontains(local!invalidExtensions, upper(fv!files.extension)), {}), 
                      ""
                    )
                  )
                ),
                a!integerField(
                  /*value: fv!item.DSPL_ORDR_NBR,*/
                  /*saveInto: fv!item.DSPL_ORDR_NBR*/
                  labelPosition: if(ri!readOnly, "ADJACENT", "ABOVE"),
                  instructions: local!DSPL_ORDR_NBR.INSTRTN_TXT,
                  helpTooltip: local!DSPL_ORDR_NBR.HELP_TOOLTIP_TXT,
                  value: fv!item.DSPL_ORDR_NBR,
                  saveInto: fv!item.DSPL_ORDR_NBR,
                  required: local!DSPL_ORDR_NBR.REQR_CD,
                  requiredMessage: local!DSPL_ORDR_NBR.REQR_MSG_TXT,
                  readOnly: ri!readOnly,
                  disabled: ri!readOnly,
                  validations: if(
                    isnull(local!DSPL_ORDR_NBR.MAX_LGTH_QTY),
                    "",
                    if(
                      len(fv!item.DSPL_ORDR_NBR) > local!DSPL_ORDR_NBR.MAX_LGTH_QTY,
                      "The data entered is " & len(fv!item.DSPL_ORDR_NBR) & " characters long, but the maximum characters allowed is " & local!DSPL_ORDR_NBR.MAX_LGTH_QTY,
                      {}
                    )
                  ),
                  accessibilityText: local!DSPL_ORDR_NBR.ACCESSIBILITY_TXT
                ),
                a!radioButtonField(
                  /*choiceLabels: {"Yes", "No"},*/
                  /*choiceValues: {true,false},*/
                  /*value: fv!item.ACTV_CD,*/
                  /*saveInto: fv!item.ACTV_CD,*/
                  /*choiceLayout: "COMPACT"*/
                  labelPosition: if(ri!readOnly, "ADJACENT", "ABOVE"),
                  instructions: local!ACTV_CD.INSTRTN_TXT,
                  helpTooltip: local!ACTV_CD.HELP_TOOLTIP_TXT,
                  choiceLabels: { "Yes", "No" },
                  choiceValues: { true, false },
                  value: fv!item.ACTV_CD,
                  saveInto: {
                    fv!item.ACTV_CD,
                    a!save(local!showButton, true)
                  },
                  required: local!ACTV_CD.REQR_CD,
                  requiredMessage: local!ACTV_CD.REQR_MSG_TXT,
                  /*readOnly: ri!readOnly,*/
                  disabled: ri!readOnly,
                  choiceLayout: "COMPACT",
                  validations: if(
                    isnull(local!ACTV_CD.MAX_LGTH_QTY),
                    "",
                    if(
                      len(fv!item.ACTV_CD) > local!ACTV_CD.MAX_LGTH_QTY,
                      "The data entered is " & len(fv!item.ACTV_CD) & " characters long, but the maximum characters allowed is " & local!ACTV_CD.MAX_LGTH_QTY,
                      {}
                    )
                  ),
                  accessibilityText: local!ACTV_CD.ACCESSIBILITY_TXT
                ),
                a!imageField(
                  label: "delete " & fv!index,
                  images: a!documentImage(
                    document: a!iconIndicator("REMOVE"),
                    altText: "Remove Device",
                    caption: "Remove " & fv!item.SKU,
                    link: a!dynamicLink(
                      value: fv!index,
                      saveInto: {
                        if(
                          isnull(fv!item.DEV_ID),
                          {},
                          a!save(
                            local!deleteDeviceIds,
                            append(local!deleteDeviceIds, fv!item.DEV_ID)
                          )
                        ),
                        a!save(
                          local!device,
                          remove(local!device, save!value)
                        ),
                        a!save(local!showButton, true)
                      }
                    )
                  ),
                  size: "ICON"
                )
              }
            )
          )
        },
        selectionSaveInto: {},
        addRowLink: a!dynamicLink(
          label: "Add Device SKU",
          value: {
            DEV_NME: "new device type",
            DSPL_ORDR_NBR: 999,
            ACTV_CD: true
          },
          saveInto: {
            a!save(
              local!device,
              append(local!device, save!value)
            ),
            a!save(local!deviceCount, local!deviceCount + 1)
          }
        ),
        validations: {},
        shadeAlternateRows: true
      ),
      /*},*/
      a!buttonLayout(
        primaryButtons: {
          a!buttonWidget(
            label: "Submit",
            submit: true,
            style: "PRIMARY",
            saveInto: {
              a!startProcess(
                processModel: cons!SABOT_DEVICE_SKU_CREATE_UPDATE_PM,
                processParameters: {
                  deviceSku: local!device,
                  deleteDeviceIds: local!deleteDeviceIds,
                  /*cancel: local!cancel,*/
                  /*readOnly: ri!readOnly,*/
                  onSuccess: a!save(local!result, "Yee ha!"),
                  onError: a!save(local!result, "Uh Oh")
                }
              ),
              a!save(local!counter, local!counter + 1),
              a!save(local!showButton, false)
            },
            disabled: local!showButton<>true
          )
        },
        secondaryButtons: {
          a!buttonWidget(
            label: "Back",
            value: null,
            /*saveInto: local!cancel,*/
            saveInto: ri!category,
            submit: true,
            style: "DESTRUCTIVE",
            validate: false,
          )
        },
        showWhen: or(isnull(ri!readOnly), not(ri!readOnly))
      )
    }
  )
)
. I tried few things but it didn't work. Any ideas on this will be helpful. I also find something wrong in the upload field. It shows or works in the interface but appears readOnly in the UI.

I am adding the UI, Interface, and code with this discussion. You will find the image and upload field column in code at lines 134 and 144.

Kindly reply if you find something wrong or want to understand something. I will be quick.

Thanks

  Discussion posts and replies are publicly visible