Forum Discussion

RyanStanford1's avatar
RyanStanford1
Qrew Captain
7 years ago

Custom HTML replace Main Body of Page

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.
APIs and custom code
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    7 years ago
    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


  • RyanStanford1's avatar
    RyanStanford1
    Qrew Captain
    7 years ago
    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?
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      7 years ago
      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.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      7 years ago
      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');
    • RyanStanford1's avatar
      RyanStanford1
      Qrew Captain
      7 years ago
      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.