Submit button being disabled if no changes are made to the editable grid

Question

Under the grid, display a SAVE button. The button should be disabled by default.
If any changes are made to the grid (i.e. if a row is added, a row is removed, or data entered for a row is changed), the button should be enabled. After the button is clicked, it should become disabled again. Any help will be appreciated.

Mike Schmitt · Accepted Answer

Here's my quick version of what I was thinking of. I In my example the main data is in local!itemList, though in a real implementation that could be replaced with a rule input value feeding in external (and editable) data. The with() variable takes care of keeping track of whether any changes have been made, with the added bonus that it'll turn back off if changes are reverted. 
 load(
 local!itemList: {
 {
 item: "Sofa",
 status: "unoccupied"
 },
 {
 item: "TV",
 status: "off"
 }
 },
 local!itemListOriginalValue: local!itemList,
 with(
 local!changesMade: not(
 exact(
 tostring(local!itemList),
 tostring(local!itemListOriginalValue)
 )
 ),
 
 a!formLayout(
 contents: {
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "Item"
 ),
 a!gridLayoutHeaderCell(
 label: "Status"
 )
 },
 rows: a!forEach(
 local!itemList,
 a!gridRowLayout(
 contents: {
 a!textField(
 value: fv!item.item,
 readonly: true()
 ),
 a!textField(
 value: fv!item.status,
 saveInto: fv!item.status,
 readOnly: false()
 )
 }
 )
 )
 )
 },
 buttons: a!buttonLayout(
 primaryButtons: a!buttonWidget(
 label: "SAVE",
 style: "PRIMARY",
 disabled: not(local!changesMade),
 saveInto: {
 a!save(
 local!itemListOriginalValue,
 local!itemList
 )
 }
 )
 )
 )
 )
)

RajHasti · Answer

Hello , 
 
 Please check if below code snippet works for you.Look for this local variable local!submitDisabled. 
 
 load(
 local!submitDisabled: true,

 
 local!departments: {
 "Finance",
 "Human Resources",
 "Marketing",
 "Sales",
 "IT"
 },
 local!categories: {
 "Hardware",
 "Software",
 "Office Supplies",
 "Miscellaneous"
 },
 local!addresses: {
 {
 id: 1,
 shippingAddress: "123 Main St",
 unit: "",
 city: "Springfield",
 stateOrProvince: "AL",
 zipCode: "36784"
 },
 {
 id: 2,
 shippingAddress: "62201 Oak Blvd",
 unit: "",
 city: "Phoenix",
 stateOrProvince: "AZ",
 zipCode: "85032"
 },
 {
 id: 3,
 shippingAddress: "872 Park Ave",
 unit: "179",
 city: "Milwaukee",
 stateOrProvince: "WI",
 zipCode: "53201"
 },
 {
 id: 4,
 shippingAddress: "11955 Democracy Dr",
 unit: "1700",
 city: "Reston",
 stateOrProvince: "VA",
 zipCode: "20190"
 }
 },
 a!formLayout(
 label: "New Purchase Request",
 contents: {
 a!gridLayout(
 label: "Items",
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "Description"
 ),
 a!gridLayoutHeaderCell(
 label: "Category"
 ),
 a!gridLayoutHeaderCell(
 label: "Qty",
 align: "RIGHT"
 ),
 a!gridLayoutHeaderCell(
 label: "Unit Price",
 align: "RIGHT"
 )
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE",
 weight: 3
 ),
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE",
 weight: 3
 ),
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE"
 ),
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE",
 weight: 2
 )
 },
 rows: {
 a!forEach(
 items: ri!purchaseRequest.items,
 expression: a!gridRowLayout(
 contents: {
 a!textField(
 value: fv!item.desc,
 saveInto: {
 fv!item.desc,
 a!save(
 local!submitDisabled,
 false
 )
 },
 required: true,
 validations: {
 if(
 and(
 not(
 isnull(
 fv!item.desc
 )
 ),
 len(
 fv!item.desc
 ) => 100
 ),
 "Description must be less than 100 characters",
 ""
 )
 },
 validationGroup: "main"
 ),
 a!dropdownField(
 placeholderLabel: "--- Select a Category ---",
 choiceLabels: local!categories,
 choiceValues: local!categories,
 value: fv!item.category,
 saveInto: {
 fv!item.category,
 a!save(
 local!submitDisabled,
 false
 )
 },
 required: true,
 validationGroup: "main"
 ),
 a!integerField(
 value: fv!item.qty,
 saveInto: {
 fv!item.qty,
 a!save(
 local!submitDisabled,
 false
 )
 },
 required: true,
 validations: {
 if(
 tointeger(
 fv!item.qty
 ) < 1,
 "Quantity must be greater than zero",
 ""
 )
 },
 validationGroup: "main",
 align: "RIGHT"
 ),
 a!floatingPointField(
 value: fv!item.unitPrice,
 saveInto: {
 fv!item.unitPrice,
 a!save(
 local!submitDisabled,
 false
 )
 },
 required: true,
 validations: {
 if(
 todecimal(
 fv!item.unitPrice
 ) < 0,
 "Price must be greater than zero",
 ""
 )
 },
 validationGroup: "main",
 align: "RIGHT"
 )
 }
 )
 ),
 a!gridRowLayout(
 contents: {
 a!textField(
 readOnly: true
 ),
 a!textField(
 readOnly: true
 ),
 a!textField(
 readOnly: true
 ),
 a!textField(
 value: "Total",
 readOnly: true,
 align: "RIGHT"
 )
 }
 )
 },
 addRowLink: a!dynamicLink(
 label: "Add New Item",
 saveInto: {
 a!save(
 local!submitDisabled,
 false
 ),
 a!save(
 ri!purchaseRequest.items,
 append(
 ri!purchaseRequest.items,
 {
 desc: "",
 category: "",
 qty: null,
 unitPrice: null
 }
 )
 )
 }
 ),
 rowHeader: 1
 )
 },
 buttons: a!buttonLayout(
 primaryButtons: {
 a!buttonWidget(
 label: "Submit",
 saveInto: {},
 submit: true,
 style: "PRIMARY",
 /* Prevent form submission while a new address is being configured */
 disabled: local!submitDisabled,
 validationGroup: "main"
 )
 },
 secondaryButtons: {
 a!buttonWidget(
 label: "Cancel",
 value: true,
 saveInto: ri!cancel,
 submit: true,
 validate: false
 )
 }
 )
 )
)

