Code like below:

var HistoryButton = pos_screens.ActionButtonWidget.extend({
        template: 'HistoryButton',
        button_click: function () {
            if (this.pos.get_client()) {
                this.gui.show_screen('OrdersWidget');
            }
            
    },
});

pos_screens.define_action_button({
    'name': 'History',
    'widget': HistoryButton,
    'condition': function(){
        return this.pos;
    },
});



var OrdersWidget = pos_screens.ScreenWidget.extend({
    template: 'OrdersWidget',

    init: function(parent, options){
        
    },
   

    show: function(){
        var self = this;
        this._super();

        this.renderElement();
        this.details_visible = false;

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

    },
    hide: function () {
        this._super();
        this.new_client = null;
    },
    

    close: function(){
        this._super();
    },
});
gui.define_screen({name:'OrdersWidget', widget: OrdersWidget});



//----- xml file---------//

<t t-name="OrdersWidget">
        <div class="clientlist-screen screen">
            <div class="screen-content">
                
		//------screen view----------//

            </div>
        </div>
    </t>

<t t-name="HistoryButton">

    <div class='control-button orders-list'>
        <i class="fa fa-history" aria-hidden="true"></i>
        History
    </div>
</t>