Is it possible to make a URL-Formula button that shows a javascript pop-up box that shows the contents of a Text-formula field?

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
I was wondering if I could create a URL-formula button that appears on a report. When pressed, it shows a javascript pop-up box that sticks around for 6000ms showing the contents of a text-formula field.

Thanks in advance -- J
Photo of Josh

Josh

  • 10 Points

Posted 5 years ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
Here is a simple example that uses QuickBase's native Hide/Show PopupDiv's along with a Mustache template saved as a user defined page:

Custom Popup Message - List All Ipsums
https://haversineconsulting.quickbase.com/db/bi8hy82tt?a=q&qid=1

View an Ipsum record and click the button "Ipsum?" to display the Popup Dialog display a text field. See the screenshot attached.

View Source of QBU_MsgBox.html Template
view-source:https://haversineconsulting.quickbase.com/db/bi8hy82sx?a=dbpage&pagename=QBU_MsgBox.html

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=317
Photo of Josh

Josh

  • 10 Points
Hi and thanks for that -- I still have a question about where in the javascript you've identified the Text-Formula field that you want to display. Also, what would it take for me to use the code you wrote up?

Thanks again.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
The field that is being displayed in the popup dialog is identified by the clist property:

clist: "7"

This code uses the image onload technique that is described at length in this pastie entry:

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

Additionally the code uses a Mustache template as a pattern for filling out the popup dialog:

https://haversineconsulting.quickbase.com/db/bi8hy82sx?a=dbpage&pagename=QBU_MsgBox.html

Within this template file there are two tokens { {heading} } and { {message} } used to identify where data should be substituted.
Photo of Josh

Josh

  • 10 Points
Hi -- I set my app up for iol & /iol variables and tried to implement the javascript you wrote (just as a test) I wasn;t going to use it without permission. I did the following below and I was still confused about some things. Also, do I have to create a URL Formula button field in the same table? I'm really trying to get this -- apologies if I'm missing something obvious or it's frustrating.

Thanks in advance
-----

PAGE NAME: Testcode.js
FIELD NAME (text-formula): TESTCODE_textfrm
TESTCODE_textfrm PROPERTIES: [iol] & "testcode.js" & [/iol]
testcode.js CONTENT:


(function(){
  var querystring=document.location.search;

  if(/a=dr/i.test(querystring)) {
    //DISPLAY RECORD PAGE //****<-----was I supposed to put something here?
    $("img[qbu=module]").closest("td").css("background-color","#FFFFFF");

    var dbid = "xxx"; // I entered the dbid id here
    var dbidTable = "xxx"; // I entered the table id here
    var apptoken = "xxx"; // I entered the apptoken here
    $.ajaxSetup({data: {apptoken: apptoken}});

    var promise1 = $.get(dbidTable, {
      act: "API_DoQuery",
      query: "{3.EX." + kRid + "}",
      clist: "xxx" // ****<----- wasn't sure what should go here?
    });

    var promise2 = $.get(dbid, {
      a: "dbpage",
      pagename: "QBU_MsgBox.html"
    });

    $.when(promise1, promise2).then(function(queryArgs, templateArgs){

      var ipsum = $("ipsum", queryArgs[0]).html(); // ****<----- wasn't sure what should go here?
      var data = {
        heading: xxx:", // ****<----- wasn't sure what should go here?
        message: xxx // ****<----- wasn't sure what should go here?
      };
      var template = templateArgs[0];
      var markup = Mustache.render(template, data);

      $("body").append(markup);
      $("img[qbu=module]").replaceWith("<a href=# class=Vibrant onclick=ShowPopupDiv('QBU_MsgBox')>Ipsum?<a>");
      setTimeout(function(){HidePopupDiv('QBU_MsgBox')}, 6000);
    });
  }

})();
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
>wasn;t going to use it without permission

You don't need special permission to use the code.

I think you have the correct formula for your image onload field.

To make progress place the following single statement into your page named Testcode.js:

alert("In Testcode.js")

And then place your field [TESTCODE] onto the form. When you view the form you should see the alert message as soo as the page loads. If this happens you have implemented the image onload technique and can proceed to use the code (with modifications) I supplied.

