Skip to main content
Question

Custom HTML replace Main Body of Page

  • January 19, 2019
  • 0 replies
  • 62 views
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.

    • anomDiebolt
    • Registered
    • January 21, 2019
    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
    • Author
    • Registered
    • January 21, 2019
    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?
    Terms & ConditionsAccessibility statement