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
Quick question, by any chance are you using it in the record view or report? because as per documentation it will not work
For preview, refer this discussion
community.appian.com/.../62830
Hi gayathris0003 I checked the rule inputs there is no any rule input created using record type. Thanks
Where are you calling this interface created?
in User input task or Record views or Reports?
Hi, gayathris0003 this interface is embedded inside the parent interface. The parent interface is used as a report on the site.
In context of the report, File upload will not work. Because reports are meant to show only statistics(read only). If you want to upload a file consider keeping in the process model and call it.if you are in latest version you can call interface directly in site.
Ok. If reports are in read-only form then why the SKU and Device Name columns they are in editable ?
gayathris0003 - I think calling an interface directly in the site is an alternate that can be used instead of creating a report and using it there. Directly calling the interface might not work for file upload.
As you've suggested, the interface can be embedded into a process model and it can be configured as an action in the site.
,
You can save the fields(text values) by using functions such as writetoDataStoreEntity in a button save into. But for documents, Appian expects a form to be submitted. Only on form submit, the file will generate an Id and store the document in Appian. Hence the file-upload field alone is disabled in reports. Hope this helps you!
Good question, other fields can be used for filters like date search, free text search and etc. but file using file upload search is not common.