Re-usable HTML Alerts

  • 0
  • 1
  • Question
  • Updated 3 months ago
  • In Progress
I would like to create a few HTML Alert message boxes and use them throughout my app. I would like to create these elements in a HTML page and reference them on different form.
  1. How do I reference these from the form?
  2. How can I pass information from record into these components?

See example here!
Photo of William

William

  • 142 Points 100 badge 2x thumb

Posted 1 year ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,994 Points 20k badge 2x thumb
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
(Edited)
Photo of William

William

  • 142 Points 100 badge 2x thumb
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?

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,994 Points 20k badge 2x thumb
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
  }
});
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,994 Points 20k badge 2x thumb
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.
(Edited)
Photo of William

William

  • 142 Points 100 badge 2x thumb
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
Photo of Francesco Spiga

Francesco Spiga

  • 132 Points 100 badge 2x thumb
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



Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,994 Points 20k badge 2x thumb
Many of the demos I create use the IOL Technique which is discussed  step by step in these pasties:

I am sure I have done something wrong
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=294

How Do I Setup the Image Onload Technique (IOL)? <= BEST RESOURCE
https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol

What is the Simplest IOL Example?
https://community.quickbase.com/quickbase/topics/what-is-the-simplest-iol-example

The demos referenced in these pastes create popup Dialog Box modals:

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

How To Dialog <= BEST RESOURCE
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=662
(Edited)