Mike Schmitt · Answer

Set a LOAD variable (or if on 19.2, a localVariable with no autorefresh) equal to the original value of the data used to populate the grid. Then set a with / autorefreshing variable that compares the original data with the current data, which evaluates to (for example) true() if changes have been made. Use that variable to help determine the state of the SAVE button. And finally, when SAVE is clicked, you would by some means cause the "original value" variable to be updated with the current data.

Mike Schmitt · Answer

a!textField automatically performs its saveInto when the field is unfocused (i.e. the user clicks or tabs away); the WITH() variable won't update until after that. In general, it updates fast enough that the user can't get to the button in time even if they change something and try clicking right away. However if you need it to be even tighter in timing, you can add ' refreshafter: "KEYPRESS" ' to the a!textField which will cause the saveInto to be immediately executed every time the user changes something. This has performance implications if you use it too much or in too many fields in a form, but with limited usage it works fine. If I understand your scenario correctly, this is probably the solution you're looking for.

Mike Schmitt · Answer

There's no easy way to do this that I know of. One of the only suggestions I have might be, after the deletion is completed, have the user chain forward into a user input task that has no Submit button - and on that task, show a record link with the record type set but no record identifier - i believe this will cause them to be linked to the record listing when they click it. (The task would need to time out after a few minutes to end the process in the background.) The text for the link could say something like, "Click here to return to Record Listing", along with some explanation that the record has now been deleted and to not try clicking back to "summary" etc.

Mike Schmitt · Answer

Field properties like Label and Instructions don't show up when used in an editable grid. You could always make an extra column in the grid where you store information like max filesize, etc, or try putting a help tooltip on the column header with extra details like this.

Mike Schmitt · Answer

Thanks for providing those. I'm guessing your Save button is set to just be disabled when you have ri!saveDisabled set to true (though i'm not too sure what's going on since you're setting it to false in these saveIntos). 
 Now that I think about it - while it is possible to validate based on the uploaded file's Size, I believe you won't be able to affect the Save button's enabled status based on the uploaded file's size, at least using "officially supported" functionality. 
 So I would suggest you take a different approach for the value of your "saveDisable" value. I would suggest you make it as a with() variable (or if 19.2 already, an a!refreshVariable inside a!localVariables set to refresh on referenced variable change). For the moment I'll assume you're pre-19.2 and therefore use with() since it's simpler to explain. 
 Declare a with() variable, local!disableSave, and set it to something like "isnull(ri!description)". That way as soon as a description is entered, the Save button will be enabled. Take for example the following code, which enables the SAVE button only when a document is uploaded and a description is entered (and throws a validation error when above 5MB is uploaded): 
 load(
 local!document: null(),
 local!description: null(),
 
 with(
 local!disableSave: or(
 isnull(local!document),
 isnull(local!description)
 ), /* will update any time document or description are changed */
 
 a!sectionLayout(
 label: "Test Simple Document Upload",
 contents: {
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(label: "Document"),
 a!gridLayoutHeaderCell(label: "Description")
 },
 rows: a!gridRowLayout(
 contents: {
 a!fileUploadField(
 value: local!document,
 saveInto: local!document,
 description: local!description,
 maxSelections: 1,
 validations: {
 if(
 fv!files.size > 5 * 1024 * 1024,
 "Attachments above 5MB are not allowed.",
 null()
 )
 }
 ),
 a!textField(
 value: local!description,
 saveInto: local!description,
 disabled: isnull(local!document)
 )
 }
 )
 ),
 a!buttonArrayLayout(
 align: "CENTER",
 buttons: {
 a!buttonWidget(
 label: "Save",
 style: "PRIMARY",
 disabled: local!disableSave
 )
 }
 )
 }
 )
 )
)

Submit button being disabled if no changes are made to the editable grid

Top Replies