Although this is not essential, the user defined page is normally named "module.js" (or possibly moduleTestcode.js) and the user defined field you place on the form is normally named "-". I typically name the user defined pages used with the image onload technique module.js or moduleTableName.js so they can be easily recognized amid the larger listing of all user defined pages. I typically name the image onload field [-] so that it has the least visible footprint and takes up the least space on forms and reports.
Photo of Josh

Josh

  • 10 Points
Hi, I added that into the testcode.js page. If you have a moment, I marked the areas of import/difficulty/confusion with "***". Thanks so, so much for being patient. Also, do I have to make an additional URL formula field to serve as the button?



(function(){
  var querystring=document.location.search;

  if(/a=dr/i.test(querystring)) {
    //DISPLAY RECORD PAGE
    $("img[qbu=module]").closest("td").css("background-color","#FFFFFF");

    alert("In Testcode.js") // ***inserted this call as you'd said

    var dbid = "***"; // ***my DBID
    var dbidTable = "***"; // *** my TableID
    var apptoken = "***"; // ***my apptoken
    $.ajaxSetup({data: {apptoken: apptoken}});

    var promise1 = $.get(dbidTable, {
      act: "API_DoQuery",
      query: "{3.EX." + kRid + "}",
      clist: "7" // <<<***NOT SURE WHAT GOES HERE?
    });

    var promise2 = $.get(dbid, {
      a: "dbpage",
      pagename: "QBU_MsgBox.html" // ***<<<DO I HAVE TO CREATE THIS PAGE IN ADDITION TO TESTCODE.JS?
    });

    $.when(promise1, promise2).then(function(queryArgs, templateArgs){

      var ipsum = $("ipsum", queryArgs[0]).html();
      var data = {
        heading: This is TESTCODE:", // ***<<<is this correct?
        message: // ***<<<have no idea what's supposed to go here
      };
      var template = templateArgs[0];
      var markup = Mustache.render(template, data);

      $("body").append(markup);
      $("img[qbu=module]").replaceWith("<a href=# class=Vibrant onclick=ShowPopupDiv('QBU_MsgBox')>Ipsum?<a>");
      setTimeout(function(){HidePopupDiv('QBU_MsgBox')}, 6000);
    });
  }

})();
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
>Also, do I have to make an additional URL formula field to serve as the button?

The code is designed so that the place on the form that is used to insert the image onload field is the very place the button is inserted. Think of it as recycling:

$("img[qbu=module]").replaceWith("<a href=# class=Vibrant onclick=ShowPopupDiv('QBU_MsgBox')>Ipsum?<a>");


Actually I said to replace the entire file module.js with this one statement:

alert("In Testcode.js") // ***inserted this call as you'd said


But so long as you get the alert to show up you have control of the page. The reason to put just the alert on the page was to make sure you had the first few steps setup correctly - the additional code could have a syntax error which might mask what the problem is.

Your Questions:

Q1>clist: "7" // <<<***NOT SURE WHAT GOES HERE?


Put the numeric field ID of the field you want to display the message of.

Q2>

var promise2 = $.get(dbid, {
a: "dbpage",
pagename: "QBU_MsgBox.html" // ***<<<DO I HAVE TO CREATE THIS PAGE IN ADDITION TO TESTCODE.JS?
});


Yes you have to create that user defined page and it will serve as a generic template. I would keep the same name as the template is generic and can be used without change in other areas.

Q3>

var ipsum = $("ipsum", queryArgs[0]).html();
var data = {
heading: This is TESTCODE:", // ***<<<is this correct?
message: // ***<<<have no idea what's supposed to go here
};


The first statment "var ipsum = ..." is grabbing the values of the message field out of the AJAX response. So the data you pass to the message would be something like this:

var data = {
heading: "This is TESTCODE:",
message: ipsum
};


This recap may help you understand what is going on in the script. The script makes two AJAX calls - one to get the value of the message and a second to get the template. When both of these AJAX calls return results, you extract the template:

var template = templateArgs[0];


populate a data structure:

var data = {
heading: "This is TESTCODE:",
message: ipsum
};


