Converting web designs [HTML,JS,CSS] files into Outsystems Screen designs

Converting web designs [HTML,JS,CSS] files into Outsystems Screen designs

  
Dear All,

As always this forum is very helpful for me to get answers to all of my questions. Thanks a lot for all the members in this group.

I have a new requirement to convert Web Design Output files like HTML, JS ans CSS files into Outsystems Screen Designs. I am not sure how we can integrate these files into current outsystems screen designs. 

I know that Outsystems works on theme and by default outsystems will create a default theme for every new application. I have seen that we can change the theme by creating a new theme and we can define new screens and layouts.

But if I want to directly use the HTML's or styles developed by another web developer into ousystems, how can I achieve it ?

Is it possible to add multiple JS files for an espace / webscreen ?

Is it posible to add multiple CSS files for an espace/ webscreen ?

Can we directly add HTML files in an espace / webscreen ?

Pls let me know if you need more information.

Thanks & regards
Ravi
Hi Ravi,

I am currently going to the same process as your requirements. 

If the amount of files (HTML, CSS, JS) is big, I can already tell you that it won't be easy and can be a very annoying task.

Outsystems works with a theme file, which has some web blocks that can be reused in all the pages. One of these is the Layout_Normal. This web block is used to give the same layout to all pages. Now hopefully the HTML files you need to put into Outsystems have some sort of shared layout. That is what you should put inside a web block and use as a base for all your pages.

Other stuff that is used in several HTML pages is best put in web blocks so you can easily reuse them.

Is it possible to add multiple JS files for an espace / webscreen ?

yes, it is possible. You can have JS code per webscreen or web block or you can add it as a resource.

Is it posible to add multiple CSS files for an espace/ webscreen ?

yes, add your CSS files as resources under Data :


 Then in your main theme CSS, import like this :

@import url("css/bootstrap.min.css");

Can we directly add HTML files in an espace / webscreen ?

No, you can't. You cannot import or insert HTML files directly. What you can do is break up your HTML file into pieces and insert part per part. Try to rebuild as much as you can within Outsystems, using the container ( = <div></div>). Other HTML tags like ul li h1 tags and so on will have to be put in expressions. Just copy an entire block of HTML code into an expression and set "escape content" to no. You HTML block of code will be rendered as if it was part of the page.

Needless to say it will take some time to do all this. Also if you start using expressions alot to insert HTML code directly, you preview page in Service Studio will look like **** and you will have to publish each time to see the result.

Good luck!

David,

Thanks a lot for your reply. It really helps.

Thanks
Ravi
Nice advices there David.

Just my 2 cents, I advise you to be carefull with style sheets that have Id selectors.
Since the Id of an OutSystems element is dynamically generated, it is usually a bad idea to use Id selectors.

In these kinds of projects, if you receive stylesheets with them, try to convert them to class selectors.
(adding 2 cents)
Here's the best way to add lots of external resources to your eSpace:
http://www.outsystems.com/forums/discussion/3109/best-practice-for-external-javascript-framework/#Post19327
@ Joao

Yes, I know about the generated id. I do not use id selectors to apply styles. It is generally a bad idea to use them in Outsystems, although technically you could select on id in CSS by doing :

[id^='Oustsyems widget name']
Hi Ravi,

For reference also two additional topics on tips about how to work with designers and OutSystems web applications implementation guidelines that can be useful to help you do this process in a better way.

Enjoy!
Hello,
Currently i know how to add html resource one by one in the resources folder, but can you guys let me know how to add all css,images and js files and folders in a time except adding the same one by one?

Thanks
Amit Tiwari wrote:
Hello,
Currently i know how to add html resource one by one in the resources folder, but can you guys let me know how to add all css,images and js files and folders in a time except adding the same one by one?

Thanks
 
 1. This is a really old thread... next time please start a new one...

2. If you run Service Studio from a command line, it has a number of switches, one of them lets you import a whole directory into an eSpace as resources, I think this is what you want. :)

J.Ja