Include URL – mega-power in small bottle

Include URL – mega-power in small bottle


Include URL feature is available in all advanced wizards. It is a simple text field (see image below) where users can add a full URL of the file to be included at the bottom of each page of deployed dbBee application. The file could be located anywhere on public Internet and user should provide absolute URL including protocol, server name and full path to the file. The file itself can be of any type (HTML, CSS, JavaScript, TXT or any other text-based format), it can contain JavaScript, HTML, CSS or mixture of these.


This is a very powerful feature that enables our users to add any kind of content at the bottom of their advanced dbBee projects. How this can help you? Using include URL field you can add your own CSS rules, JavaScript code, call to various JavaScript libraries, etc.

Depending only on user’s skills this feature can be used for various purposes including validating the user input in Admin and CD apps, changing CSS of the dbBee report/project to fully match the host page style, merging and/or inserting new rows and columns in dbBee or even adding some server-side actions with scripts on the host web site. Additionally this feature can be used for adding some custom contact form to your dbBee application, YouTube video, AdSense or some other advertising code, embed code for social networks (like/share buttons, news feeds, etc.)

Basically, it works as follows:
  1.  Create custom file that contains HTML, CSS and JavaScript needed for completing the task. Please note that any resources that will be called from this file have to be referenced using absolute URL (images, external javascript files, external css files, font files, etc.)
  2. Save that file to some publically available server (it can be saved anywhere on host web site, for example)
  3. Use field "Include URL” to add that file to dbBee advanced project
  4. Save and deploy the project
dbBee will load contents of this URL each time it generates the dbBee page.

One of the simplest examples of use Include URL feature would be changing the style of elements of dbBee app. Here are few examples:

This one will change the width of search field in QB and QBD app, and enlarge the font of page numbers in the navigation links.

<style>
.dbbeeNavPageNums a, .dbbeeNavPageNums span {
    font-size: 19px !important;
}
.dbbeeQSearchField {
    width: 90% !important;
}
</style>

The next one will change the height of the input field named “Job description” in Collect Data application.

<style>
.dbBeeAdminInput[name="Job Description"]{
height:250px;
}
</style>

Now something more complex – adding custom header and footer to your dbBee application:

<div class="header" id="someCustomHeader">
    <img src="https://somepublicserveraddress.tld/assets/img/logo.png" style="width: 200px" alt="">
    <img src="https://somepublicserveraddress.tld/assets/img/bank-logo.png" style="height: 48px" alt="">
    <span>Exclusive Banking Partner</span>
  <h1>Weekly Performance Dashboard</h1>
</div>
<style>
.footer {
    background-color: white;
    color: black;
    text-align: center;
}
.header {
    width: 100%;
}
</style>
<div class="footer" id="someCustomFooter">
  <p>Your Company Name © All Rights Reserved</p>
</div> 
<script>
var hdr=document.getElementById("someCustomHeader");
document.getElementById("someCustomHeader").outerHTML="";
document.body.insertBefore(hdr,document.getElementsByTagName("form")[0]);
</script>

Upon dbBee application load, this code will be an integral part of the app code and script at the bottom will be executed. Basically, it will take the “someCustomHeader” element and put it in the variable, then delete it completely (so to avoid showing it at the bottom of the dbBee application page) and then add it to the document just above the first form element. The element named “someCustomFooter” will remain in its original position and be displayed at the bottom of the dbBee application page.


With this feature, users’ ability to style, modify and control dbBee application is pretty much limited only by their own skills in HTML, JS, CSS, jQuery, etc.
Please like our
Facebook page
Arrows