and then merge the data into the template using Mustache:

var markup = Mustache.render(template, data);

Then you replace the image onload field on the form with a button which when clicked shows the markup using QuickBase's Show/Hide PopupDiv function. This is sort of hacky (using the PopDiv that is) but at least the popups will look like native popups.
Now if I was in charge at QuickBase I would immediately implement angular, reactjs and web components but until QuciBase gets on the train you have to hacks like this to customize.
Photo of Josh

Josh

  • 10 Points
Wow -- thanks for the time you've dedicated this. I think I get most it. The script still isn't working, but I may know why -- would you let me know the following whenever you have a moment?
1) QBU_MsgBox.html was created in Pages, but has no code in it -- it's just blank. Does this page need a value?

2) My formula field [TESTCODE_txtfrm] properties are: [iol] & "testcode.js" & [/iol] // is this correct? this field is still there and hasn't been replaced with the button.

3) I made  clist: "1167" //  this is the real field id, but do I need to disable html in the field properties? It's a Text_formula field

4) What is ipsum exactly?
// what is populating "ipsum"? I don't have a field in my app called  "ipsum". I'm confused about what the field 'ipsum' is. isn't this script pulling the value from fid_1167?

Again, thank you so much for your time, Dan.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
1) QBU_MsgBox.html


Look at the source of the page and you will see the markup. The display is set to none so that the markup will not display until ShowPopupDiv() is called.

2) > this field is still there and hasn't been replaced with the button.

There may be an error in your code before this statement is executed:

$("img[qbu=module]").replaceWith("<a href=# class=Vibrant onclick=ShowPopupDiv('QBU_MsgBox')>Ipsum?<a>");


For debug purposes you can always paste this line of code into the console to manually make the button display

3) >I made clist: "1167" // this is the real field id, but do I need to disable html in the field properties? It's a Text_formula field


It does not matter what that this is a html field or if it is a formula field. No problem.

4) >What is ipsum exactly?


Ipsum is filler text used by web designers to give the impression of random narrative text and is used a as placeholder for content. A meme has developed on the net where people come up with humorously themed ipsum generators:

56 Unique Lorem Ipsum Generators
http://mashable.com/2013/07/11/lorem-ipsum/

Lorem doggy the bizzle shizzlin dizzle shizzle my nizzle crocodizzle, yo adipiscing i'm in the shizzle. Nullizzle sapien velizzle, yippiyo volutpizzle, suscipit boofron, shizzle my nizzle crocodizzle shizzlin dizzle, arcu. Pellentesque egizzle tortor. Gizzle erizzle. Doggy izzle i saw beyonces tizzles and my pizzle went crizzle dapibizzle turpis doggy fo shizzle. Maurizzle pellentesque nibh et turpizzle. Break it down izzle tortizzle. Pellentesque eleifend rhoncizzle nisi. In dang that's the shizzle platea dictumst. Brizzle dapibizzle. Boom shackalack tellizzle sheezy, pretizzle eu, stuff ac, shizzlin dizzle vitae, nunc. Daahng dawg suscipizzle. Integer semper tellivizzle owned hizzle.
Photo of Josh

Josh

  • 10 Points
Hi Dan --

1) Ha, I was asking more what the field/message/entity ipsum is in the javascript. I am still trying to figure out why I need fid_1167 and then whatever ipsum is. In the case of this script, what would I be replacing ipsum with? see #3 for an updated view of my current script

2) I'm still confused about QBU_MsgBox.html. In My App > Pages > Code Page, I created a page called "QBU_MsgBox.html", but it has no text/script in it. What (if anything) goes in there?

