InforCRM - Custom search form

AddReturnProduct.ascx.cs

// In AA: I created a "Panel" placeholder and set the column span to 2
// I can't use the placeholder directly because it is itself a dijit

// form load method:
String appPath = Request.ApplicationPath;
ScriptManager.RegisterStartupScript(this, GetType(), "AddReturnProduct",
    @"require({ packages: [{ name: 'Martin', location: '" + appPath +
    @"/MartinEng/js'}] }, ['Martin/Return/AddReturnProduct'], function(AddReturnProduct) {
        var s = new AddReturnProduct({});
        dojo.place(s.domNode, dojo.byId('" + placeholder.ClientID + @"').parentElement, 'only');
    });                                    
", true);

AddReturnProduct.html

<div class="AddReturnProduct">
    <style>
        .AddReturnProduct *
        {
            box-sizing: border-box;
        }
        .searchTypeGroup
        {
            padding: 5px;
        }
        .searchTypeGroup label
        {
            display: inline-block;
            padding: 0 10px;
        }
        .AddReturnProduct .col1
        {
            float: left;
            width: 50%;
            padding: 5px;
        }
        .AddReturnProduct br
        {
            clear: both;
        }
        .AddReturnProduct .gridContainer
        {
            height: 20em;
        }
    </style>
    <div class="searchTypeGroup">
        Search Type:
        <label>
            <input type="radio" name="searchType" data-dojo-type="dijit.form.RadioButton" data-dojo-attach-point="optSalesHistory"
                data-dojo-attach-event="onChange: showSearchType"
                checked />
            Sales History
        </label>
        <label>
            <input type="radio" name="searchType" data-dojo-type="dijit.form.RadioButton" data-dojo-attach-point="optItemMaster"
                data-dojo-attach-event="onChange: showSearchType"/>
            Item Master
        </label>
    </div>
    <div class="col1">
        <label class="lbl">
            Product Name:</label>
        <div class="textcontrol">
            <input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-attach-point="txtFilterProduct"
                data-dojo-attach-event="onChange: refreshGrid" />
        </div>
    </div>
    <div class="col1">
        <label class="lbl">
            SKU:</label>
        <div class="textcontrol">
            <input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-attach-point="txtFilterSku"
                data-dojo-attach-event="onChange: refreshGrid" />
        </div>
    </div>
    <div class="col1" data-dojo-attach-point="divFilterInvoiceNumber">
        <label class="lbl">
            Invoice Number:</label>
        <div class="textcontrol">
            <input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-attach-point="txtFilterInvoiceNumber"
                data-dojo-attach-event="onChange: refreshGrid" />
        </div>
    </div>
    <br />
    <div class="gridContainer" data-dojo-attach-point="gridContainer">
        
    </div>
</div>

AddReturnProduct.js

