Forum Discussion

VivekVishwanat3's avatar
VivekVishwanat3
Qrew Cadet
6 years ago

dialog box?

Can I get dialog box displayed when I click save button of the Form. and the dialog box should contain 
  •  "Confirm" button  
  • "cancel" Button
  • updated Fields in the Dialogbox

8 Replies

  • Here is a demo:






    Confirm Changes Before Save ~ Edit Record 1
    https://haversineconsulting.quickbase.com/db/bnqqxfsbz?a=er&rid=1

    Pastie Database
    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=656

    Notes:

    (1) This demo combines several scripting concepts that may make it look complex but in reality each of these ideas has been presented in prior examples. The demo was test in Chrome but should work in all modern browsers.

    (2) The demo saves the original click handler for the Save button and otherwise intercepts the click event. If the user wants to save the record after being presented with a dialog box displaying a summary of the changes, the original click handler is invoked. In the high-stakes world of customizing low code applications such as QuickBase with script this is the preferred way to alter the behavior of the Save button as it does not alter QuickBase's code.

    (3) The demo build a data structure of all <input> fields whose value has changed since the form was first opened.

    (4) An Underscore template was used to build the miniature <table> displayed in the dialog box. This template can be modified and styled as desired. 

    (5) The dialog box was built using jQueryUI's dialog method and its appearance and functionality can easily be adopted by changing various configuration parameters.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      I don't see what is so amazing about this solution. It merely combines four concepts that have been used before using technology that is in some cases a decade old:

      (1) generic method to intercept clicks on the save button
      (2) detects which fields on the forms have changed values
      (3) uses an Underscore template to generate the HTML displayed in the dialog
      (4) Uses the jQueryUI Dialog box to present a custom  message and buttons

      I would more impressed if the answer used say machine learning library such as TensorFlowJS or the rad Julia Notebook interface to QuickBase

      TensorFlowJS
      A JavaScript library for training and deploying ML models in the browser and on Node.js
      https://js.tensorflow.org/

      JuliaBox
      Run Julia in your Browser
      https://JuliaBox.com
  • JasonJohnson's avatar
    JasonJohnson
    Qrew Assistant Captain
    I have tested the code and for me it is only showing one field (#39) as changed. I can change all other fields and leave 39 alone and the box pops up with no data. Is there a change to be made and I am missing it?
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      I would have to see your application. If I were to revisit this application I would use another method of detecting changes. The approach I used compared the value of hidden field (eg _fid_oval_6) with the value of the field at the time the form was attempted to be saved (eg _fid_6). This is not actually the best way to accomplish the task as the hidden fields sometimes have a different formatting then the displayed field value. For example, phone numbers have a hidden field formatted as 8005551212 while the displayed value might be (800) 555-1212. A better approach wold be to just capture the field value when the form first opens before any edits are applied and to not reference the hidden field QuickBase creates.

      To debug your situation just console.log all the relevant variables:
       console.log{oldValue, newValue, fid, name);
      It will be obvious what the problem is. Also note I did not attempt to deal with multiline test fields and some other lesser used field types.