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:
https://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