Using Bootstrap Studio to design the experience views

Hey,

I try to redesign my experience views to get a modern and decent looking website for our customers.

While we are a startup we can’t afford professional web designer yet.
For that I found Bootstrab Design Studio. (https://bootstrapstudio.io/) They’ve got several example and it’s mostly drag and drop with a life preview.

So for me as a beginner it is very good!

My question now is, if you can help me to design my website using this tool and then use it within the experience view. If I export one of these test websites I get the html file and also couple of folders:
image

Any help is appreciated!

Best regards,
Tim

Hi @Tim_Sahr,

I’m a bit confused on what your question is here. Are you looking for how to use bootstrap in an experience? Or how to use bootstrap studio to build it?

Thanks!
Julia

Hi @JuliaKempf ,
Sorry I didn’t make myself clear.

Both somehow.
I created a design in Bootstrap Studio, exported it and displayed the HTML code as an experience view. The result was very modest, as of course all other resources were missing.

My question now is, how do I proceed after I have created a design in Bootstrap Studio to display it in my experience view?

Hope this clarify it.

Best regards,
Tim

@Tim_Sahr,

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:
  • 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. :slight_smile:

Hi @anaptfox,

This is exactly what I was looking for. :slight_smile:
I already followed the Experience View Walkthrough and created these pages. :slight_smile:

For clarification if I understand you correct:

  • I will create the basic layout and add it to the example layout, because my other views are based on this?
  • Next step would be to design the pages which are based on the example layout?
  • For the css files, I will create a component with the code inside, add it to the html code and then it is available? Or I upload it to my losant file storage and link it from there to my html code?

@Tim_Sahr, Yes! :hugs: That’s exactly it!

1 Like

Hi @anaptfox,
So far, your solution with uploading the .css files and link them to the html code work very good! :raised_hands:

Another question I came up is, do I really need the example layout or can I design every page as an individuell design and add it to the pages?

1 Like

@Tim_Sahr

This is where you have full control. You can have one layout, multiple layouts (for different types of pages), or not use them at all. :slight_smile:

Happy things are working out

Hi @anaptfox,
At the moment I’m working on the user register page. My old design works but with the new design I can’t get it work.

I have the same endpoint, the same workflow but a slightly different html code.

My Code for the POST-Method:

        <form id="form-login" method="post">
            <h2 class="text-center"><strong>Create</strong> an account.</h2>
            <div class="form-group" id="firstname"><input class="form-control" required value="{{ pageData.firstName }}" required="" type="text" placeholder="First name" ></div>
            <div class="form-group" id="surname"><input class="form-control" required value="{{ pageData.lastName }}" required="" type="text" placeholder="Surname" ></div>
            <div class="form-group" id="usergroup"><input class="form-control" required value="{{ pageData.userGroup }}" required="" type="object" placeholder="Company code" ></div>
            <div class="form-group" id="email"><input class="form-control" required value="{{ pageData.email }}" required="" type="email" name="email" placeholder="Email"></div>
            <div class="form-group" id="password"><input class="form-control" type="password" name="password" placeholder="Password (min. 8 characters)" minlength="8"></div>
            <div class="form-group"><button class="btn btn-primary btn-block" id="button-sign-up" type="submit">Sign Up</button></div><a class="already" href="/login">You already have an account? Login here.</a></form>

This is the Workflow with the error:

This is the Validate Payload Node Code:

{
“type”: “object”,
“properties”: {
“email”: {
“type”: “string”,
“format”: “email”
},
“firstName”: {
“type”: “string”,
“minLength”: 1,
“maxLength”: 255
},
“lastName”: {
“type”: “string”,
“minLength”: 1,
“maxLength”: 255
},
“password”: {
“type”: “string”,
“minLength”: 8,
“maxLength”: 255
},
“userGroup”: {
“group”: {
“type”: “string”
}
}
},
“required”: [“firstName”, “lastName”, “email”, “password”, “userGroup”],
“additionalProperties”: false
}

This is my page layout. Company Code would be the user group in the workflow.

What ever I try I can’t pass the “Validate Payload” Node. I just don’t understand it, because it should be the same data.

Best regards,
Tim

Hi @Tim_Sahr,

Based on your screenshot, it looks like it’s the Endpoint Reply Node that’s causing that error (notice it’s highlighted).

Would it be possible that the JSON you’re creating in that node is not valid JSON?

@anaptfox

Good Morning,

Is there a way to prove what the json file looks like?

I added some debug nodes in the workflow. I get no errors until the “Validate Payload Node”.

Is it possible that I missed and important line of code? In the last version I used the example layout, a page and a component.
I also tried to copy the old html code for this part with no luck.

It’s hard for me to figure it out. :sweat_smile:

Last time I used this thread as a base:

@JuliaKempf Do you might have an idea?

@Tim_Sahr,

Is the JSON in the Validate Payload Node valid?

Here are some great resources to check this:

If this isn’t the issue, I can hop in to your application to see if I can see something that’s missing :slight_smile:

@anaptfox

I changed something in the html code. Which (I’m really sure) also did yesterday but now it is working :face_with_monocle::confused:

The working html code for a working POST method looks like following:

<div class="register-photo" style="height: 80vh;background-image: url(&quot;https://files.onlosant.com/5cd81d7871914b0007d1795b/webiste_files/190113_career.jpg&quot;);">
    <div class="form-container">
        <form id="form-login" method="post">
            <h2 class="text-center"><strong>Create</strong> an account.</h2>
            
          	<div class="form-group" id="firstname">
              <input autofocus minlength="1" maxlength="255" value="{{ pageData.firstName }}" type="text" class="form-control" name="firstName" id="firstName" placeholder="e.g. Joe">
          	</div>
            
          	<div class="form-group" id="surname">
              <input autofocus minlength="1" maxlength="255" required value="{{ pageData.lastName }}" type="text" class="form-control" name="lastName" id="lastName" placeholder="e.g. Doe">
          	</div>
            
          	<div class="form-group" id="usergroup">
              <input required value="{{ pageData.userGroup }}" type="object" class="form-control" name="userGroup" id="userGroup" placeholder="instagrid">
          	</div>
          
            <div class="form-group" id="email">
              <input required value="{{ pageData.email }}" type="email" class="form-control" name="email" id="email" placeholder="e.g. max.mustermann@example.com">
          	</div>
            
          <div class="form-group" id="password">
            <input required minlength="8" maxlength="255" type="password" class="form-control" id="password" name="password" placeholder="At least 8 characters">
          </div>
          
          <div class="form-group"><button class="btn btn-primary btn-block" id="button-sign-up" type="submit">Sign Up</button></div><a class="already" href="/login">You already have an account? Login here.</a></form>
    </div>
</div>

Thanks for the help :slight_smile:

@Tim_Sahr,

All good. I’ve been in that boat before :slight_smile: For the sake of the forums, if you could post how you fixed the issue that would be awesome!

@anaptfox
Of course, I added it to my previous post. :slightly_smiling_face:

1 Like