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

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.

  Discussion posts and replies are publicly visible

Parents Reply Children
  • a!fileuploadField(
    label:"file upload",
    value:ri!file,
    validations:if(fv!file.size>5000000,"Attachments above 5 MB not allowed),
    saveInto:{ri!file,a!save(ri!saveDisable,false)}/*first i declared ri!saveDisabled as true*/
    ),
    if(isnull(ri!file),
    a!textField(
    label:"description",
    value:"",
    readOnly:true),
    a!textField(
    label:"description",
    value:ri!description,
    saveInto:{ri!description,a!save(ri!saveDisable,false),}))

  • 0
    Certified Lead Developer
    in reply to RAHUL GANJI

    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
                )
              }
            )
          }
        )
      )
    )