<h1 class="title">Web Widget One2Many Product Picker</h1> <p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/13.0/web_widget_one2many_product_picker"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-13-0/web-13-0-web_widget_one2many_product_picker"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/13.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p> <p>Adds the 'one2many_product_picker' friendly mobile widget to create one2many lines linked with product.product records.</p> <p><strong>Table of contents</strong></p> <div class="contents local topic" id="contents"> <ul class="simple"> <li><a class="reference internal" href="#installation" id="id1">Installation</a></li> <li><a class="reference internal" href="#configuration" id="id2">Configuration</a><ul> <li><a class="reference internal" href="#widget-options" id="id3">Widget options:</a></li> <li><a class="reference internal" href="#default-context" id="id4">Default context:</a></li> <li><a class="reference internal" href="#examples" id="id5">Examples:</a></li> <li><a class="reference internal" href="#boostrap-modifications" id="id6">Boostrap Modifications:</a></li> </ul> </li> <li><a class="reference internal" href="#usage" id="id7">Usage</a><ul> <li><a class="reference internal" href="#parts-of-the-widget" id="id8">Parts of the widget:</a></li> <li><a class="reference internal" href="#preview" id="id9">Preview:</a></li> </ul> </li> <li><a class="reference internal" href="#known-issues-roadmap" id="id10">Known issues / Roadmap</a></li> <li><a class="reference internal" href="#bug-tracker" id="id11">Bug Tracker</a></li> <li><a class="reference internal" href="#credits" id="id12">Credits</a><ul> <li><a class="reference internal" href="#authors" id="id13">Authors</a></li> <li><a class="reference internal" href="#contributors" id="id14">Contributors</a></li> <li><a class="reference internal" href="#maintainers" id="id15">Maintainers</a></li> </ul> </li> </ul> </div> <a name="installation"></a> <h2><a class="toc-backref" href="#id1">Installation</a></h2> <p>It's advisable to install 'web_widget_numeric_step' to have a better usability on touch screens.</p> <a name="configuration"></a> <h2><a class="toc-backref" href="#id2">Configuration</a></h2> <p>Create or edit a new view and use the new widget called 'one2many_product_picker'. You need to define the view fields. The view must be of <code>form</code> type.</p> <a name="widget-options"></a> <h3><a class="toc-backref" href="#id3">Widget options:</a></h3> <ul> <li><p class="first">groups &gt; Array of dictionaries -&gt; Declare the groups</p> <blockquote> <ul> <li><p class="first">name -&gt; The group name</p> </li> <li><p class="first">string -&gt; The text displayed</p> </li> <li><p class="first">domain -&gt; Forced domain to use</p> </li> <li><p class="first">order -&gt; The order</p> <blockquote> <ul class="simple"> <li>name -&gt; The field name to order</li> <li>asc -&gt; Flag to use 'asc' order</li> </ul> </blockquote> </li> <li><p class="first">records_per_page &gt; Integer -&gt; Used to control the load more behaviour (16 by default)</p> </li> <li><p class="first">active -&gt; Boolean -&gt; Select the default group to use ('false' by default = 'All' group)</p> </li> </ul> </blockquote> </li> <li><p class="first">currency_field &gt; Model field used to format monetary values ('currency_id' by default)</p> </li> <li><p class="first">field_map &gt; Dictionary:</p> <blockquote> <ul class="simple"> <li>product -&gt; The field that represent the product (<cite>product_id</cite> by default)</li> <li>name -&gt; The field that represent a name ('name' by default)</li> <li>product_uom -&gt; The field that represent a product_uom ('product_uom' by default)</li> <li>product_uom_qty -&gt; The field that represent a product_uom_qty ('product_uom_qty' by default)</li> <li>price_unit -&gt; The field that represent a price_unit ('price_unit' by default)</li> <li>discount -&gt; The field that represent a discount ('discount' by default)</li> </ul> </blockquote> </li> <li><p class="first">search &gt; Array of dictionaries (defines to use name_search by default)</p> <blockquote> <ul> <li><p class="first">name -&gt; The name to display</p> </li> <li><p class="first">domain -&gt; The domain to use</p> <blockquote> <ul class="simple"> <li>$search -&gt; Replaces it with the current value of the searchbox</li> <li>$number_search -&gt; Replaces all the leaf with the current value of the searchbox as a number</li> </ul> </blockquote> </li> <li><p class="first">name_search_value -&gt; Enables the use of 'name_search' instead of 'search_read' and defines the value to search ('$search' by default)</p> </li> <li><p class="first">operator -&gt; Operator used in 'name_search' ('ilike' by default)</p> </li> </ul> </blockquote> </li> <li><p class="first">edit_discount &gt; Enable/Disable discount edits (False by default)</p> </li> <li><p class="first">edit_price &gt; Enable/Disable price edits (True by default)</p> </li> <li><p class="first">show_discount &gt; Enable/Disable display discount (False by default)</p> </li> <li><p class="first">show_subtotal &gt; Enable/Disable show subtotal (True by default)</p> </li> <li><p class="first">auto_save &gt; Enable/Disable auto save (False by default)</p> </li> <li><p class="first">all_domain &gt; The domain used in 'All' section ([] by default)</p> <p>If using auto save feature, you should keep in mind that the &quot;Save&quot; and &quot;Discard&quot; buttons will lose part of its functionality as the document will be saved every time you modify/create a record with the widget.</p> </li> <li><p class="first">ignore_warning &gt; Enable/Disable display onchange warnings (False by default)</p> </li> <li><p class="first">instant_search &gt; Enable/Disable instant search mode (False by default)</p> </li> <li><p class="first">trigger_refresh_fields &gt; Fields in the main record that dispatch a widget refresh ([&quot;partner_id&quot;, &quot;currency_id&quot;] by default)</p> </li> </ul> <p>All widget options are optional. Notice that you can call '_' method to use translations. This only can be used with this widget.</p> <p>Example:</p> <pre class="code"> <code class="code">options=&quot;{'search': [{'name': _('Starts With'), 'domain': [('name', '=like', '$search%')]}], 'groups': [{'name': 'cheap', 'string': _('Cheap'), 'domain': [('list_price', '&lt;', 10.0)], 'field_map': { 'product': 'my_product_id' }}]}&quot;</code> </pre> <a name="default-context"></a> <h3><a class="toc-backref" href="#id4">Default context:</a></h3> <p>The widget sends a defaults context with the 'search_read' request:</p> <blockquote> <ul> <li><p class="first">active_search_group_name &gt; Contains the name of the active search group</p> <blockquote> <ul class="simple"> <li>'all' &gt; Is the hard-coded name for the 'All' group</li> <li>'main_lines' &gt; Is the hard-coded name for the 'Lines' group</li> </ul> </blockquote> </li> <li><p class="first">active_search_involved_fields &gt; Contains an array of dictionaries with the fields used with the searchbox content</p> <blockquote> <ul class="simple"> <li>'type' &gt; Can be 'text' or 'number'</li> <li>'field' &gt; The field name</li> <li>'oper' &gt; The operator used</li> </ul> </blockquote> </li> </ul> </blockquote> <a name="examples"></a> <h3><a class="toc-backref" href="#id5">Examples:</a></h3> <p>This is an example that uses the 'sale.order.line' fields:</p> <pre> <code lang="xml">&lt;field name=&quot;order_line&quot; attrs=&quot;{'readonly': [('state', 'in', ('done','cancel'))]}&quot; nolabel=&quot;1&quot; mode=&quot;form&quot; widget=&quot;one2many_product_picker&quot; options=&quot;{'search': [{'name': 'Test', 'domain': [['name', 'ilike', '$search']]}] ,'edit_discount': True, 'show_discount': True, 'groups': [{'name': 'desk', 'string': _('Desks'), 'domain': [('name', 'ilike', '%desk%')], 'order': [{'name': 'id', 'asc': true}]}, {'name': 'chair', 'string': _('Chairs'), 'domain': [('name', 'ilike', '%chair%')]}]}&quot; &gt; &lt;form&gt; &lt;field name=&quot;state&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;display_type&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;currency_id&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;discount&quot; widget=&quot;numeric_step&quot; options=&quot;{'max': 100}&quot; invisible=&quot;1&quot;/&gt; &lt;field name=&quot;price_unit&quot; widget=&quot;numeric_step&quot; invisible=&quot;1&quot;/&gt; &lt;field name=&quot;name&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;product_id&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;order_id&quot; invisible=&quot;1&quot;/&gt; &lt;field name=&quot;product_uom_qty&quot; class=&quot;mb-1&quot; widget=&quot;numeric_step&quot; context=&quot;{ 'partner_id': parent.partner_id, 'quantity': product_uom_qty, 'pricelist': parent.pricelist_id, 'uom': product_uom, 'company_id': parent.company_id }&quot; /&gt; &lt;field name=&quot;product_uom&quot; force_save=&quot;1&quot; attrs=&quot;{ 'readonly': [('state', 'in', ('sale','done', 'cancel'))], 'required': [('display_type', '=', False)], }&quot; context=&quot;{'company_id': parent.company_id}&quot; class=&quot;mb-2&quot; options=&quot;{'no_open': True, 'no_create': True, 'no_edit': True}&quot; /&gt; &lt;/form&gt; &lt;/field&gt;</code> </pre> <p>** In this example we don't use 'field_map' option because the default match with the sale.order.line field names.</p> <p>Other example for 'purchase.order.line' fields:</p> <pre> <code lang="xml">&lt;field name=&quot;order_line&quot; attrs=&quot;{'readonly': [('state', 'in', ('done','cancel'))]}&quot; nolabel=&quot;1&quot; widget=&quot;one2many_product_picker&quot; mode=&quot;form&quot; options=&quot;{'search': [{'name': _('Name'), 'domain': [['name', 'ilike', '$search']]}, {'name': _('Price'), 'domain': [['list_price', '=', $number_search]]}], 'field_map': {'product_uom_qty': 'product_qty'}, 'groups': [{'name': _('Desk'), 'domain': [['name', 'ilike', 'desk']], 'order': {'name': 'id', 'asc': true}}, {'name': _('Chairs'), 'domain': [['name', 'ilike', 'chair']]}]}&quot; &gt; &lt;form&gt; &lt;field name=&quot;name&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;product_id&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;price_unit&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;currency_id&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;order_id&quot; invisible=&quot;1&quot; /&gt; &lt;field name=&quot;date_planned&quot; class=&quot;mb-1&quot; /&gt; &lt;field name=&quot;product_qty&quot; class=&quot;mb-1&quot; widget=&quot;numeric_step&quot; required=&quot;1&quot; /&gt; &lt;field name=&quot;product_uom&quot; class=&quot;mb-2&quot; options=&quot;{'no_open': True, 'no_create': True, 'no_edit': True}&quot; /&gt; &lt;/form&gt; &lt;/field&gt;</code> </pre> <a name="boostrap-modifications"></a> <h3><a class="toc-backref" href="#id6">Boostrap Modifications:</a></h3> <p>The product picker view container have a custom media queries space adding a new screen size called 'xxl' (&gt;= 1440px) and modifies the columns to have 24 instead of 12. This means that you can use &quot;col-xxl-&quot; inside the product picker view container.</p> <a name="usage"></a> <h2><a class="toc-backref" href="#id7">Usage</a></h2> <p>When you change the value of a field and switch to edit another record, the changes will be applied to the previous record without having to click on accept changes.</p> <a name="parts-of-the-widget"></a> <h3><a class="toc-backref" href="#id8">Parts of the widget:</a></h3> <blockquote> <img alt="https://raw.githubusercontent.com/OCA/web/13.0/web_widget_one2many_product_picker/static/img/product_picker_anat.png" src="https://raw.githubusercontent.com/OCA/web/13.0/web_widget_one2many_product_picker/static/img/product_picker_anat.png" /> </blockquote> <a name="preview"></a> <h3><a class="toc-backref" href="#id9">Preview:</a></h3> <blockquote> <img alt="https://raw.githubusercontent.com/OCA/web/13.0/web_widget_one2many_product_picker/static/img/product_picker.gif" src="https://raw.githubusercontent.com/OCA/web/13.0/web_widget_one2many_product_picker/static/img/product_picker.gif" /> </blockquote> <a name="known-issues-roadmap"></a> <h2><a class="toc-backref" href="#id10">Known issues / Roadmap</a></h2> <ul class="simple"> <li>Translations in the xml 'options' attribute of the field that use the widget can't be exported automatically to be translated</li> <li>The product card animations can be improved. Currently the card is recreated, so we lost some elements to apply correct effects.</li> </ul> <a name="bug-tracker"></a> <h2><a class="toc-backref" href="#id11">Bug Tracker</a></h2> <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smashing it by providing a detailed and welcomed <a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_one2many_product_picker%0Aversion:%2013.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p> <p>Do not contact contributors directly about support or help with technical issues.</p> <a name="credits"></a> <h2><a class="toc-backref" href="#id12">Credits</a></h2> <a name="authors"></a> <h3><a class="toc-backref" href="#id13">Authors</a></h3> <ul class="simple"> <li>Tecnativa</li> </ul> <a name="contributors"></a> <h3><a class="toc-backref" href="#id14">Contributors</a></h3> <ul> <li><p class="first"><a class="reference external" href="https://www.tecnativa.com">Tecnativa</a>:</p> <blockquote> <ul class="simple"> <li>Alexandre D. Díaz</li> <li>Pedro M. Baeza</li> <li>David Vidal</li> </ul> </blockquote> </li> </ul> <a name="maintainers"></a> <h3><a class="toc-backref" href="#id15">Maintainers</a></h3> <p>This module is maintained by the OCA.</p> <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a> <p>OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.</p> <p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/13.0/web_widget_one2many_product_picker">OCA/web</a> project on GitHub.</p> <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>