Include css and js in an upgrade safe way

👨‍💻 Development Help
1

Hi,
i need to include my custom script that requires js and css inclusion in order to xtend some modules.

How can i include this globally or in some modules in upgrade safe manner?

Thank you

2

Hi,

You can write your javascript and css style in custom/modules/[Module]/view.edit.php as following in upgrade-safe manners.

<?php require_once('include/MVC/View/views/view.edit.php'); class [MODULE]ViewEdit extends ViewEdit { function display() { echo <<< EOS body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } EOS; } } ?>

Hope this helps … :slight_smile:

3

Ah ok…
anyway the css that i need to include is enogh big…

It is a select2 dropdown script so i would like to make an inclusion and not to copy and paste the whole css…

WHat do you thonk about?

Thank you

4

just to be clear…

In select2 i need to include its js file and its css stylesheet.

For the js i’ve simply do the following in editviewdefs.php

 'includes' => 
      array (
        0 => 
        array (
          'file' => 'custom/js/select2/js/select2.full.min.js', => select2 jquery file
        ),
        1 => 
        array (
          'file' => 'custom/modules/Accounts/js/account_dbg.js',=> my custom jquery code 
        ),
      ),

Bur for css how can i include it?

Thank you

5

Hi,

Yes you can also include java-script using the way you mentioned.

You can include css writing following code in your display function.

function display(){
echo ‘’;
}

This will help you…

6

Tried with no luvk:

<?php require_once('include/MVC/View/views/view.edit.php'); class AccountsViewEdit extends ViewEdit { function display() { echo ''; } } ?>

i see the css loaded in the source page…but when a try to edit or create a blank page is showed…

any hint?

7

Hi,

You need to call parent::display() in display function.

<?php

require_once('include/MVC/View/views/view.edit.php');

class AccountsViewEdit extends ViewEdit {

   function display() {
        parent::display();
        echo '<link rel="stylesheet" href="custom/themes/SuiteR/css/select2.min.css" type="text/css"/>';
     }
}

?>

Try this.

8

Cool!!!

Thank you