Embed Custom HTML

  • 2
  • 3
  • Question
  • Updated 1 year ago
  • Answered

Hi -

I have created a time sheet entry tool using HTML and java script and am wondering, would it be possible to embed this on the main quick base site either on a form or a report. At the minute it is set up as another HTML page.

Ideally all the functionality of the main site would remain with the HTML page showing within.

Has anyone done anything like this or know if it is possible?

Thanks in advance!

Sean

Photo of Sean

Sean

  • 20 Points

Posted 4 years ago

  • 2
  • 3
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
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.
Photo of Sean

Sean

  • 20 Points
Thanks for this, I'll take a look and get back to you if I have any more questions.
Photo of Sean

Sean

  • 20 Points
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.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
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/
Photo of Peter Rifken

Peter Rifken, Employee

  • 92 Points 75 badge 2x thumb
Hi Dan, by chance have you put together an example demonstrating web components? I'm a solutions engineer with Quickbase and would love to prove this out for a customer. 

Best,

Peter
I am pretty sure you can use the image onload technique (IOL) to embed a custom object based on a code page. The attached picture shows expandable and collapsible child record rows with its own child record data within each row. Three levels of data all within one view, embedded on the form. 
Photo of Peter Rifken

Peter Rifken, Employee

  • 92 Points 75 badge 2x thumb
The IOL technique actually worked to inject the script & chart into the table form. That said, once loaded I was unable to edit the form - likely corrupted by my hack! 

Can you point to source code for the screen shot shown above? That looks very interesting & a feature recently requested of me by a customer. 
Peter,

I'd be happy to demonstrate a live version / proof of concept with you and your customer if you'd like. Unfortunately, the source code is a bit too valuable to give away. Let me know if I can be of any help in that arena. My contact info is in my profile.

Thanks,

Eric
CirrusOps
Photo of Sean

Sean

  • 20 Points
Thanks for this. I'll take a look and get back to you.
Photo of Sean

Sean

  • 20 Points
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]?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
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.
Photo of Sean

Sean

  • 20 Points
Thanks, I'll take a look at this as well.
Photo of Sean

Sean

  • 20 Points
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?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
>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.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
Very quickly implemented, here is a demo a Subdatasheet (terminology from Access feature) where you can click on the +/- button and show/hide the related child records:

Subdatasheet ~ List All Report (click on +/- sign in first data column to show/hide child records)
https://haversineconsulting.quickbase.com/db/bmnf7nrvf?a=td
 
Pastie Databsase
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=564

I have no idea what you HTML page does but your HTML can be inserted into the report using similar techniques using jQuery.

If you need individual assistance implementing this solution fee free to contact me off-world using the information in my profile:

https://getsatisfaction.com/people/dandiebolt
(Edited)
Photo of rocketc

rocketc

  • 824 Points 500 badge 2x thumb
Dan,

If I wanted to insert a report (qid) that I have already created (example List All = qid=1 instead of using a clist -- is this possible? 
Photo of Scott

Scott

  • 334 Points 250 badge 2x thumb
Howdy Dan,

This is grave digging a little bit, but I had a slight issue implementing this.

I utilize this in my company to show child records for an order- Basically a glance at the order w/o fully opening it.  Works great without doing anything special.

However, if I filter the orders table for a specific customer and then try to open the subtable to preview the order- no dice!  I've tested it on your specific setup by utilizing the sidebar filters and came up with the same issue.

Scott
Would it be possible to use this "Embed Custom HTML" solution in an embedded report on a form which has its own child records?  

I have it working on the main report, but when I embed that report on a form of another table, it doesn't work.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
Yes it would be possible but the code would be slightly different, Basically you can do anything you want with script but it will certainly stop working at some time in the future as it relies on a random characteristics of the QuidkBase authored page - they will certainly change it over time.