Question
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 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
