Custom Html and css
Question

Hi All,


Can anyone explain how to add custom HTML page and external css for the same html.(reactive application)

Not using the html widget, but the html file as it is.


Roshan.

Hello @Roshan Gupta,

I think is not possible to add directly and the HTML that you have from a page, you must "build" the page on OS.

All the block and contents that you create inside "Pages" will appear inside a DIV with the classes "active-screen screen-container".

Regarding the CSS part there are a lot of ways to do that:

1) Page level;

2) Module level;

3) Block level;

The best approach is to convert that page that you have, to OS Page. If you have any question I will try to help you.

Hope it helps you.

Best Regards,

Nuno R

Champion

Hi Roshan,


Like Nuno said, you must build the HTML on Outsystems.

The best thing you can use maybe using iframe, and src the html file


Thanks

If you I agree with @Toto, the approach if usign Iframe is nice when wants to include contents that is already done, you can use this plugin: https://www.outsystems.com/forge/component-overview/9106/hi-iframe.

Hi @Roshan Gupta ,

You can place a container in the screen and assign it a name. Then inside the OnInitialize action of the screen, you can run a JavaScript node with something like:

document.getElementById("nameOfTheContainer.Id").innerHTML = "my HTML code";

You need to pass the container Id and your HTML code to the JavaScript node as a parameter.

Regarding the CSS, I believe that you can just place it in the screen's stylesheet.


Regards,

Manuel

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.