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.

Basically, it works as follows:

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.