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 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
For preview, refer this discussion
community.appian.com/.../62830