Custom Screens

List of partners, payment’s screen, and floor screen are examples of screens.

We will consider an example of creating the User interface.

In order to create a new custom screen we plug screens and gui:

var screens = require('point_of_sale.screens');
var gui = require('point_of_sale.gui');

Then we declare a new variable and inherit ScreenWidget:

var CustomScreenWidget = screens.ScreenWidget.extend({
});

Now CustomScreenWidget consist of all methods from ScreenWidget. Then we need to define a template, where the structure of the screen is described using Qweb:

template: 'CustomScreenWidget'

In Qweb we define a template as follows:

<t t-name="CustomScreenWidget">
  <div class="custom-screen screen">
    <div class="screen-content">
       <section class="top-content">
         <span class="button back">
           <i class="fa fa-angle-double-left" />
             Cancel
         </span>
         <span class="button next oe_hidden highlight">
             Apply
           <i class="fa fa-angle-double-right" />
         </span>
       </section>
       <section class="full-content">
         <div class="window">
           <section class="subwindow collapsed">
             <div class="subwindow-container collapsed">
               <div class="subwindow-container-fix custom-details-contents" />
             </div>
           </section>
         </div>
       </section>
  </div>
</t>

Define styles in css file, which you need for the screen.

This Qweb will be rendered every time when the method renderElement runs (prior to the downloading POS all screens are drawn and hidden already). This method can be redefine and, for example, used for actions of back and next buttons:

renderElement: function () {
  this._super();

    this.$('.back').click(function () {
  self.gui.back();
    });

    this.$('.next').click(function () {
  // some actions
  });
},

All screens are hidden by default (except those, which are called after POS downloading). In order to open Custom Screens you need to define it inside screens’ list:

gui.define_screen({name:'custom_screen', widget: CustomScreenWidget});

In order to open Custom Screen you need to call the next function (for example after click to the Action button):

this.gui.show_screen('custom_screen');

where this is a pointer to PosModel.

For a concrete example check the POS Orders History module , where orders_history_screen is defined.