0
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

Accepted Answer

Monday, July 30 2018, 05:30 PM - #Permalink
0
To refer to a css on a custom form all you need to do is add a HTML/Javascript widget and include the following:

<link rel="stylesheet" type="text/css" href="/styles/custom.css" />


Edit the href to point to where you have saved your css file.
The reply is currently minimized Show
Responses (2)
  • Accepted Answer

    Monday, July 30 2018, 08:20 PM - #Permalink
    0
    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:

    <link rel="stylesheet" type="text/css" href="/styles/custom.css" />


    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?
    Like
    • David Sheaffe
      3 weeks ago
      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.
    • Hafiz Aimaq
      2 weeks ago
      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))
    The reply is currently minimized Show
  • Accepted Answer

    yuvaraj J
    yuvaraj J
    Offline
    Monday, August 06 2018, 04:03 AM - #Permalink
    0
    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..


    <div id="section1">
    <a href="#">i will be red</a>
    </div>
    <div id="section2">
    <a href="#">i will be blue</a>
    </div>


    So, Use different class for each part in your web page and customize the CSS code for each class.
    The reply is currently minimized Show
Your Reply