Highlighted
Absent Member.
Absent Member.
5106 views

How do i include CSS files to a specific form?

Jump to solution
Hi All,
I try to include a javascript file and which comes with a css file for styling.
But I don't see a way to include this in SBM Composer, any idea for this?

Thanks,
Derek
0 Likes
1 Solution

Accepted Solutions
Highlighted
Acclaimed Contributor.
Acclaimed Contributor.

Re: How do i include CSS files to a specific form?

Jump to solution
To refer to a css on a custom form all you need to do is add a HTML/Javascript widget and include the following:



Edit the href to point to where you have saved your css file.

View solution in original post

0 Likes
8 Replies
Highlighted
Acclaimed Contributor.
Acclaimed Contributor.

Re: How do i include CSS files to a specific form?

Jump to solution
To refer to a css on a custom form all you need to do is add a HTML/Javascript widget and include the following:



Edit the href to point to where you have saved your css file.

View solution in original post

0 Likes
Highlighted
Absent Member.
Absent Member.

Re: How do i include CSS files to a specific form?

Jump to solution
David Sheaffe wrote:

To refer to a css on a custom form all you need to do is add a HTML/Javascript widget and include the following:



Edit the href to point to where you have saved your css file.

Well, this is acceptable but i would like it to be maintained on Application Repository so i don't need to deploy it separately, any idea with that?
Highlighted
Absent Member.
Absent Member.

Re: How do i include CSS files to a specific form?

Jump to solution
Hi,

You can't apply different stylesheets to different parts of a page. You have a few options:

The best is to wrap the different parts of the page in divs with class names:


#section1 a{color:red}
#section2 a{color:blue}

this will make all links inside an element with id section1 be red, and all links inside an element with id section2 be blue..







So, Use different class for each part in your web page and customize the CSS code for each class.
0 Likes
Highlighted
Absent Member.
Absent Member.

Re: How do i include CSS files to a specific form?

Jump to solution
To link a CSS file with your HTML file you have to write the next script on your html file inside the head tag.



If you have the CSS file in the same folder of your html file you only have to write the name of your CSS file, like this.(I recommend you to have the files in different folders associated by the type).



If yo are working with a bootstrap theme you can add the the link of the file



To link a Js file with your Html you only have to add the source of the script inside the body tag or outside it does not matter. (I never tried to put it inside the head tag but I do not recommend to do that ).



If you have the Js file in the same folder of your html file you only have to write the name of your Js file, like this.(I recommend you to have the files in different folders associated by the type).



If you are working with libraries like JQuery you can add the URL of the library in the source.

Highlighted
Absent Member.
Absent Member.

Re: How do i include CSS files to a specific form?

Jump to solution
I really like your blog. You make it interesting to read and entertaining at the same time. I can't wait to read more from you.
https://www.gangboard.com/business-intelligence-training/qlik-sense-training?utm_source=backlinks&utm_medium=forum&utm_campaign=coursepage&utm_term=qlik&utm_content=oveiya
0 Likes
Highlighted
Absent Member.
Absent Member.

Re: How do i include CSS files to a specific form?

Jump to solution
Following URL show how to load css/script to be loaded dynamically:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

I create a javascript file with the following function:

//===== Load CSS File since SBM does not allowed upload of CSS
function loadjscssfile(filename, filetype)
{
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}

Then you can either run the function through Form Action->execute javascript or in another javascript:

loadjscssfile(file, "css");

Cheers,
Mark
0 Likes
Highlighted
Acclaimed Contributor.
Acclaimed Contributor.

Re: How do i include CSS files to a specific form?

Jump to solution
I'm not aware of any way that you can deploy/publish a custom css file from SBM Composer (if that is what you are trying to achieve). The only option in that case would to actually embed the css in the html / javascript widget on each form instead of just referencing the css file.
0 Likes
Highlighted
Valued Contributor.
Valued Contributor.

Re: How do i include CSS files to a specific form?

Jump to solution
You can also create a form extension with the following in the definition




$$assetpath/styles/custom.css
$$assetpath/js/head.min.js
$$assetpath/js/sbmsol-util-1.1.js
$$assetpath/js/soo-util.js



In the extension, add css and js folders, add files and now the stylesheet or js file is automatically loaded.


Another thing you could do is create the extension with empty definition. Within the extension, you can add your assets which will always accompany your msd.

Add head.min.js in your form and then you can load asset as needed through form actions:
head.load($FORM_EXTENSION_ASSET_PATH(Form_Ext_Name)/css/custom.css))
0 Likes
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.