Discussions

Expand all | Collapse all

Re-usable HTML Alerts

  • 1.  Re-usable HTML Alerts

    Posted 08-16-2017 18:59
    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!


  • 2.  RE: Re-usable HTML Alerts

    Posted 08-16-2017 19:32
    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


  • 3.  RE: Re-usable HTML Alerts

    Posted 08-16-2017 19:53
    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?



  • 4.  RE: Re-usable HTML Alerts

    Posted 08-16-2017 20:15
    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
      }
    });


  • 5.  RE: Re-usable HTML Alerts

    Posted 08-16-2017 20:15
    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.
    
                                                    


  • 6.  RE: Re-usable HTML Alerts

    Posted 08-16-2017 20:44
    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


  • 7.  RE: Re-usable HTML Alerts

    Posted 08-30-2018 19:15
    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





  • 8.  RE: Re-usable HTML Alerts

    Posted 08-30-2018 19:39
    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