Embed Custom HTML

Yes it is possible. The bleeding edge way to do this is with Web Components. Instead of embedding HTML you will import your HTML using the HTML Imports feature of Web Components. For browsers that don't support web components (http://caniuse.com/#search=web%20components) you use the polyfill webcomponents.js (formerly named platform.js). Check out the Component Kitchen:

Component Kitchen
http://component.kitchen/components

I used to be the President of the image onload sector but I resigned that last year and I am now the President of the import onload sector. It is true - check my profile and contact me if you need help.

Thanks for this, I'll take a look and get back to you if I have any more questions.

Hi - I am currently going through the links you provided but I was wondering if you could provide an example of this in use with Quickbase? Even a simple example to aid in my understanding of this. Thanks.

I will eventually publish an example but I am still working through various options to make the usage of Web Components with QuickBase dead simple. QuickBase does not allow a <link> element in either (1) a text formula field with some HTML allowed or (2) a form text section so I am using a formulas such as the following to implement the HTML import:

[import] & "import.html" & [/import]

All the heavy details are hidden in the definition of the two user defined variables [import] and [/import] and once setup will not need to change. This is the same general technique as used with the image onload technique:

[iol] & "module.js" & [/iol]

Note the the imported file is a HTML file not a JavaScript file and that the contents are not blindly inserted into the DOM. It is a little complicated to explain but a HTML import can safely import HTML, JavaScript, CSS and other resources without interfering between the host page and the imported page.

These are the most informative articles on understanding HTML Imports:

Exploring HTML Imports
http://robdodson.me/exploring-html-imports/

HTML Imports
http://www.html5rocks.com/en/tutorials/webcomponents/imports/

Thanks for this. I'll take a look and get back to you.

This may be a pretty obvious but I need to be clear on this, where exactly do you put the import details -  [import] & "import.html" & [/import]?

Read to bottom:
An early version of [import] was posted July 21, 2014. Similar to the image onload technique's usage of the user defined variable [iol], all the details were hidden so that all a user would have to do is specify the module.js file (which is a user defined page within QuickBase). The "import.html" file would likewise be stored as a user defined page within QuickBase. You could store the "import.html" file on another domain if CORS support was enabled. Also, note that this initial version of the [import] formula would only work in Chrome because it did not load the polyfill webcomponents.js (previously named platform.js by Google) necessary to make Web Components work in other browsers.

The original pastie entry is here:

What Is The New QuickBase Hotness? (Import Onload Technique)
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=313

but some unenlightened forum administrator unfamiliar with Web Components deleted my original forum post:

https://quickbase-community.intuit.com/questions/956322
It should be obvious from this info and the articles I posted that this is a bleeding edge technique and I believe it will become extremely useful for use with QuickBase. But there are still details that need to be worked out to make it idiot proof, work in all browsers and integrate seamlessly with QuickBase. Also I need to come up with an outrageous name to draw attention to the new technique.So it might be premature to use it with your current project requirements at this time. I have several prototypes working but there are still some tradeoffs I am looking at to make HTML imports and WebComponents work with QuickBase. If you want to discuss it further feel free to contact me using the information in my profile.

Thanks, I'll take a look at this as well.

Hi - I am get the broad strokes of what you are doing here but I am still a bit unsure of the finer details. I know you are still at the earlier stages of this but do you have any tutorials or webexes available?

>Hi - I am get the broad strokes of what you are doing here but I am still a bit unsure of the finer details
I am afraid I don't have the time right now and isn't something that can be rushed. Web Components are new and finding the best way to use them with QuickBase involves trial and error and some inspired thinking. I have prototypes working but I am not satisfied enough to release anything public other than the earlier definition for [import] in this thread.

Perhaps you can place your form in a user defined page (named say myform.html) and include that page on the dashboard using the native "Web Page" widget QuickBase offers. Or you could use jQuery's load() method to inject the HTML in your myform.html into the dashbaord or a cell of a report. These methods are not perfect because you don't get full control over the layout, styling and behavior of your form (without additional scripting that is a bit advanced - but doable). For example, if you use the Web Page widget QuickBase will place your form into an <iframe> in the dashboard and you have to accept or deal with viewport sizing and trapped in a frame issues. Likewise if you inject your page using $.load() there may be an interaction between QuickBase's CSS and the styling you expect on your form because all the content (native and your injected HTML) is in one page. Web Components is designed to avoid these problems but the patterns of using Web Components alone as well as applying them to QuickBase have to be worked out.