How to create a custom odoo walker for the website navbar
Similar to what Wordpress allows to create a html template which them odoo uses to add the menus so I can design the navigation
<nav>
<div class="logo"></div>
<ul>
<!-- odoo menu items--->
<!-- formatting--->
<!-- <li class="nav-item"> $name </li>--->
</ul>
<div>
<ul>
<li>$name</li>
<li> $name</li>
</ul>
</div>
</nav>
Is there a similar function in odoo
if not how to get all the active menus in odoo in JS
example of a Wordpress walker
this is a work around, you can find the code in addons/portal/views/portal_templates.xml.
<div class="collapse navbar-collapse" id="top_menu_collapse">
<!-- FIXME We want menu to open to the right by default (except cases handled in JS) -->
<ul class="nav navbar-nav ml-auto text-right" id="top_menu">
<li class="nav-item divider" t-ignore="true" t-if="not user_id._is_public()"/>
<li class="nav-item dropdown" t-ignore="true" t-if="not user_id._is_public()">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<b>
<span t-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) > 25 else user_id.name"/>
</b>
</a>
<div class="dropdown-menu js_usermenu" role="menu">
<a id="o_logout" class="dropdown-item" t-attf-href="/web/session/logout?redirect=/" role="menuitem">Logout</a>
</div>
</li>
</ul>
</div>
the method _is_public() return True if the "user" is not logged else false
If an info page has multiple tabs based on different topics and there are links leading to the info page from different pages, how do you link to the info page with an active tab depending on the link used?
I want to have a link like this:
<p>View the terms & conditions on our info page <%= link_to "here", info_path %>, thanks.</p>
Lead to my info page with the Terms tab active like this:
<li role="presentation">
<a href="#terms" class="active" aria-controls="terms" role="tab" data-toggle="tab">
<h2>Terms</h2>
<p>These are the terms.</p>
</a>
</li>
I was wondering how to change the "active" status based on the link from a different page on my site. Does the active status need to be changed on the specific tabpanel instead? Thank you!
This is the tab section from the info page:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#about" aria-controls="about" role="tab" data-toggle="tab">
About
</a>
</li>
<li role="presentation">
<a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
Advertise
</a>
</li>
<li role="presentation">
<a href="#legal" aria-controls="legal" role="tab" data-toggle="tab">
Legal
</a>
</li>
<li role="presentation">
<a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">
Privacy
</a>
</li>
<li role="presentation">
<a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">
Terms
</a>
</li>
</ul>
<!-- TAB PANES -->
<div class="tab-content" id="infoTabContent">
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade in" id="about">
<h3>About</h3>
<div class="indent">
<p>This is the about tab using a div to indent lines</p>
</div>
</div>
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade" id="advertise">
<h3>Advertise</h3>
</div>
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade" id="legal">
<h3>Legal</h3>
</div>
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade" id="privacy">
<h3>Privacy</h3>
</div>
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade" id="terms">
<h3>Terms</h3>
</div>
<!-- TAB DIVIDER -->
</div><!-- Tab Content -->
You can pass params on link_to method. Something like:
link_to "here", info_path(active_tab: "your_active_tab_name")
So, in your info page view, you can try to retrive it from params[:active_tab], so you can set your active attribute based on that value.
Hope this helps, good luck
EDIT:
If you're using bootstrap tabs (https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp), you can set some tab as active by adding the active class to the "li" element, like this:
<li role="presentation active">
<a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
Advertise
</a>
</li>
So, wherever you put a link to that info page, you should pass a param that indicates which tab will be active, something like this:
link_to "more info", info_path(active_tab: "advertise")
Then, on your info page, you check the params[:active_tab] to determine which tab will be active. Something like:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation #{params[:active_tab]=='about' ? 'active' : '' }">
<a href="#about" aria-controls="about" role="tab" data-toggle="tab">
About
</a>
</li>
<li role="presentation #{params[:active_tab]=='advertise ? 'active' : '' }">
<a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
Advertise
</a>
</li>
... and so it goes on
</ul>
Hope this makes it clear! Also, has to test it, but think this works
I've tried with a bit of Javascript.
Add an identifier to your li element inside the ul.nav.nav-tabs, this way it could be easily reached with the params sent, like:
<li role="presentation" id="terms-li">
...
</li>
Then, the same for your div tag with role="tabpanel", like:
<div role="tabpanel" class="tab-pane fade" id="terms-tab">
...
</div>
Then in the previouse view, you can add a link_to helper, passing the tab you want to make active, like:
<p>
View the terms & conditions on our info page
<%= link_to 'here', root_path(tab: 'terms') %>, thanks.
</p>
Then in the view where are the tabs, add an script which take the params[:tab] and check if they're sent or not, if so then get your li and div elements, remove the class active from the first li and add active to the new elements:
<script>
if ('<%= params[:tab] %>' !== '') {
let params = '<%= params[:tab] %>',
li = document.getElementById(params + '-li'),
tab = document.getElementById(params + '-tab'),
ul = document.querySelectorAll('ul.nav.nav-tabs > li')[0].classList,
div = document.querySelectorAll('div.tab-content > div')[0].classList
ul.remove('active')
div.remove('in', 'active')
li.classList.add('active')
tab.classList.add('in', 'active')
}
</script>
Make sure the id terms-tab and all the identifiers for each div with role tabpanel are equal to the href attributes in their anchor tags.
You can see here a working demo.
Posting my solution here in case someone needs it.
I wanted to have a default option in case there was no parameter. I am using Bootstrap's Navs.
# Passing a params on 'link_to' method
# View with links
<%= link_to "Tab Index", tabs_path %>
<%= link_to "Tab 1", tabs_path(tab: 'tab_1') %>
<%= link_to "Tab 2", tabs_path(tab: 'tab_2') %>
<%= link_to "Tab 3", tabs_path(tab: 'tab_3') %>
# Adding 'active' class to navs based on params
# View with tabs
<%# Tabs %>
<ul class="nav nav-pills">
<li class="nav-item">
Tab Index
</li>
<li class="nav-item">
Tab 1
</li>
<li class="nav-item">
Tab 2
</li>
<li class="nav-item">
Tab 3
</li>
</ul>
<%# Tab content %>
<div class="tab-content">
<div class="tab-pane <%= "active" unless params.has_key?(:tab) %>" id="tab_index">Tab Index Content</div>
<div class="tab-pane <%= "active" if params[:tab] == "tab_1" %>" id="tab_1">Tab 1 Content</div>
<div class="tab-pane <%= "active" if params[:tab] == "tab_2" %>" id="tab_2">Tab 2 Content</div>
<div class="tab-pane <%= "active" if params[:tab] == "tab_3" %>" id="tab_3">Tab 3 Content</div>
</div>
I have received a task to add functionality to a HTML page (JSP). The page is just from designers/frontend devs so in some places I need to change a href to button or input but it makes a mess and all the design is changed. Here is a piece of code:
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
<nav>
<ul class="nav nav-pills nav-inline" id="addchild">
<li>
<a href="#" id="add">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
<li>
Add Child / Student
</li>
</ul>
<ul class="nav nav-pills" id="parentinfo">
<li>
<a href="#" class="listItem" id="edit">
<span class="editicon">Edit</span>
</a>
</li>
<li>
<a href="#" class="listItem" id="edittext">
<span class="parentInfo">Parent Info</span>
</a>
</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li>
Upgrade Package
</li>
<li>
Wow Catalog
</li>
</ul>
</nav>
I want it to be like the below, without changing appearance:
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
<nav>
<ul class="nav nav-pills nav-inline" id="addchild">
<li>
<a href="/register/studentSignup" type="submit" id="add">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
<li>
Add Child / Student
</li>
</ul>
<ul class="nav nav-pills" id="parentinfo">
<li>
<input type="submit" class="listItem" name="action" value="editParentInfo" id="edit" />
<span class="editicon">Edit</span>
</li>
<li>
<input type="submit" class="listItem" name="action" value="editParentInfo" id="editParent" />
<span class="parentInfo">Parent Info</span>
</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li>
Upgrade Package
</li>
<li>
Wow Catalog
</li>
</ul>
<input type="hidden" name="parentID" path="parentID" value="${parentInfo.parentID}">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
</nav>
You should not change the design given to you. Adding/changing visible elements in HTML changes the layout.
Also doing that modifications you not only bring a mess to the design but add errors to the HTML code.
The anchor tag doesn't have type="submit" attribute. This attribute is available in buttons and input elements.
Modifying href attribute on links makes URL visible on hover. It's not intended behavior imposed by the designer. Probably he/she should give you directions how to proceed with the code to not change the design. In this case onclick and onsubmit events could be handled with javascript functions to submit a form.
Here the example show you could submit a form with validations.
Note: The code only works with Edit button.
JSFiddle
HTML:
<form id="editForm" onsubmit="return doValidate();">
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
<nav>
<ul class="nav nav-pills nav-inline" id="addchild">
<li>
<a href="#" id="add">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
<li>
Add Child / Student
</li>
</ul>
<ul class="nav nav-pills" id="parentinfo">
<li>
<a href="#" class="listItem" id="edit" onclick="doSubmit()">
<span class="editicon">Edit</span>
</a>
<input type="hidden" name="param" value="editParentInfo"/>
</li>
<li>
<a href="#" class="listItem" id="edittext">
<span class="parentInfo">Parent Info</span>
</a>
</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li>
Upgrade Package
</li>
<li>
Wow Catalog
</li>
</ul>
</nav>
</div>
</form>
JavaScript:
function doSubmit() {
alert("The form is submitting");
var form = document.getElementById("editForm");
form.action="/register/studentSignup";
form.method="post";
submitForm(form);
}
function doValidate() {
var form = document.getElementById("editForm");
alert("The form is being submitted\n"+"action="+form.action+", param="+form.param.value);
return false;
}
function submitForm(form) {
//get the form element's document to create the input control with
//(this way will work across windows in IE8)
var button = form.ownerDocument.createElement('input');
//make sure it can't be seen/disrupts layout (even momentarily)
button.style.display = 'none';
//make it such that it will invoke submit if clicked
button.type = 'submit';
//append it and click it
form.appendChild(button).click();
//if it was prevented, make sure we don't get a build up of buttons
form.removeChild(button);
}
References:
Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?
What are the allowed tags inside a <li>?
I am currently trying to make a dynamic vertical tab table in AngularJS. In other words, I would like for the user to add in their own tabs on the press of a button. I am aware of how to do this if the tabs are horizontal over the table but if the tabs are vertically on the right of the table, I have to put them in different divs. Im having a hard time relating the data from the tabs to the table content.
<div class="col-sm-9">
<div class="tab-content">
<div ng-show="view_tab == 'tab1'">
Campaign Name:
<input ng-model="tab1name">
<br>Campaign Info:
<br>This is tab 1 content
</div>
<div ng-show="view_tab == 'tab2'">
Campaign Name:
<input ng-model="tab2name">
<br>Campaign Info:
<br>This is tab 2 content
</div>
</div>
</div>
<div class="col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist" ng-init="view_tab = 'tab1'">
<li ng-class="{'active': view_tab == 'tab1'}">
<a class="btn-lg" ng-click="changeTab('tab1')" href=""> Campaign: {{tab1name}}</a>
</li>
<li ng-class="{'active': view_tab == 'tab2'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href=""> Campaign: {{tab2name}}</a>
</li>
<li ng-class="{'active': view_tab == 'tab3'}">
<a class="btn-lg" ng-click="changeTab('tab2')" href="">Add a Tab</a>
</li>
</ul>
</div>
I'm aware that I need to use a ng-repeat and some kind of template to push onto an object holding all the table data. But I'm unclear of how to actually implement this. I have included a JSFiddle of the vertical tab table I am currently working with. Any help would be greatly appreciated.
http://jsfiddle.net/eRGT8/1032/
Yes you need to create a array of all tabs and use ng-repeat
this is the tamplate
<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist" ng-init="view_tab = 'tab1'">
<li ng-class="{'active': view_tab == $index}" ng-repeat="tab in tabs">
<a class="btn-lg" ng-click="changeTab($index)" href=""> Campaign: {{tab.name}}</a>
</li>
And this is the array:
$scope.tabs = [{
name: ''
}, {
name: ''
}]
here is the full code in jsfiddle
http://jsfiddle.net/jekvu1br/
I'm trying to navigate through tabs in bootstrap 2.3.2 using dropdown menu links and buttons.
I'm able to navigate to different tabs using links in the dropdown menu, however when I navigate back to the tab with the dropdown menu, the links in the dropdown seem to have been disabled.
Demo
<div class="modal-body chart-edit-body">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab-settings" data-toggle="tab">
Settings
</a>
</li>
<li>
Customize
</li>
</ul>
<div class="tab-content" id="edit-chart-filter">
<div class="tab-pane active" id="tab-settings">Settings Tab</div>
<div class="tab-pane" id="tab-custom">Customize Tab
<div id="filters-list-custom" class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Go to Hidden tabs
<span class="caret"></span>
</a>
<ul class="dropdown-menu align-left-ul">
<li>
Hidden Tab 1
Hidden Tab 2
Hidden Tab 3
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab-hidden1">
Hidden Tab 1
<a href="#tab-custom" role="button" class="btn">
Back to dropdown menu
</a>
</div>
<div class="tab-pane" id="tab-hidden2">
Hidden Tab 2
<a href="#tab-custom" role="button" class="btn">
Back to dropdown menu
</a>
</div>
<div class="tab-pane" id="tab-hidden3">
Hidden Tab 3
<a href="#tab-custom" role="button" class="btn">
Back to dropdown menu
</a>
</div>
</div>
</div>
Any ideas as to why this is happening?
You put all your links in one <li> tag. They must be seperate tags
<li> Hidden Tab 1 </li>
<li> Hidden Tab 2 </li>
<li> Hidden Tab 3 </li>
Also remove the active class once clicked. If you not remove, after returning to dropdow the link you clicked will be active.
$(function () {
$('#edit-chart-filter a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
$(this).parent().removeClass('active');
})
});