{"id":1805,"date":"2022-03-14T18:14:31","date_gmt":"2022-03-14T12:44:31","guid":{"rendered":"https:\/\/store.ksolves.com\/blog\/?p=1805"},"modified":"2022-03-25T16:41:16","modified_gmt":"2022-03-25T11:11:16","slug":"steps-to-add-css-and-javascript-files-in-odoo-module","status":"publish","type":"post","link":"https:\/\/store.ksolves.com\/blog\/odoo\/steps-to-add-css-and-javascript-files-in-odoo-module","title":{"rendered":"Steps To Add CSS and JavaScript Files In Odoo Module"},"content":{"rendered":"

Introducing CSS and javascript (and jQuery) allows you to modify the style of Odoo. It allows a user to open up a new set of options for adding an option in Odoo.<\/p>\n

This write-up will explain how to add CSS and JavaScript files in Odoo modules.<\/p>\n

Follow the step-by-step process to successfully add a CSS and JavaScript file in Odoo ERP<\/a>.<\/p>\n

1. Create an XML file under the views folder. This XML will attach the CSS and javascript files in the module.<\/p>\n

\"assets.xml\"<\/p>\n

2. Add this XML file path to your module manifest. This will load the XML file when the starting up for running.<\/p>\n

Note: <\/b>Ensure that you give the correct path and filename so that you can use it instantly without missing the file.<\/p>\n

‘data’<\/span>: [<\/span><\/p>\n

\u00a0\u00a0\u00a0‘views\/assets.xml’<\/span>,<\/p>\n

]<\/span>,<\/span><\/p>\n

\"manifest\"<\/p>\n

3. We need to inherit the Odoo assets backend template in assets.xml where all the CSS and javascript are linked in a bundle.<\/p>\n

When all CSS and JavaScript in Odoo are uploaded to assets, the initial step should be to call inherit id.<\/p>\n

You can utilize an \u2018XPath\u2019 to add your code files. Furthermore, adding resources is similar to adding a field to a view using inheritance.<\/p>\n

Here, you are only referring to a file instead of a field.<\/p>\n

<?xml version<\/span>=”1.0″ <\/span>encoding<\/span>=”utf-8″ <\/span>?>
\n<\/span><\/span><\/span><odoo>
\n<\/span>\u00a0<template
\n<\/span><\/span>\u00a0 \u00a0 \u00a0 id<\/span>=”assets_backend”
\n<\/span>\u00a0 \u00a0 \u00a0 name<\/span>=”Student Assets Backend ”
\n<\/span>\u00a0 \u00a0 \u00a0 inherit_id<\/span>=”web.assets_backend”<\/span>>
\n<\/span><\/span>\u00a0 \u00a0 \u00a0 <xpath <\/span><\/span>expr<\/span>=”.” <\/span>position<\/span>=“inside”<\/span><\/span>>
\n<\/span>\u00a0 \u00a0 \u00a0 \u00a0<\/xpath>
\n<\/span><\/span>\u00a0 \u00a0 <\/template>
\n<\/span><\/span><\/odoo><\/span><\/p>\n

The \u201cweb.assets_backend\u201d is already designed by Odoo that has all the JavaScript and CSS code. A user can inherit them for adding its CSS and javascript files within.\u00a0<\/b><\/p>\n

The <\/xpath> expression suggests Odoo for introducing those files to the web.assets_backend main path.<\/p>\n

\"backend\"<\/p>\n

Creating CSS \/JavaScript Files in Odoo<\/b><\/h3>\n

Let’s get started to generate CSS and JavaScript files in Odoo.\u00a0<\/b><\/p>\n