Examples of how to extend QuickBase
Examples
Embedding multiple charts and graphs in a dashboard text panel
This is an example of the editable html code that helps you insert multiple graphics within a single "Text" panel of a QuickBase dashboard.
This permits them to be displayed side by side.
1. Create the first view you like.
2. Right click on web page (keep off a graphic) and view the "Page Source" of the html code. There will be a lot of html code.
3. Look through the code until you find something like the following:
<iframe src="https://www.quickbase.com/Chart/chart.aspx?realmhost=www.quickbase.com&dbid=bcj3fw3vi&qid=40&generate=map"
scrolling="no" frameborder="0" width="800px" height="650px" marginwidth="0px" marginheight="0px" id="iframeDundas" name="iframeDundas">
</iframe>
4. Highlight the complete <iframe tag all the way through to and include the </iframe> closing iframe tag.
5. We need to edit the text so that the size will be smaller and it won't overpower the dashboard. See the red text below. Make yours the same.
<iframe src="https://www.quickbase.com/Chart/chart.aspx?realmhost=www.quickbase.com&dbid=bcj3fw3vi&qid=40&generate=map&width=600&height=400"
scrolling="no" frameborder="0" width="600px" height="400px" marginwidth="0px" marginheight="0px" id="iframeDundas" name="iframeDundas">
</iframe>
6. Then create your second view and do the same. You should now have two new and edited iframe statements.
7. Next cut and paste the edited iframe statement text into their respective places inside the Example HTML CODE below, replacing the like statement with this new code.
EXAMPLE HTML CODE
________________________________________
<!BEGIN GRAPHS-->
<table>
<tr>
<td>
<iframe src="https://www.quickbase.com/Chart/chart.aspx?realmhost=www.quickbase.com&dbid=bcj3fw3vi&qid=40&generate=map&width=600&height=400"
scrolling="no" frameborder="0" width="600px" height="400px" marginwidth="0px" marginheight="0px" id="iframeDundas" name="iframeDundas">
</iframe>
</td>
<td>
<iframe src="https://www.quickbase.com/Chart/chart.aspx?realmhost=www.quickbase.com&dbid=bcj3fw3vi&qid=40&generate=map&width=600&height=400"
scrolling="no" frameborder="0" width="600px" height="400px" marginwidth="0px" marginheight="0px" id="iframeDundas" name="iframeDundas">
</iframe>
</td>
</tr>
</table>
<!--END GRAPHS-->
________________________________________
8. Highlight and copy everything between the two horizontal lines. Include everything from <!BEGIN GRAPHS--> to and including <!--END GRAPHS-->
9. Go to your application's dashboard and "Customize this page".
10. Add a New Section and select Text.
11. Click the HTML button of that panel's editor so it will understand that we are pasting in html code instead of plain text.
12.Paste the code into the "Text" panel
13. Save the dashboard
If all went well, both of the charts or graphs should be side by side in that "Text" panel.
- Printer-friendly version
- Send to friend
- Add new comment
- 22177 reads
Browse by Category
Knowledge Base Categories
- Accounts (36)
- Application (47)
- E-Mail (8)
- Fields (42)
- Forms (20)
- Formulas (18)
- General (55)
- Other Product (7)
- Pages (1)
- Product (5)
- Reports (15)
- Roles (4)
- Search (1)
- Tables (6)
Formula Category
Latest Community Forum Posts
- Problem with Mandatory Relationship Between Two Tables
- Is it possible to use API to get Form Properties?
- Product Replacment under warranty
- Transferring a Group from one Billing Account to another
- Multiple HTML Quick Search Boxes on a Quickbase Page to search a specific tables - Follow Up Question...