3)
(function(){
  var querystring=document.location.search;

  if(/a=dr/i.test(querystring)) {
    //DISPLAY RECORD PAGE
    $("img[qbu=module]").closest("td").css("background-color","#FFFFFF");

    alert("In Testcode.js")

    var dbid = "mydbid";
    var dbidTable = "mydbtableid";
    var apptoken = "myapptoken";
    $.ajaxSetup({data: {apptoken: apptoken}});

    var promise1 = $.get(dbidTable, {
      act: "API_DoQuery",
      query: "{3.EX." + kRid + "}",
      clist: "1167"
    });

    var promise2 = $.get(dbid, {
      a: "dbpage",
      pagename: "QBU_MsgBox.html"
    });

    $.when(promise1, promise2).then(function(queryArgs, templateArgs){

      var ipsum = $("ipsum", queryArgs[0]).html(); //<<<<<WHAT SHOULD I BE REPLACING 'IPSUM' WITH?
      var data = {
        heading: This is TESTCODE:",
        message: ipsum //<<<<<WHAT SHOULD I BE REPLACING 'IPSUM' WITH?
      };
      var template = templateArgs[0];
      var markup = Mustache.render(template, data);

      $("body").append(markup);
      $("img[qbu=module]").replaceWith("<a href=# class=Vibrant onclick=ShowPopupDiv('QBU_MsgBox')>Ipsum?<a>"); //<<<<<WHAT SHOULD I BE REPLACING 'IPSUM' WITH?
      setTimeout(function(){HidePopupDiv('QBU_MsgBox')}, 6000);
    });
  }

})();
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
1) Ha, I was asking more what the field/message/entity ipsum is in the javascript.

Okay. Regarding this code:

var ipsum = $("ipsum", queryArgs[0]).html();


queryArgs[0].html() represents the XML response of the query. So $("ipsum", XMLRESPONSE) is looking for the tag <ipsum> within the XML Response and grabbing the HTML value and assigning it to the JavaScript variable likewise named ipsum. You can add some console.log(), console.dir() or console.dirxml() statements to give you feedback on the intermediate variables.

2) I'm still confused about QBU_MsgBox.html. In My App > Pages > Code Page, I created a page called "QBU_MsgBox.html", but it has no text/script in it. What (if anything) goes in there?


Put the source of this page into your QBU_MsgBox.html user defined page:

https://haversineconsulting.quickbase.com/db/bi8hy82sx?a=dbpage&pagename=QBU_MsgBox.html


FWIW, if you look at the source of QuickBase's pages and search for "PopDiv" you will see many instances of the popdiv just lying dormant in the code waiting form the user to display one in response to some interaction. I just cannibalized QuickBase's MsgBox and turned it into a Mustache template so it could be used over and over again.
Photo of Josh

Josh

  • 10 Points
Hi -- thanks.

1)I think I may have confused everything. I have (2) fields --
FIELD #1
fid_1167
Type: Text-formula
Name: [Available Phone # Formula]
Formula Contents: If([tel1]<>"", [tel1]&"<br>", "") & If([tel2]<>"", [tel2]&"<br>", "") & If([tel3]<>"", [tel3]&"<br>", "")

FIELD #2
fid_1168
Type: URL-formula
Name: TESTCODE_txtfrm
Formula Contents: // the script we've been working on

What I wanted was for someone to be able to click the [TESTCODE_txtfrm] URL button and have result in a java pop up div, which showed the contents of [Available Phone # Formula] , which is fid_1167. Instead of listing all phone numbers in a report, I want to save space and columns -- that's the whole point of this script. Exactly what the 'Ipsum' button on your bacon table did. Does that make sense and can that be done? Does that require XML?

2) The link <https://haversineconsulting.quickbase.com/db/bi8hy82sx?a=dbpage&pagename=QBU_MsgBox.html&gt; doesn't open to anything.

Thanks and looking forward to hearing back.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
1)

The only field you need to put on the form is the image onload field which I believe you are calling [TESTCODE_txtfrm]. This field is a formula text filed with some HTML allowed - not a formula URL field. If you followed my instructions and confirmed that the alert shows up you should be beyond this confusion. You don't need to put [Available Phone # Formula] because the script will get its value from the AJAX call if you set the clist to "1167" . The button that is visible in my screenshot will be created dyanmically and be placed where the image onload field was located on the form.

2)


If you paste that link into the address there will be nothing visible. But if you look at the source you will see the HTMlL that you need to stuff into your user defined page QBU_MsgBox.html.
Photo of Josh

Josh

  • 10 Points
