How To Dialog?

  • 4
  • 2
  • Question
  • Updated 5 days ago
  • Doesn't Need an Answer
  • (Edited)
How To Dialog?

This demo demonstrates eight different examples of invoking a Dialog Box through a Button to (1) display selected information to a user, (2) rapidly make quick changes to fields in a record, or (3) initiate more complex processing tasks. 

Motivation: There are a tremendous number of use cases where a user wants to seamless perform an action without extra navigational steps or page reloads. These actions might be as simple as displaying record information in a compact manner or rapidly editing specific fields. Additionally, when some actions require user input as a parameter to that action, it is often undesirable to store those parameters in a field or create faux relationships to fit the action into a native capability. Finally, complex processing tasks that manipulate multiple tables, records and fields and can be made more accessible by binding those actions to a Button rather than separately loading a HTML code page that contains its own interface and controls.

This demo is large only because it jams eight different examples into one application.



How To Dialog? ~ Clients Table Dashboard
https://haversineconsulting.quickbase.com/db/bnrxb4mma?a=td

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


Button 1 ~ Display Static Instructions (Full HTML Allowed)


========================================

Button 2 ~ Display Field Information With Clipboard Copy

========================================

Button 3~ Display Lots of Field Information

========================================

Button 4 ~ Display Parent and Child Informaiton

========================================

Button 5 ~ Rapidly Edit Status Without Page Load

========================================

Button 6 ~ Rapidly Edit Date With Inline Calendar Widget

========================================

Button 7 ~ Rapidly Edit Child Records (Delay Meeting Date)

========================================

Button 8 ~ Rapidly Edit Child Records (Reset Meeting Time)


Notes:

I would normally add technical notes here but they are potentially so extensive that I am not going to be able to add them in the initial post before someone cuts off my opportunity by commenting. Add your comments or questions and I will follow up separately with detailed notes.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,322 Points 20k badge 2x thumb

Posted 5 months ago

  • 4
  • 2
Photo of Carlos

Carlos

  • 644 Points 500 badge 2x thumb
Hi Dan, this one is great!!
I have a question.. how can I change the button after it was clicked, without changing all buttons displayed? I'm using one of these buttons in a table, so 28 records appear in an embedded table in a parent record. When clicked, the action executes on the selected record but all buttons in all records change to "done".

I'm using this code currently:

        $("a.QBU_SameRecord").parent().html("done");


Appreciate any help!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,272 Points 20k badge 2x thumb
A class is used on the button to make it simple to define the click handler when the field is used in a report and there are multiple buttons.
[iol] & "module.js" & [/iol]
&
"<a class='QBU_Button Vibrant Success' " &
"  data-rid='" & [Record ID#] & "'" &
">Button</a>"
Within the click handler you can refer to the specific button that was clicked on by referencing this either as a variable or as the argument of $(this):

  $("a.QBU_Button").on("click", function(event) {
    var rid = this.dataset.rid;
    $(this).parent().html("done");
  });


(Edited)