I need a form view and I need its layout to be customized, using directly the Bootstrap 4 styles
How exactly can I do that ?
Also
I need some fields/tabs to appear conditionally (if some values is true) and such conditionally appearing fields need to be in my custom layout
Is this possible ?
How ?
First of all, I could use an example of a custom layout
And then I could use some enlightenment on how the conditional appearing of fields is done, behind the scenes
Thanks in advance
You can create a form view using any html you like. You can also use xpath to load custom css and javascript, such as bootstrap. You should load the xpath straight after your opening form tag.
<xpath expr="." position="inside">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</xpath>
There a couple of ways to show things conditionally. I find the following example easiest when using the form views:
<div id="my-div" attrs="{'invisible': [('field','==',True)]}">Do not show this text if the field is true</div>
Related
I have odooo online account, how can i import bootstrap theme purchased on themeforest, in the odoo? or what i should do to convert current normal theme to be working with odoo?
you could try to add the css file and the js-script file to your assets_common. Odoo will then minimise all the CSS and JS Files into one (or slightly more) files.
In addons/web/views/webclient_templates.xml you can see how the built in bootstrap is added in odoo.
So if you want to add something to all of the javascript files you can do it like this:
<template id="assets_frontend" inherit_id="web.assets_frontend" name="<name of your addition>" priority="15">
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="<path to your js file>"</script>
</xpath>
But adding a CSS or JS that isn't built for odoo might cause problems since selectors might be overwritten or you use different bootstrap versions.
I havent't tried it with Bootstrap Themes myself so there might be better solutions.
I Want to fix a div element in the bottom of the page, just before the footer in the last page, it's a qweb report inherited from the standard invoice report of Odoo, the footer it's already visible only in the last page .
Any Idea ? suggestions ?
Here is a schema of what is wanted
Thanks,
As you mention your report inherits from the standard invoice report, I assume you already know that the standard invoice layout is a Qweb view named report_invoice_document and you have already defined a template like
<template id="your_module.report_invoice_document" priority="50" t-name="Your Module - Modifications to the Standard Invoice Layout" inherit_id="account.report_invoice_document">
<xpath expr="//div[hasclass('page')]" position="inside">
<div>Your content</div>
</xpath>
</template>
So the only issue is to fine tune both the XPath expression and the position. The whole report is inside a <div class="page"> tag, so using the above xpath tag will put your content just before the report's end.
What is the best way to incorporate css / js assets into Odoo's website where the assets are only loaded for a particular page?
In the examples and documentation they speak of dumping your assets into Odoo's website.assets_frontend and I do this however there are circumstances where I would like to use website templates found online and I really do not want to take the time to look through the css classes and identify conflicts.
If the page itself were to fail that is one thing but if it breaks all the css on my existing pages that is another.
I was thinking of using a technique like this.
t-if="request.httprequest.path.startswith('/page/path/')"
Using an if statement to determine whether or not to incorporate the css in the website assets or not.
<odoo>
<data>
<template id="page_style" name="Page Style" inherit_id="website.assets_frontend">
<xpath expr="link[last()]" position="after">
<t t-if="request.httprequest.path.startswith('/page/path/')">
<link href="/addon_name/path/to/css/style.css" rel="stylesheet" type="text/css"/>
</t>
</xpath>
</template>
</data>
</odoo>
Anyways, if anyone would like to make a suggestion on how they incorporate css into Odoo's frontend assets in a contained way I would appreciate it.
What you can do is actually insert a:
<head>
<link href="/addon_name/path/to/css/style.css" rel="stylesheet" type="text/css"/>
</head>
to your template that you want the specific css/js to be applied to. For a specific example see addons/website_google_map/views/google_map_templates.xml
Your the contents of your head tag will be inserted inside the head tag of the final HTML that will be rendered for that template.
Since it seems to be straighforward and used by the framework itself I have resorted on using it on my own with no problems so far. As I can understand you can also create a javascript Widget that will operate on your template only that will apply a specific css. But the above solution seems cleaner to me.
I have some form, with css defined and with some textfields, let's use the following as example
<link rel="stylesheet" type="text/css" href="test.css"/>
<form action="/em/call" class="myStyle">
field1:<input text="hello"></input>
<input value="submit" type="submit"/>
</form>
Is it possible to show validation error if field1 is non-empty using Yii built-in validator, if yes, how should I do that?
(In the example given by Yii, it seems using CWidget::form, i am not sure how to customized that in my project, where GUI has been defined)
Yii's validators are built for Yii's architecture and thus you always need at least a model that contains your form data. Before you try to hack your way through something i'd suggest to rewrite your form. It's pretty straightforward and it's documented here:
http://www.yiiframework.com/doc/guide/1.1/en/form.overview
Suppose I have many views, each displaying very similar content. Each view uses the same _Layout as defined in _ViewStart.
My _Layout might look like this:
<html>
<!-- some html -->
#ViewBag.SomeViewBagFun
<!-- more html -->
#RenderBody
<!-- more html -->
#SpecialFunction()
</html>
Helper SpecialFunction()
#Linky
#<!-- complex HTML -->
End Helper
Suppose 90% of my pages use the default SpecialFunction() as defined in the layout, but occasionally some views want a different SpecialFunction().
One way to resolve this is to use ViewBag and send each view content that way, but SpecialFunction() contains complex HTML and I want to use razor views.
How do I achieve this?
The best way to do this is to use a Section and when you render it make it NOT required.
See ScottGu's blog for some details: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx
You can specify the layout in the actual View, as such,
#{
Layout = "/address/to/your/different/layout.cshtml"
}
Look at this question for further info.
You can add a condition to your viewbag and based on the value the layout would execute specialFfunction or someOtherFunction Scott Guthrie gives a great example of this technique in his blog
OP here.
It's been a while since I used ASP.NET MVC & Razor. I forgot about Sections. I feel silly ^^
Solution:
_Layout
<html>
<!-- some html -->
#ViewBag.SomeViewBagFun
<!-- more html -->
#RenderBody
<!-- more html -->
#If IsSectionDefined("SpecialFunction") Then
#RenderSection("SpecialFunction", False)
Else
#SpecialFunction()
End If
</html>
Helper SpecialFunction()
#Linky
#<!-- complex HTML -->
End Helper
Another View
Section SpecialFunction
<p>Very different HTML!</p>
End Section