Re-usable HTML Alerts

Use script and the jQueryUI dialog widget which is included on QuickBase pages. Here are some docs:

jQueryUI Dialog Docs
https://jqueryui.com/dialog/

You can configure the dialog to display any HTML markup you desire. Here is an example that displays a miniature form on a button click:

Hylo
https://haversineconsulting.quickbase.com/db/bkw2ff3c8



The above example was created as part of this forum question and answer:

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

Dan,

I appreciate your response, but this is over my head.

What would you recommend for someone just starting to dabble with script and the jQueryUI dialog?

I would recommend asking questions until it is under your head. This is much easier than you might think. I have a meetup I have to leave for in a minute but paste the following code into the console and play with the obvios parameters such as markup, title, width, button names etc:

var markup = "<h1>hello world</h1>";
$("<div id=QBU_Dialog>").dialog({
  title: "This Space For Rent",
  modal: true,
  width: 400,
  resizable: false,
  buttons: {
    OK: function() {
      $(this).dialog("close");
      $("#QBU_Dialog").remove();
    },
    Cancel: function() {
      $(this).dialog("close");
    }
  },
  open: function(event, ui) {
    $(this).html(markup);
    $("#QBU_BaseDate").datepicker();
  },
  close: function(event, ui) {
    //do something
  }
});

Here is a screenshot of manually pasting the above code into the console shortly after the dialog partially eclipses the moon and almost totally eclipses the sun:



The main issue you question does not mention is under what circumstances you want to display the dialog. When I get back I can walk you through it or create a simple example. This is easy stuff anyone can use with QuickBase.

I would recommend asking questions until it is under your head. This is much easier than you might think. I have a meetup I have to leave for in a minute but paste the following code into the console and play with the obvios parameters such as markup, title, width, button names etc:

var markup = "<h1>hello world</h1>";
$("<div id=QBU_Dialog>").dialog({
  title: "This Space For Rent",
  modal: true,
  width: 400,
  resizable: false,
  buttons: {
OK: function() {
  $(this).dialog("close");
  $("#QBU_Dialog").remove();
},
Cancel: function() {
  $(this).dialog("close");
}
  },
  open: function(event, ui) {
$(this).html(markup);
$("#QBU_BaseDate").datepicker();
  },
  close: function(event, ui) {
//do something
  }
});  

Hey Dan,

My goal is to visually validate data as the user enters it. I have put together a little example below:



I want to be able to use these alerts throughout my app, so hard coding each field in each table seems excessive, not to mention the headach I would have if I ever wanted to change a colour, font, etc...

Is there a way I can do something more like the following:



Thank you,

William Selvage

Dan, 

I am trying to understand how to create a modal pop-up as the one in the example 
https://haversineconsulting.quickbase.com/db/bkw2ff3c8

I am a newbie so there are a lot of parts I do not understand. 

how do you trigger the HTML page from the button?
how can I see the code that runs behind the scene?

any help will be greatly appreciated