I know this is frustrating -- but this all makes sense above. I have followed all of your instructions, too. Got the MsgBox Source Code, too. The field [TESTCODE_txtfrm] has the following in the formula:
[iol] & "testcode.js" & [/iol]

*Allow some HTML tags to be inserted in the field (checked)
*Include this field when searching/filtering this table (unchecked)
*Add this field to all new reports (unchecked)
*The field may be used in reports (unchecked)

Still...I don't know what I should be replacing Ipsum with below -- what do I need to create/replace in place of the 'xxx' below (there are 4 of them. That's the only thing I don't understand. I haven't created any tags. I don't have any tags, I don't think. I appreciate your patient -- really. I would so love to learn this. Please let me know?

  var xxx = $("xxx", queryArgs[0]).html(); // <<< (x2)
      var data = {
        heading: This is TESTCODE:",
        message: xxx // <<<
      };
      var template = templateArgs[0];
      var markup = Mustache.render(template, data);

      $("body").append(markup);
      $("img[qbu=module]").replaceWith("<a href=# class=Vibrant onclick=ShowPopupDiv('QBU_MsgBox')>xxx?<a>"); // <<<
      setTimeout(function(){HidePopupDiv('QBU_MsgBox')}, 6000);
    });
  }

})();
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
Add a console.dirxml() command to your code and see my screenshot:

$.when(promise1, promise2).then(function(queryArgs, templateArgs){
console.dirxml(queryArgs[0]);
//rest of code
});

My XML response has an <ipsum> tag because that tag was derived from the name of the field in my QuickBase. You are naming your field [Available Phone # Formula] so the corresponding tag in the XML response will be this monstrosity:

<available_phone___formula>

so you need to modify your statement to this:

var xxx = $("available_phone___formula", queryArgs[0]).html();
In deriving the tag name for the XML respnose, QuickBase lowercase all letters and substitutes underscores for all non-alphanumeric characters. It is pretty weird if you ask me.
Photo of Josh

Josh

  • 10 Points
Hi Dan -- thanks for all of your help and insight. I don't really understand what a console.dirxml() is and I don't know to do that yet. Is there a way you could explain what that means?

I went on GitHub and I'm reading about how to do it, but I don't know how to add it to quickbase. Should I be replacing where you have <ipsum> with my field/name? I don't know how to make a tag. I really don't know Java at all, actually. You've been really patient thus far, would you please let me know how to finish this out? I know it's a pain in the ass -- I do.

Also, is there a better method renaming/naming QB fields to optimize organization? I'd love any insight.

Thanks,

J
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
All modern browsers come with utilities used for development. They have different names in each browser, but you expose them by pressing F12. There will be a Console tab somewhere within the exposed interface. You can enter any JavaScript commands into this console. Likewise console command output will be written to the console. Developers live in the console and it is common practice to directly enter JavaScript commands into the console before you place them into QuickBase because it is substantially faster to work like this. So it is common to use console commands such as console.log() (for displaying simple variables), console.dir() (for displaying objects) or console.dirxml() (for displaying xml fragments) to get debug output during development.
Photo of Josh

Josh

  • 10 Points
I feel like you're over this and I don't blame you -- I don't really understand anything you just wrote, but thanks for taking the time to try, I know it was a lot of time taken, and I do very much appreciate it.

Can you suggest or recommend and resources I should read to figure this out (I know you're in the midst of writing something, but I'd love to figure this field out ASAP). That would be a huge help, because I have this 75% java script, which will not only really help my workflow process, but will also be my first script I've ever written.

Thanks, Dan.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
> I feel like you're ...

Not so. I am happy to answer you questions if I understand it. You are implementing some type of script - I don't know where you are precisely but I think you have something implemented. To debug your script you might write alert()s to provide feedback on variables and logic. A more expressive way to debug is to insert console commands into your script and view the results in the JavaScript console. Perhaps later you will progress to entering command directly in the console but for now you just need to learn how to debug.

Use the Console with Chrome and Firefox to Catch JavaScript Errors
https://www.youtube.com/watch?v=MrySH-bdU-w
Photo of Josh

Josh

  • 10 Points
still at work with this...haven't given up...will respond ASAP
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
OK I will put a full stop on all my work till I hear back from you!