dialog box?

  • 2
  • 2
  • Question
  • Updated 3 months ago
  • Answered
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
Photo of Vivek Vishwanath

Vivek Vishwanath

  • 474 Points 250 badge 2x thumb

Posted 7 months ago

  • 2
  • 2
Photo of Scott

Scott

  • 314 Points 250 badge 2x thumb
Howdy Vivek,

The following link should help you out.  You will have to slightly modify the code to apply to the save button, instead of the delete button.  Shouldn't be too difficult. 

https://community.quickbase.com/quickbase/topics/is-there-a-way-to-make-it-harder-to-delete-a-record...

Scott
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
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.
(Edited)
Photo of Scott

Scott

  • 314 Points 250 badge 2x thumb
Amazing!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
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
Photo of Jason

Jason

  • 1,022 Points 1k badge 2x thumb
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?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
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.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
See this much more extensive demo (eight examples) of using Dialog Boxes:

How To Dialog?
https://www.youtube.com/watch?v=C4lQWQ_QGZM
Photo of Vivek Vishwanath

Vivek Vishwanath

  • 474 Points 250 badge 2x thumb

Hi, it's working fine in Crome, but not in IE browser?