topic Re: Separate CSS and JS files not working in HTML Form in SAS Programming

Separate CSS and JS files not working in HTML Form

arthurdpereira — Fri, 05 Jul 2024 23:12:43 GMT

Hello everyone,

I created a form in SAS Viya V.03.05 using Job Execution (Studio), but when I place the style.css and script.js files separate from the HTML code, neither of them work.

Even using a library like Bootstrap does not work.

Am I doing something wrong, or does SAS not execute files outside the form?

I tried the following methods:

/SASJobExecution/?_program=/Public/JES/script.js
/SASJobExecution/?_program=/Public/JES/style.css

<link href="/SASJobExecution/?_program=/Public/JES/style.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">

<script src="/SASJobExecution/?_program=/Public/JES/script.js"></script>
<script src="script.js"></script>

Could someone please help me?

Re: Separate CSS and JS files not working in HTML Form

Kurt_Bremser — Sat, 06 Jul 2024 07:27:14 GMT

Have you tried this:

<link href="/Public/JES/style.css" type="text/css" rel="stylesheet">

Re: Separate CSS and JS files not working in HTML Form

ChrisNZ — Sat, 06 Jul 2024 10:53:04 GMT

when I place the style.css and script.js files separate from the HTML code, neither of them work.

If that's an HTML page with existing css and js files, have you tried adding the file path?

<link href="/Public/JES/style.css" type="text/css" rel="stylesheet">

Re: Separate CSS and JS files not working in HTML Form

arthurdpereira — Sat, 06 Jul 2024 14:44:40 GMT

No, it doesn't work either. I had already tried that.

Re: Separate CSS and JS files not working in HTML Form

arthurdpereira — Sat, 06 Jul 2024 14:46:27 GMT

No, it's not an .html file, but rather HTML written in the 'HTML form'. Do I need to create an HTML file and "link" to it?

Re: Separate CSS and JS files not working in HTML Form

Kurt_Bremser — Sat, 06 Jul 2024 14:50:53 GMT

You must place the stylesheet and scriptfile in a location from where the web server (apache/httpd, not the web application server) can serve them, and use the corresponding web path as your href. Keep in mind that the browser is the place where everything has to come together.

Re: Separate CSS and JS files not working in HTML Form

arthurdpereira — Sat, 06 Jul 2024 14:51:19 GMT

I tested it this other way and it still didn't work.

Re: Separate CSS and JS files not working in HTML Form

arthurdpereira — Sat, 06 Jul 2024 14:56:28 GMT

Thank you for the answer. That makes sense. How do I upload the file to the Apache/httpd server? Is there a reference link I can follow?

Re: Separate CSS and JS files not working in HTML Form

DeMer — Mon, 08 Jul 2024 22:08:17 GMT

Check out the section "Including a File in an HTML Form" in

https://documentation.sas.com/api/docsets/jobexecug/v_002/content/jobexecug.pdf?locale=en

See if it works in V3.5.

Re: Separate CSS and JS files not working in HTML Form

arthurdpereira — Tue, 09 Jul 2024 16:18:33 GMT

I tried to put everything in 'Including a File in an HTML Form', but it still didn't work

Re: Separate CSS and JS files not working in HTML Form

DeMer — Tue, 09 Jul 2024 16:25:15 GMT

Was there anything in the browser F12 console log?

Re: Separate CSS and JS files not working in HTML Form

arthurdpereira — Tue, 09 Jul 2024 16:29:36 GMT

Yes, it shows this error. But I don't know what this MIME is.

Re: Separate CSS and JS files not working in HTML Form

DeMer — Tue, 09 Jul 2024 16:42:55 GMT

Means that the CSS file has been stored in the File Service with a content type that is not text/css.

I think the easiest way in V3.5 is to import the files using SAS Drive. It will set the MIME type based on the file type in the file name e.g. myfile.css.

Re: Separate CSS and JS files not working in HTML Form

arthurdpereira — Tue, 09 Jul 2024 18:08:26 GMT

I tried every way, with and without the extension name; putting '/SASJobExecution?_FILE=/Public/JES/style.css'; '/SASJobExecution?_FILE=/Public/JES/style'; 'files/files/4341684f-d65e-4760-af63-5b8123b0a370/content'', but I couldn't find it in any of them...

The strangest thing is that SAS recognizes the file format, but it still gives this type of error.

Re: Separate CSS and JS files not working in HTML Form

DeMer — Tue, 09 Jul 2024 18:21:44 GMT

Can you see the file characteristics in a browser with a URL like

http://yoursystem/files/files/4341684f-d65e-4760-af63-5b8123b0a370

Re: Separate CSS and JS files not working in HTML Form

arthurdpereira — Tue, 09 Jul 2024 18:39:29 GMT

Yeap, it shows it this way:

Re: Separate CSS and JS files not working in HTML Form

DeMer — Tue, 09 Jul 2024 19:26:02 GMT

Looks like the content type is application/octet-stream. Need it to be text/css.

If you haven't already, I think you need to reload your file using SAS Drive to get it set correctly.

Re: Separate CSS and JS files not working in HTML Form

arthurdpereira — Tue, 09 Jul 2024 21:08:52 GMT

DeMer, thanks for your help. You gave me more determination to keep insisting. And I did it.

I still don't know why, but the problem occurs that the .css file needs to have the <style></style> tag in the file. Example:

<style>
	body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #181c35;
		font-family: Arial, sans-serif;
	}
	/* Your CSS styles */
</style>

This way, the link created from the SASDrive URI recognizes as CSS:

<link href="/files/files/########/content" type="text/css" rel="stylesheet">

Thanks guys for all the support!

Re: Separate CSS and JS files not working in HTML Form

ChrisNZ — Wed, 10 Jul 2024 02:03:31 GMT

The <style> tags being required is very odd, and maybe not as expected really, but good on you on insisting and finding a solution.