Using External Bootstrap Framework

Help
1

I am trying to incorporate an external bootstrap framework into my Losant Experience application. I have copied the bootstrap framework files as well as CSS files to my Application/Files directory structure. I also have create an Experience view and modified the HTML code to point to the Bootstrap framework and CSS files but it appears not to recognize these. Can anyone provide some assistance to get this working?

Here is the HTML code

Smart Building Manager| Verizon
Toggle navigation 
<div class="container whitepage">
  <div class="row row-eq-height">
    <div class="pageHeader col-md-12 col-sm-12">
      <h1>Smart Building Manager</h1>
    </div>
  </div>

  <div class="row">
    <!-- Left Side Bar -->
    <div class="col-md-2 col-sm-2 leftSideBar leftSideBarHeight scrollAction">
      <h2>Organizations/Sites</h2>
    </div>

    <!-- Content section -->
    <div class="col-md-10 col-sm-10 contentSection">
     <!-- Check to see if we have a valid org and site name -->
      <?php
        $orgName = "Smart Building"
        if ($orgName) {
      ?>
        <h2><?php echo $orgName . " Info"?></h2>

        <!-- Org Info section  -->
        <div class="col-md-6 col-sm-6 column-separator contentHeight scrollAction">
          <h2>Org Info</h2>
        </div> <!-- End of Org Info section  -->

        <!-- Site Info section -->
        <div class="col-md-6 col-sm-6 contentHeight scrollAction">
          <h2>Site Info</h2>
        </div> <!-- End of Site Info section -->
      <?php } else { ?>
        <div class="col-md-10 col-sm-10 contentSection emptyContentHeight">
        </div>
      <?php } ?>
    </div> <!-- End of Content section -->
  </div>
</div><!-- /.container -->

<!-- Global Footer -->
<footer class="container disclaimer padding-left-right-zero footerPage">
  <div class="row">
    <div class="col-md-8 col-xs-8">
      <p>Proprietary and Confidential. Not for disclosure outside of Verizon.</p>
    </div>
    <div class="col-md-4 col-xs-4">
      <p class="pull-right pull-mobile-none">Copyright ©
        <script>document.write(new Date().getFullYear());</script>
      </p>
    </div>
  </div>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/vzdesign/scripts/jquery.min.js"></script>
<script src="/vzdesign/scripts/bootstrap.min.js"></script>
<script src="/vzdesign/scripts/vzbootstrap.min.js"></script>

I have also included images showing

o CSS file structure
o Root file structure (bootstrap framework)
o Output of HTML

Hope this can provide enough data to help identify the issue

thanks

ed

Losant%20App%20Output
Losant App Output.png858Ă—589 33.1 KB
Losant%20CSS%20File%20Dir Losant%20Root%20File%20Dir

3

Hi @Edward_Szajner,

I believe the problem here is the path to your files. I opened DevTools on your experience page and was given a few “404: failed to load resources” error on the files you refer to above:

59%20PM

You can get the path of these files by visiting them in Losant Files and copying the URL:

45%20PM

Let me know if this works for you!
Julia

4

Julia,

That appears to work as expected. I guess I am was under the impression that file paths for Application/Files was relative and not absolute. I don’t like the fact that I have to supply the https:// tag along with the UUID of the Experience application. It would make more sense to have the Application/Files structure relative to the actual Losant Experience application so that part of the path could be hidden from the code. This is how Webservers typically work where the base is defined and you only supply the file specific part of the path

thanks

ed

2 Likes