Forum Discussion

_anomDiebolt_'s avatar
_anomDiebolt_
Qrew Elite
6 years ago

How To Dialog?

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.
APIs and custom code

15 Replies

Sort By
  • CarlosCarlos's avatar
    CarlosCarlos
    Qrew Assistant Captain
    6 years ago
    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!
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      6 years ago
      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");
        });


    • CarlosCarlos's avatar
      CarlosCarlos
      Qrew Assistant Captain
      6 years ago
      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. 
  • RyanStanford1's avatar
    RyanStanford1
    Qrew Captain
    5 years ago
    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.
  • LoriPelzel's avatar
    LoriPelzel
    Qrew Member
    5 years ago
    I am very new to this so how do I get these on my quickbase application?
    • AustinK's avatar
      AustinK
      Qrew Commander
      5 years ago
      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.


  • JasonDoty's avatar
    JasonDoty
    Qrew Member
    5 years ago
    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.
    • AustinK's avatar
      AustinK
      Qrew Commander
      5 years ago
      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.
    • JasonDoty's avatar
      JasonDoty
      Qrew Member
      5 years ago
      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() {
                  document.location.reload(true);
                });
              },

  • EOMDevelepors's avatar
    EOMDevelepors
    Qrew Captain
    4 years ago
    I am using this dialog and I would like to add a disables button that would view the amount of characters typed in the message body. Can anyone help? Here is my code: 

    Thanks

    (function () {
  
        var dbid = "my dbid";
        var dbidMessages = "my table id";
        var apptoken = "my tokan";
        $.ajaxSetup({ data: { apptoken: apptoken } });
    
    
            var markup = "<textarea id=myMessage name=note rows=4 style=width:465px; height:1000px; font-size: 80px;></textarea>";

    
            var $mydialog = $("<div>").html(markup).dialog({
                title: "Enter your note here:",
                modal: true,
                autoOpen: true,
                width: 500,
                resizable: false,
                buttons: {
     'view here count': function () {
                     enter here the length of $("#myMessage").val(),
                           
                    },
     'Send Message': function () {
                        $.get(dbidMessages, {
                           act: "API_AddRecord",
                            _fid_11: rid,
                            _fid_6: $("#myMessage").val(),
                            _fid_16: type,
                        }).then(function (xml) {
                            console.dirxml(xml);
                            $.get() & location.reload(true);
                        });
                    },
                    'Cancel': function () {
                       $(this).dialog("close");
                    }
                },
                open: function (event, ui) {
    
                    $mydialog.html(markup);
                },
                close: function (event, ui) {
    
                }
            });
            $mydialog.dialog("open");
    //     });
    
    })();​


    ------------------------------
    EOM Develepors
    ------------------------------