Using Bootstrap Studio to design the experience views

anaptfox · September 4, 2019, 4:20pm

So, at their core Experience Views are simply HTML/CSS with Handlebar templating support.

If you’re new to Experiences, I highly recommend the Experience Views Walkthrough.

For now, I think I’m interpreting this question as, where do you put the assets you’ve just received from Bootstrap Studio?

Well, you just receive a bundle of CSS/HTML/JS.

HTML - In Losant, you can’t upload HTML directly, but you can create an Experience View and copy/paste your HTML there. Then, using an Experience Workflow, you can pass data to that page and display it using Handlebars.

CSS/JS- Right now, you have two options to store CSS/JS in Losant.

View Component - You can create components for your assets and pull them into an experience view. Here is an example:

github.com

Losant/example-application-kanarra-technologies/blob/master/experience/layouts/layout-device-details.hbs

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <script>
      {{component "js-layout-device-details"}}
    </script>

    <style>
      {{component "css-global-reset"}}
      {{component "css-global-styles"}}
      {{component "css-sidebar"}}
      {{component "css-layout-device-details"}}
    </style>
  </head>
  <body id="layout-device-details">
    <div style="display:flex; flex-direction:row; height:100%; width:100%;">
      {{! Sidebar }}
      <div class="sidebar-container">
        <div style="display:flex; flex-direction:column; height:100%;">

This file has been truncated. show original

Losant Files - You can simply upload your files to Losant, and reference them in the respective script or link tag in an Experience View (HTML).

Let me know if this helped. Happy to explain further.

Topic		Replies	Views
TOMORROW: Your Most Requested Webinar Topic Losant Announcements experience , dashboard , workflow	1	678	May 14, 2020
Using External Bootstrap Framework Help experience	2	591	October 2, 2019
Platform Update - Introducing Experience Views Platform Updates	3	1279	November 10, 2017
How to customize screens or pages in losant ? Or what tech stack is used to customize them? Help experience , dashboard	1	463	July 13, 2021
Is it possible for use React to build the experience views app? Help experience	4	1212	July 29, 2020

Using Bootstrap Studio to design the experience views

Related topics