Odoo Help

Welcome!

This community is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

0

What is the correct way to create a search field inside a form and filter out data in a dropdown?

By
Yenthe
on 3/1/16, 7:33 AM 740 views

Hi guys,

I've been building some pages in the Odoo website but I've ran into an issue where I'm not sure what the best way is to handle it. I've created a new form, which is partially filled up with data from the controller, and in the middle of this form I need a search field with search button to filter a dropdown. The controller:

class project_issue(http.Controller): # Sends user to the creation page for a new ticket @http.route('/support/ticket/submit', type="http", auth="public", website=True) def support_submit_ticket(self, **kw): """Let's public and registered user submit a support ticket""" values = {} for field_name, field_value in kw.items(): values[field_name] = field_value partner_id = None if http.request.env.user.id: partner_id = http.request.env.user.partner_id.id return http.request.render('my_module.support_submit_ticket', {'equipments': http.request.env['product.product'].sudo().search([('equipment_customer_id', '=', partner_id)]), 'name': http.request.env.user.name, 'email': http.request.env.user.email, 'phone': http.request.env.user.phone})

The XML view for the page:

<template id="support_submit_ticket" name="Create new ticket" page="True"> <t t-call="website.layout"> <div id="wrap" class="oe_structure oe_empty"> <section> <div class="container"> <div class="row">

<div class="col-md-12"> <h1 class="text-center">Create new ticket</h1> </div> </div> </div> </section> <div class="form-horizontal mt32"> <form action="/support/ticket/process" method="get" class="form-horizontal mt32" enctype="multipart/form-data"> <!-- subject --> <div name="subject" t-attf-class="form-group #{error and 'subject' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="subject">Subject</label> <div class="col-md-7 col-sm-8"> <input type="text" class="form-control" name="subject" required="True"/> </div> </div> <div t-attf-class="form-group #{error and 'person_name' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="person_name">Name</label> <div class="col-md-7 col-sm-8"> <input type="text" class="form-control" name="person_name" required="True" t-attf-value="#{name or ''}" t-attf-readonly="#{name and 'readonly'}"/>

</div> </div> <div name="email_from_container" t-attf-class="form-group #{error and 'email' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="email">Email</label> <div class="col-md-7 col-sm-8"> <input type="email" class="form-control" name="email" required="True" t-attf-value="#{email or ''}" t-attf-readonly="#{email and 'readonly'}"/> </div> </div>

<!-- Phone number --> <div name="phone_container" t-attf-class="form-group #{error and 'phone' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="phone">Phone</label> <div class="col-md-7 col-sm-8"> <input type="phone" class="form-control" name="phone" required="True" t-attf-value="#{phone or ''}"/> </div> </div> <!-- Ticketing number --> <div name="customer_ticket_number" t-attf-class="form-group #{error and 'customer_ticket_number' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="customer_ticket_number">Customer ticket number</label> <div class="col-md-7 col-sm-8"> <input type="text" class="form-control" name="customer_ticket_number" required="True"/> </div> </div>

<!-- Search option for filtering on equipments. --> <div class="form-group"> <form action="" method="get" class="navbar-search pull-right pagination form-inline"> <label class="col-md-3 col-sm-4 control-label" for="search">Filter equipment</label> <div class="col-md-7 col-sm-8" style="width:50% !important;"> <input type="text" name="search" class="search-query form-control oe_search_box" placeholder="Search..." t-att-value="search"/> <span class="fa fa-remove fa-lg oe_search_clear"></span>

</div> <span class="input-group-btn"> <button type="submit" class="btn btn-default oe_search_button"><i class="fa fa-search"/></button> </span> </form> </div> <!-- Equipment --> <div t-attf-class="form-group #{error and 'equipments' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="equipments">Equipment</label> <div class="col-md-7 col-sm-8"> <select class="form-control" name="equipment"> <t t-foreach="equipments" t-as="equipment"> <option t-attf-value="#{equipment.id}"> <t t-esc="equipment.name"/> <t t-if="equipment.serial_number">- Serial number: <t t-esc="equipment.serial_number"/> </t> </option> </t> </select> </div> </div>

