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
  • 0
    Certified Lead Developer

    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.

Reply
  • 0
    Certified Lead Developer

    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.

Children
  • I actually have a column as editable--text which iam saving if any editing to the description column also...How can I recognise those changes made to each row and enable the save button based on that

  • 0
    Certified Lead Developer
    in reply to RAHUL GANJI

    The method I described should still be sufficient I think.  Or are you trying to recognize changes on a row-by-row basis?  If you only have one SAVE button for the whole form (which was my assumption), then you shouldn't need to worry about this.

  • +1
    Certified Lead Developer
    in reply to RAHUL GANJI

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

  • If I edit the description only the save button should be enabled and I should be able to save the changes 

    I think I couldnot do it this way

  • You are taking it as a CDT right?but I have 2 different lists for documents and their description...I couldnot understand how to handle this

  • 0
    Certified Lead Developer
    in reply to RAHUL GANJI

    Sorry, I'm not sure I follow -- you didn't mention documents at all before.  Perhaps you can share a bit more detail as to what you're actually trying to do with your grid?

  • I have a grid which displays the document(can download the doc through documentdownload link),document description,uploaded on,remove columns..

    Attaching a new file link is in the main interface..We can attach the documents row by row...

    I have a seperate expression rule for the rows displaying (all the code for deleting included there)

    Iam able to disable the save first and enable it for the attachment link only...iam unable to do it for the document description,remove columns...Can you plz help me out

  • 0
    Certified Lead Developer
    in reply to RAHUL GANJI

    I'm unclear what's still not working for you - could you attach some screenshots and/or sample code?  (please use the Insert Code box to preserve formatting and not blow up the post)

  • Can you clarify a few things?

    1) You have two buttons (at least), one to allow uses to add a new file, and one that allows users to save changes to the editable items in your grid.  

    2) The attach file button should be disabled when a user is editing data in the grid, but the "save" button should be enabled if there are changes?

    3) You have a complete expression rule that that generates a single row (you are not, for example, calling gridRowLayout() in an a!foreach(), but are calling your own custom crafted expression that generates each row)?

    If the above are true, you could use a single variable (as in the examples people have provided) to generate enabled state/disabled state.  Or you could use two variables if they may act independently.

    What you will likely have to do  do, is pass the variable(s) controlling those states into the expression that generates the rows, so you can update it in the fields that should enable the save button and disable the attach button.

    If you have a more complete case to share, we can probably help you further (maybe supply a code example)?

  • Yeah I got it with passing the boolean variable to make the button disabled from expression rule to interface

    Thank you