Forum
How To Dialog?
Forum
Demo
Demo
Content
[Content] is an Image Onload module.js file
[iol] & "moduleClients.js" & [/iol]
&
"<a class='QBU_Button1 Vibrant Success' style='margin: 3px'" &
">Button 1</a>"
&
"<a class='QBU_Button2 Vibrant Success' style='margin: 3px'" &
"  data-name='" & [Name] & "'" &
"  data-address='" & [Address] & "'" &
"  data-city='" & [City] & "'" &
"  data-state='" & [State] & "'" &
"  data-zip='" & [Zip] & "'" &
">Button 2</a>"
&
"<a class='QBU_Button3 Vibrant Success' style='margin: 3px'" &
"  data-rid='" & [Record ID#] & "'" &
">Button 3</a>"
&
"<a class='QBU_Button4 Vibrant Success' style='margin: 3px'" &
"  data-rid='" & [Record ID#] & "'" &
">Button 4</a>"
& "<br>" &
"<a class='QBU_Button5 Vibrant Success' style='margin: 3px'" &
"  data-rid='" & [Record ID#] & "'" &
">Button 5</a>"
&
"<a class='QBU_Button6 Vibrant Success' style='margin: 3px'" &
"  data-rid='" & [Record ID#] & "'" &
"  data-expiry='" & [Expiry] & "'" &
">Button 6</a>"
&
"<a class='QBU_Button7 Vibrant Success' style='margin: 3px'" &
"  data-rid='" & [Record ID#] & "'" &
">Button 7</a>"
&
"<a class='QBU_Button8 Vibrant Success' style='margin: 3px'" &
"  data-rid='" & [Record ID#] & "'" &
">Button 8</a>"
(function(){

  var dbid = "bnrw4tgwv";
  var dbidClients = "bnrxb4mma";
  var dbidMeetings = "bnr4x6vyg";
  var apptoken = "br4s2qwdt9payxct27ap3cn8sh8";
  $.ajaxSetup({data: {apptoken: apptoken}});

  //Button 1 Click Handler
  $("a.QBU_Button1").on("click", function(event) {

    var markup = "<h1>Lorem Ipsum</h1>";
    markup += "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ";
    markup += "Cras id <b>luctus tortor</b>. Praesent ac lacus nec tellus faucibus vulputate. ";
    markup += "Donec libero mauris, fringilla ut massa id, volutpat ultricies turpis.  ";
    markup += "Duis purus velit, tempor vitae leo eu, aliquet mollis urna. ";
    markup += "Mauris vestibulum tellus neque, ut rhoncus enim <b>volutpat sit amet.</b>";

    var $mydialog = $("<div>").html(markup).dialog({
      title: "Instructions",
      modal: true,
      autoOpen: false,
      width: 400,
      resizable: false,
      buttons: {
        OK: function() {
          $(this).dialog("close");
        }
      },
      open: function(event, ui) {
        $mydialog.html(markup);
      },
      close: function(event, ui) {
        //do something
      }
    });
    $mydialog.dialog("open");

  });

  //Button 2 Click Handler
  $("a.QBU_Button2").on("click", function(event) {

    var name = this.dataset.name;
    var address = this.dataset.address;
    var city = this.dataset.city;
    var state = this.dataset.state;
    var zip = this.dataset.zip;

    var markup = "<h1>Mailing Address</h1>";
    markup += `${name}<br>${address}<br>${city}, ${state} ${zip}`;
    var clipboard = `${name}\n${address}\n${city}, ${state} ${zip}`;

    var $mydialog = $("<div>").html(markup).dialog({
      title: "Client Address",
      modal: true,
      autoOpen: false,
      width: 400,
      resizable: false,
      buttons: {
        OK: function() {
          $(this).dialog("close");
        },
        COPY: function() {
          navigator.clipboard.writeText(clipboard)
            .then(() => {
              $(this).dialog("close");
            });
        }
      },
      open: function(event, ui) {
        $mydialog.html(markup);
      },
      close: function(event, ui) {
        //do something
      }
    });
    $mydialog.dialog("open");
  });

  //Button 3 Click Handler
  $("a.QBU_Button3").on("click", function(event) {

    var rid = this.dataset.rid;

    $.get(dbidClients, {
      act: "API_DoQuery",
      query: `{3.EX.${rid}}`,
      clist: "6.7.8.9.10.11.12.13.14.15"
    }).then(function(xml) {
      var name = $("record name", xml).text();
      var phone = $("phone", xml).text();
      var email = $("email", xml).text();
      var options = {year: "2-digit", month: "2-digit", day: "2-digit"};
      var expiry = new Date(parseInt($("expiry", xml).text(), 10)).toLocaleDateString("en", options);
      var status = $("status", xml).text();

      var address = $("address", xml).text();
      var city = $("city", xml).text();
      var state = $("state", xml).text();
      var zip = $("zip", xml).text();
      var notes = $("notes", xml).text();

      var markup = "<h1>Client Info & Notes</h1>";
      markup += `<b>${name}</b><br>${address}<br>${city}, ${state} ${zip}<br><br>`;
      markup += `<b>Phone:</b> ${phone}<br><b>Email:</b> ${email}<br><b>Expiry:</b> ${expiry}<br><b>Status:</b> ${status}<br><br>`;
      markup += `<b>Notes: </b>${notes}`;

      var $mydialog = $("<div>").html(markup).dialog({
        title: "Client Info",
        modal: true,
        autoOpen: false,
        width: 400,
        resizable: false,
        buttons: {
          OK: function() {
            $(this).dialog("close");
          }
        },
        open: function(event, ui) {
          $mydialog.html(markup);
        },
        close: function(event, ui) {
          //do something
        }
      });
      $mydialog.dialog("open");

    });

  });

  //Button 4 Click Handler
  $("a.QBU_Button4").on("click", function(event) {

    var rid = this.dataset.rid;

    var promise1 = $.get(dbidClients, {
      act: "API_DoQuery",
      query: `{3.EX.${rid}}`,
      clist: "6.7.8.9.10.11.12.13.14.15"
    });

    var promise2 = $.get(dbidMeetings, {
      act: "API_DoQuery",
      query: `{10.EX.${rid}}`,
      clist: "6.7.8.9",
      slist: "6.7"
    });

    var promise3 = $.get(`${dbid}?a=dbpage&pagename=template.tmp`);

    $.when(promise1, promise2, promise3).then(function(xhr1, xhr2, xhr3) {

      var xmlClients = xhr1[0];
      var xmlMeetings = xhr2[0];
      var template = xhr3[0];

      var name = $("record name", xmlClients).text();
      var phone = $("phone", xmlClients).text();
      var email = $("email", xmlClients).text();
      var expiry = new Date(parseInt($("expiry", xmlClients).text(), 10)).toLocaleDateString("en");
      var status = $("status", xmlClients).text();

      var address = $("address", xmlClients).text();
      var city = $("city", xmlClients).text();
      var state = $("state", xmlClients).text();
      var zip = $("zip", xmlClients).text();
      var notes = $("notes", xmlClients).text();

      var meetings = $("record", xmlMeetings).map(function(xmlMeetings) {
        var options = {year: "2-digit", month: "2-digit", day: "2-digit"};
        var date = new Date(parseInt($("date", this).text(), 10)).toLocaleDateString("en", options);
        var time = $("time", this).text();
        var type = $("type", this).text();
        var topic = $("topic", this).text();
        return {date, time, type, topic};
      }).get();

      var data = {
        name,
    phone,
    email,
    expiry,
    status,
    address,
    city,
    state,
    zip,
    notes,
    meetings
      };

     var markup = _.template(template)(data);

      var $mydialog = $("<div>").html(markup).dialog({
        title: "Client Meetings",
        modal: true,
        autoOpen: false,
        width: 400,
        resizable: false,
        buttons: {
          OK: function() {
            $(this).dialog("close");
          }
        },
        open: function(event, ui) {
          $mydialog.html(markup);
        },
        close: function(event, ui) {
          //do something
        }
      });
      $mydialog.dialog("open");

    });

  });

  //Button 5 Click Handler
  $("a.QBU_Button5").on("click", function(event) {

    var rid = this.dataset.rid;

    var markup = "<h1>Change Status to:</h1>";

    var $mydialog = $("<div>").html(markup).dialog({
      title: "Chane Status",
      modal: true,
      autoOpen: false,
      width: 500,
      resizable: false,
      buttons: {
        ALPHA: function() {
          $.post(dbidClients, {
            act: "API_EditRecord",
            rid: rid,
            _fid_10: "Alpha"
          }).then(function() {
            document.location.reload(true);
          });
        },
        BETA: function() {
          $.post(dbidClients, {
            act: "API_EditRecord",
            rid: rid,
            _fid_10: "Beta"
          }).then(function() {
            document.location.reload(true);
          });
        },
        GAMMA: function() {
          $.post(dbidClients, {
            act: "API_EditRecord",
            rid: rid,
            _fid_10: "Gamma"
          }).then(function() {
            document.location.reload(true);
          });
        },
        DELTA: function() {
          $.post(dbidClients, {
            act: "API_EditRecord",
            rid: rid,
            _fid_10: "Delta"
          }).then(function() {
            document.location.reload(true);
          });
        },
        CANCEL: function() {
          $(this).dialog("close");
        }
      },
      open: function(event, ui) {
        $mydialog.html(markup);
      },
      close: function(event, ui) {
        //do something
      }
    });
    $mydialog.dialog("open");
  });


  //Button 6 Click Handler
  $("a.QBU_Button6").on("click", function(event) {

    var rid = this.dataset.rid;
    var expiry = this.dataset.expiry;

    var markup = "<h1>Update Expiry To:</h1>";
    markup += "<div id='QBU_Expiry'></div>";

    var $mydialog = $("<div>").html(markup).dialog({
      title: "Client Expiry Update",
      modal: true,
      autoOpen: false,
      width: 400,
      resizable: false,
      buttons: {
        UPDATE: function() {
          var newExpiry = $("#QBU_Expiry").datepicker("getDate");
          $.post(dbidClients, {
            act: "API_EditRecord",
            rid,
            _fid_9: newExpiry
          }).then(function(xml) {
            document.location.reload(true);
          });          
        },
        CANCEL: function() {
          $(this).dialog("close");
        }
      },
      open: function(event, ui) {
        $mydialog.html(markup);
        $("#QBU_Expiry").datepicker();
        $("#QBU_Expiry").datepicker("option", "dateFormat", "mm-dd-yy");
        $("#QBU_Expiry").datepicker("setDate", expiry);
      },
      close: function(event, ui) {
        //do something
      }
    });
    $mydialog.dialog("open");

  });

  //Button 7 Click Handler
  $("a.QBU_Button7").on("click", function(event) {

    var rid = this.dataset.rid;

    $.get(dbidMeetings, {
      act: "API_DoQuery",
      query: `{10.EX.${rid}}AND{6.OAF.today}`,
      clist: "3.6",
      slist: "6"
    }).then(function(xmlMeetings) {

      var markup = "<h1>Delay Future Meetings By:</h1>";
      markup += `
      <select id="QBU_Delay">
        <option value="1" selected>1 day</option>
        <option value="7">7 days</option>
        <option value="14"> 14 days</option>
      </select>
      `;

      var $mydialog = $("<div>").html(markup).dialog({
        title: "Client Meetings",
        modal: true,
        autoOpen: false,
        width: 400,
        resizable: false,
        buttons: {
          OK: function() {

            var csv = $("record", xmlMeetings).map(function() {
              var rid = $("record_id_", this).text();
              var date = parseInt($("date", this).text(), 10) + $("#QBU_Delay").val() * 1000*60*60*24;
              return `${rid},${date}`;
            }).get();

            $.get(dbidMeetings, {
              act: "API_ImportFromCSV",
              records_csv: csv.join("\n"),
              clist: "3.6",
            }).then(function(xml) {
              document.location.reload(true);
            });
          },
          CANCEL: function() {
            $(this).dialog("close");
          }          
        },
        open: function(event, ui) {
          $mydialog.html(markup);
        },
        close: function(event, ui) {
          //do something
        }
      });
      $mydialog.dialog("open");

    });

  });


  //Button 8 Click Handler
  $("a.QBU_Button8").on("click", function(event) {

    var rid = this.dataset.rid;

    $.get(dbidMeetings, {
      act: "API_DoQuery",
      query: `{10.EX.${rid}}AND{6.OAF.today}`,
      clist: "3.6",
      slist: "6"
    }).then(function(xmlMeetings) {

      var markup = "<h1>Set All Future Meetings Time To:</h1>";
      markup += `
      <select id="QBU_Time">
        <option value="9:00 am" selected>9:00 am</option>
        <option value="10:00 am">10:00 am</option>
        <option value="11:00 am">11:00 am</option>
        <option value="12:00 pm">12:00 pm</option>
        <option value="1:00 pm">1:00 pm</option>
        <option value="2:00 pm">2:00 pm</option>
        <option value="3:00 pm">3:00 pm</option>
        <option value="4:00 pm">4:00 pm</option>
      </select>
      `;

      var $mydialog = $("<div>").html(markup).dialog({
        title: "Client Meetings",
        modal: true,
        autoOpen: false,
        width: 500,
        resizable: false,
        buttons: {
          OK: function() {

            var csv = $("record", xmlMeetings).map(function() {
              var rid = $("record_id_", this).text();
              var time = $("#QBU_Time").val();
              return `${rid},${time}`;
            }).get();

            $.get(dbidMeetings, {
              act: "API_ImportFromCSV",
              records_csv: csv.join("\n"),
              clist: "3.7",
            }).then(function(xml) {
              document.location.reload(true);
            });
          },
          CANCEL: function() {
            $(this).dialog("close");
          }          
        },
        open: function(event, ui) {
          $mydialog.html(markup);
        },
        close: function(event, ui) {
          //do something
        }
      });
      $mydialog.dialog("open");

    });

  });

})();

////////////////////////////////////////////////////////////////////

template.tmp
<style>
  table.QBU_Dialog {
    border-collapse: collapse; 
    border: 1;
  }

  table.QBU_Dialog th, table.QBU_Dialog td {
    padding:5px; 
    border: 1px solid;
  }
</style>

<h1>Client Info & Notes</h1>
<b><%= name %></b><br><%= address %><br><%= city %>, <%= state %> <%= zip %><br><br>
<b>Phone:</b> <%= phone %><br><b>Email:</b> <%= email %><br><b>Expiry:</b> <%= expiry %><br><b>Status:</b> <%= status %><br><br>
<b>Notes: </b><%= notes %>

<h1>Meetings</h1>
<table class=QBU_Dialog>
  <thead>
    <tr>
      <th>Date</th>
      <th>Time</th>
      <th>Type</th>
      <th>Topic</th>
    </tr>
  </thead>
  <tbody>
  <% _.each(meetings, function(meeting) {%>
  <tr>
    <td><%= meeting.date %></td>
    <td><%= meeting.time %></td>
    <td><%= meeting.type %></td>
    <td><%= meeting.topic %></td>
    </tr>
  <% }); %>
  </tbody>
</table>
Copy [Content] to Clipboard
Usage Notes
All rights reserved. The code in this page is copyright by Dan Diebolt and may not be used without including my phone number (773-312-8131) and email address (dandiebolt@yahoo.com) in the footer of where you may want to use it. This snippet of code is not a complete solution and only represents the essential code to address the question. You may have to modify the code to suit your specific needs. There is a good chance that this code uses the image onlaod techique which you can read about here: https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=294 The old image onload technique is document here: http://pastebin.com/hbeXXmTT
Other & Flags
Yes  
Diebolt, Dan
Created on June 14, 2018 at  8:15 AM (CST). Last updated by Diebolt, Dan on Nov.  8, 2018 at  5:00 AM (CST). Owned by Diebolt, Dan.
Dan Diebolt
Dan Diebolt
Show fields from Show fields from Show fields from a related table
Report Name *
Description
Reports and Charts Panel
Each table has a panel listing its reports and charts, organized in groups.
Please wait while your new report is saved...
Field label
Column heading override
Justification
What does auto mean?
Fields in:

Fields to Extract:
Name for the new table:
Items in the new table are called:

When you bring additional fields into a conversion, Quickbase often finds inconsistencies. For example, say you're converting your Companies column into its own table. One company, Acme Corporation, has offices in New York, Dallas and Portland. So, when you add the City column to the conversion, Quickbase finds three different locations for Acme. A single value in the column you're converting can only match one value in any additional field. Quickbase needs you to clean up the extra cities before it can create your new table. To do so, you have one of two choices:

  • If you want to create three separate Acme records (Acme-New York, Acme-Dallas and Acme-Portland) click the Conform link at the top of the column.
  • If the dissimilar entries are mistakes (say Acme only has one office in New York and the other locations are data-entry errors) go back into your table and correct the inconsistencies—in this case, changing all locations to New York. Then try the conversion again.

Read more about converting a column into a table.

We're glad you're interested in doing more with Quickbase!

Now we need to make you official before you share apps or manage your account.

Verifying your email lets you share Quickbase with others in your company.

Your work email
Your company