<!-- Urgency --> <div name="priority" t-attf-class="form-group #{error and 'priority' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="priority">Priority</label> <div class="col-md-7 col-sm-8"> <select class="form-control" name="priority"> <option t-att-value="1">1</option> <option t-att-value="2">2</option> <option t-att-value="3">3</option> <option t-att-value="4">4</option> <option t-att-value="5">5</option> </select> </div> </div> <div t-attf-class="form-group #{error and 'description' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="description">Description</label> <div class="col-md-7 col-sm-8"> <textarea class="form-control" name="description" style="min-height: 120px" required="True"></textarea> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-sm-offset-4 col-sm-8 col-md-7"> <button class="btn btn-primary btn-lg">Submit Ticket</button> </div> </div> </form> </div> </div> </t> </template>

The problem is that the search field and the search button need to be in a form but all the other content needs to be in another form. When I don't enwrap all fields in a form to be sent when clicking in the button 'Submit Ticket' I cannot access the data in my controller but I can't nest forms either. So, what is the correct / best way to create a search functionality inside a form that filters out the dropdown?

This dropdown:

<!-- Equipment -->

<div t-attf-class="form-group #{error and 'equipments' in error and 'has-error' or ''}"> <label class="col-md-3 col-sm-4 control-label" for="equipments">Equipment</label> <div class="col-md-7 col-sm-8"> <select class="form-control" name="equipment"> <t t-foreach="equipments" t-as="equipment"> <option t-attf-value="#{equipment.id}"> <t t-esc="equipment.name"/> <t t-if="equipment.serial_number">- Serial number: <t t-esc="equipment.serial_number"/> </t> </option> </t> </select> </div> </div>

I should be able to filter the field equipment when the user fills in something in the searchbar and clicks on search. By doing so the dropdown will be filtered out so that only matches still show op.

So, how should I accomplish this?

Thanks,

Yenthe  

1

Jérémy Kersten (jke)

--Jérémy Kersten (jke)--
2993
| 3 2 5
Jodoigne, Belgium
--Jérémy Kersten (jke)--

Jérémy is a member of the core R&D team since september 2013. He developed several projects for OpenERP version 8 including the eCommerce, the Google Calendar synchronization and the new product variants/configurator. Now, he manages Odoo website and themes for saas.

Jérémy Kersten (jke)
On 3/1/16, 12:16 PM

Best way according to me, you should do your search in ajax.

That will avoid re-rendering the form at each search, lost data and co...


Perso, I will use select2 to do it. 

You can take inspiration / a look in forum (tag field) code.

Thanks for your reply Jérémy! Good point about the Ajax and the reloading of forms etc. It is indeed better to not reload a page if it isn't needed. I've been giving your idea an attempt but I'm a bit stuck. I see that on the help forum everything is embedded in a form but I already have an open form so how should I handle that? The second thing is that my JS doesn't go off. Could you give me some pointers please? I've posted the needed files on Github for you to view: https://github.com/Yenthe666/Dev/tree/master/aa_cameo_ticketing

Yenthe
on 3/2/16, 3:41 AM

Also, I will convert all this knowledge in a new blogpost for the community. :-)

Yenthe
on 3/2/16, 3:41 AM

Hey yenth, what is the state of this dev ? still need help or it's finish ?

Jérémy Kersten (jke)
on 3/2/16, 1:02 PM

See https://github.com/Yenthe666/Dev/pull/11

Jérémy Kersten (jke)
on 3/2/16, 4:06 PM

This is a great answer, thanks a lot Jérémy! Upvoted & accepted.

Yenthe
on 3/4/16, 8:18 AM

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

2 follower(s)

Stats

Asked: 3/1/16, 7:33 AM
Seen: 740 times
Last updated: 3/4/16, 8:17 AM