Expand all | Collapse all

How To Dialog?

  • 1.  How To Dialog?

    Posted 06-14-2018 14:53
    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

    Pastie Database

    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)


    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.

  • 2.  RE: How To Dialog?

    Posted 11-09-2018 05:37
    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:


    Appreciate any help!

  • 3.  RE: How To Dialog?

    Posted 11-09-2018 06:09
    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#] & "'" &
    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;

  • 4.  RE: How To Dialog?

    Posted 11-14-2018 18:22
    ok!! That worked great! Thanks!
    Is there a way to get these to work in the mobile form?
    I tried using your IOL mobile portion of the script, but the buttons do nothing there. 

  • 5.  RE: How To Dialog?

    Posted 05-28-2019 20:44
    Great information Dan,

    My use case is how to implement this when the button is actually on an embedded report on the form of a parent table.

  • 6.  RE: How To Dialog?

    Posted 05-28-2019 20:46
    Works great 

  • 7.  RE: How To Dialog?

    Posted 05-28-2019 20:52
    were you able to get that to work? I've been unsuccessful thus far.

  • 8.  RE: How To Dialog?

    Posted 05-28-2019 21:03
    Yeah no issues. Shoot me an email if you like. 

  • 9.  RE: How To Dialog?

    Posted 05-29-2019 18:42
    I'd like to shoot you an email about this... I'm hoping I'm overlooking something simple and can implement this quickly.

  • 10.  RE: How To Dialog?

    Posted 07-30-2019 18:52
    I am very new to this so how do I get these on my quickbase application?

  • 11.  RE: How To Dialog?

    Posted 07-30-2019 19:26
    How familiar are you with JavaScript? If not at all, how willing are you to learn?

    If you know JavaScript or are willing to learn then I would definitely suggest trying some of these things. The second link(pastie database) in the first post shows the code needed to do this. Most of them are not a simple "move this code here and it works!" because you will have to customize it to your own use. 

    Most of the things Dan Diebolt has posted work with the "Image On Load" technique or a few other ways to do the same thing. There have been several updates to it over the years so I'm not sure which link to give you but this is one where he explains it. https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol Look that over and see if it would make sense for you to DIY this or not.

  • 12.  RE: How To Dialog?

    Posted 08-08-2019 15:24
    it there a way to add a text input box then buttons? In the end it would be great if this was an option, but I have so far not been able to find anything on this.

    thanks in advanced.

  • 13.  RE: How To Dialog?

    Posted 08-08-2019 15:48
    You would have to go into the code and edit the areas that say "markup +=" that is the html being built. Insert whatever html you want and it should be displayed fine. As far as working with those new text boxes you should be able to work out how from the rest of the code.

    This is a somewhat complicated piece of JavaScript if you have never dealt with it so if you are not familiar with that or HTML it might be better to have someone implement this for you.

  • 14.  RE: How To Dialog?

    Posted 08-08-2019 18:14
    Thanks for the help, I got it now.

  • 15.  RE: How To Dialog?

    Posted 08-12-2019 16:00
    is it possible to upload a file while in the dialog screen? For example add a "choose file" button, and then having another button then change other fields. the code below is what I have, but it is not actually adding the file. 

    HTML for file chooser
    markup+='<input id="myFile" type="file" name="myFile">';

    now my button that will eventually edit other fields as well.

    "SAVE FILE": function() {
              $.post(dbidClients, {
                act: "API_EditRecord",
                rid: rid,
                _fid_18: document.getElementById( "myFile").value
              }).then(function() {