Custom HTML replace Main Body of Page

  • 0
  • 1
  • Question
  • Updated 4 weeks ago
  • In Progress
What I'm trying to do is Proof of Concept to add a html code page that I have on QB as the homepage of a table.

I've been able to replace the mainBodyDiv element with my custom element, which JavaScript then converts that element based on it's attributes to pull an XMLHTTPRequest of my linked html page... this so far works, mostly...

the issue I have is that the response.text from my request, which I anticipated to be the HTML of my custom page was the entire structure of a QB page, with my actual HTML code nowhere to be found.

If I go to the html code page itself, it shows up flawlessly... so I know the HTML itself is good.
Photo of Ryan Stanford

Ryan Stanford

  • 742 Points 500 badge 2x thumb
  • perplexed

Posted 1 month ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,604 Points 20k badge 2x thumb
QuickBase isn't designed to do this type of customization but you can easily accomplish it with a short script. Before presenting a demo and code I should make some comments about how you should approach this type of customization.

As simple as my solution is, it is possible that it could break without any warning if QuickBase made some minor change to their product. For example, if QuickBase merely changed the id of the body div (<div id=mainBodyDiv>) the demo will stop working. No matter what QuickBase might change, there probably is a simple fix that will restore the customization and is equally short. However, you are first going to have to discover the "breaking" change QuickBase made and it will probably come from a sudden report of your users after a new release. Also, by replacing the main body div you might be knocking out native functionality that may be defined within the <div>. So the general rule is to be aware of how your customization may effect native behavior and to write your code to not interfere with native code.

Here is a demo:

There is nothing wrong with your application. Do not attempt to adjust the screen. We are controlling presentation. If we wish to make it larger, we will increase the font. If we wish to change the color, we will adjust the RGB. We will control the rows. We will control the columns. We can resize the image, make it rotate. We can change the font to sans serif, or kern adjacent characters. For the next hour, sit quietly, and we will control all that you see and hear. We repeat: there is nothing wrong with your application. You are about to participate in a great adventure. You are about to experience the awe and mystery which reaches from the inner mind to... The Outer Base.


Main Body Div ~ Table Dashboard
https://haversineconsulting.quickbase.com/db/bpbu535av?a=td

CodePage.html
https://haversineconsulting.quickbase.com/db/bpbu53qzx?a=dbpage&pagename=CodePage.html

<div style="margin: 10px">
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/8CtjhWhw2I8"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"  
    allowfullscreen>
  </iframe>
</div>
Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=720


(Edited)
Photo of Ryan Stanford

Ryan Stanford

  • 742 Points 500 badge 2x thumb
Thanks for the information Dan!

I do have a quick followup... in the JS codepage, the AJAX setup... I can't tell where it's actually used, or is that more for "cross application" loading?

best I can read, which may be wrong, couldn't I just get away with the if statement to replace the div?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,604 Points 20k badge 2x thumb
None of these statements are operative:
  var dbid = "bpbu53qzx";
  var dbidRecords = "bpbu535av";
  var apptoken = "dzw437mbz5nhdnbv78qbmc2knv6s";
  $.ajaxSetup({data: {apptoken}});
  var querystring=document.location.search;
I have a large collection of scripts and templates that I use to quickly generate demos and this is just boilerplate code that is often used but not in this case.

Quite frankly the outer function and the if statement could probably be removed and this single line of code might do the job:
    $("#mainBodyDiv").load("bpbu53qzx?a=dbpage&pagename=CodePage.html");
But these types of "optimizations" will likely backfire on you as you have to think out all the possibilities of this particular use case and perhaps perform other configurations to makes sure nothing goes awry. Stick to code patterns that can you reuse without a lot of extra mental effort.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,604 Points 20k badge 2x thumb
BTW, I just noticed I parameterized my code with dbid's but hardcoded the application dbid. Perhaps I should have used the dbid parameter like so:
$("#mainBodyDiv").load(`${dbid}?a=dbpage&pagename=CodePage.html`);
Photo of Ryan Stanford

Ryan Stanford

  • 742 Points 500 badge 2x thumb
That would make sense why the Ajax setup wasn't making sense to me, as it wasn't used.

I noticed the hard coding mixed with parameters that weren't used.

I'm not a complete novice with code, but making it play nicely with QB can be a challenge at times.