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 (4)
  • 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
      more than a month 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
      more than a month 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
  • Accepted Answer

    Wednesday, November 21 2018, 05:05 AM - #Permalink
    0
    To link a CSS file with your HTML file you have to write the next script on your html file inside the head tag.

    <link rel=¨stylesheet¨ type=¨text/css¨ href=¨..\[folder_name]\[file_name].css¨>


    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).

    <link rel=¨stylesheet¨ type=¨text/css¨ href=¨[file_name].css¨>


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

    <link rel=¨stylesheet¨ type=¨text/css¨ href=¨[url_bootstrap_theme]¨>


    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 ).

    <script src="/..\[folder_name]\[file_name].js"></script>


    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).

    <script src="/[file_name].js"></script>


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

    <script src="/[url_of_the_js_library]></script>


    I hope this post helped you.



    ------------------------------------------------------------
    php interview questions, php interview questions and answers, php interview questions for freshers
    The reply is currently minimized Show
  • Accepted Answer

    Rakesh ba
    Rakesh ba
    Offline
    Wednesday, December 05 2018, 11:43 PM - #Permalink
    0
    Great information. Lucky me I ran across your site by chance (stumbleupon). I have bookmarked it for later!
    New Year 2019 Wishes
    New Year Quotes 2019
    The reply is currently minimized Show
Your Reply

Recent Tweets