define(['dojo/_base/declare', 'dijit/_Widget', 'dijit/_TemplatedMixin', 'dijit/_WidgetsInTemplateMixin',
    'dojox/grid/DataGrid', 'Sage/Data/BaseSDataStore', 'dojo/_base/lang', 'dojo/on', 'dojo/query',
    'dojo/text!./templates/AddReturnProduct.html',
    'dojo/NodeList-dom'],
function (declare, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, DataGrid, BaseSDataStore, lang, on, query, template) {
    // utility stuff
    function qq(v) {
        return '"' + v.replace('"', '""') + '"';
    }

    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
        templateString: template,
        _grid: null,

        postCreate: function () {
            this.inherited(arguments);
            this.showSearchType();
            var dlg = dijit.byId('DialogWorkspace_window');
            dlg.layout();           
        },

        ///////////////// UI

        /**
        * Show the correct control for the search type
        * @returns {} 
        */
        showSearchType: function () {
            if (this._grid)
                this._grid.destroyRecursive();
            if (this._getSearchType() == 'ItemMaster') {
                this._grid = this._buildItemMasterGrid();
                query('.salesHistoryFilter', this.domNode).style('display', 'none');
            } else {
                // sales history
                this._grid = this._buildSalesHistoryGrid();
                query('.salesHistoryFilter', this.domNode).style('display', '');
            }
            on(this._grid, 'rowClick', lang.hitch(this, 'onGridRowClick'));
            this._grid.placeAt(this.gridContainer);
            this._grid.startup();
        },


        ////////////////// Events

        refreshGrid: function() {
            if (this._grid)
                this._grid._refresh();
        },        

        onGridRowClick: function() {
            var selected = this._grid.selection.getSelected();
            if (selected.length > 0) {
                var product = selected[0].Product ? selected[0].Product : selected[0];
                document.querySelector('input[id$=lueProduct_LookupText').value = product.Name;
                document.querySelector('input[id$=lueProduct_LookupResult').value = product.$key;
            }
        },

        ////////////////// Sales History Data

        _buildSalesHistoryGrid: function () {
            var layout = [
                [
                { name: 'Item #', field: 'ITEMNUMBER', width: '15%' },
                { name: 'Invoice #', field: 'FSInvoice.INVOICENUMBER', width: '15%' },
                { name: 'CO #', field: 'FSInvoice.CONUMBER', width: '15%' },
                { name: 'Product Name', field: 'Product.Name', width: '40%' },
                { name: 'Invoice Date', field: 'FSInvoice.INVOICEDATE', width: '15%' },
                { name: 'Order Qty', field: 'ORDERQTY', width: '15%' }
                ]
            ];
            var grid = new DataGrid({
                store: this._buildSalesHistoryStore(),
                selectionMode: 'single',
                structure: layout,
                query: {
                    scope: this,
                    fn: this._getSalesHistoryQuery
                }
            });
            return grid;
        },

        _buildSalesHistoryStore: function () {
            var storeOptions = {
                resourceKind: 'fsInvoiceItems',
                include: ['Product', 'FSInvoice'],
                select: [],
                sort: []
            };
            var store = new BaseSDataStore(storeOptions);
            return store;
        },

        _getSalesHistoryQuery: function() {
            var accid = Sage.Utility.getClientContextByKey("ReturnAccountId");
            if (!accid) {
                return '1 eq 2';
            }
            var qry = ['FSInvoice.Account.Id eq ' + qq(accid)];
            if (this.txtFilterProduct.get('value')) {
                qry.push('Product.Name like ' + qq(this.txtFilterProduct.get('value') + '%'));
            }
            if (this.txtFilterSku.get('value')) {
                qry.push('Product.ActualId like ' + qq(this.txtFilterSku.get('value') + '%'));
            }
            if (this.txtFilterInvoiceNumber.get('value')) {
                qry.push('FSInvoice.INVOICENUMBER like ' + qq(this.txtFilterInvoiceNumber.get('value') + '%'));
            }
            if (this.txtFilterCONum.get('value')) {
                qry.push('FSInvoice.CONUMBER like ' + qq(this.txtFilterCONum.get('value') + '%'));
            }
            return qry.join(' and ');
        },

        ////////////////// Item Master Data

        _buildItemMasterGrid: function () {
            var layout = [
                [
                { name: 'Item #', field: 'ActualId', width: '40%' },
                { name: 'Product Name', field: 'Name', width: '60%' },
                ]
            ];
            var grid = new DataGrid({
                store: this._buildItemMasterStore(),
                structure: layout,
                selectionMode: 'single',
                query: {
                    scope: this,
                    fn: this._getItemMasterQuery
                }
            });
            return grid;
        },

        _buildItemMasterStore: function () {
            var storeOptions = {
                resourceKind: 'products',
                include: [],
                select: [],
                sort: ['ActualId', 'Name']
            };
            var store = new BaseSDataStore(storeOptions);
            return store;
        },

        _getItemMasterQuery: function () {            
            var qry = [];
            if (this.txtFilterProduct.get('value')) {
                qry.push('Name like ' + qq(this.txtFilterProduct.get('value') + '%'));
            }
            if (this.txtFilterSku.get('value')) {
                qry.push('ActualId like ' + qq(this.txtFilterSku.get('value') + '%'));
            }
            return qry.join(' and ');
        },

        ////////////////// 

        /**
        * @returns {string} SalesHistory or ItemMaster
        */
        _getSearchType: function () {            
            return this.optSalesHistory.checked ? 'SalesHistory' : 'ItemMaster';
        }
    });
});