Skip to main content
Question

How To Dialog?

  • June 14, 2018
  • 0 replies
  • 195 views
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.
    This topic has been closed for replies.

    • CarlosCarlos
    • Registered
    • November 9, 2018
    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!
    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
    • Registered
    • July 30, 2019
    I am very new to this so how do I get these on my quickbase application?
    • JasonDoty
    • Registered
    • August 8, 2019
    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.
    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
    ------------------------------
    Terms & ConditionsAccessibility statement