With this class you can build a extended search modal window easyly, we use this class for every "magnify icon"
To include this library in your app, just add this code to your app source code in beas, between the "_header()" and "_footer()":
<script src="assets21/js/class_extendedSearch.js"></script>
Class members
Method Summary
|
|
constructor
|
constructor( params )
Initialize the class
|
search
|
search(onclose=null)
Open the modal window
|
Method Detail
|
|
constructor
constructor( mode, batches )
|
Initialize the class
Parameters:
{json object} params
The parameters to initialize the search dialog
Property
|
Data Type
|
Description
|
id
|
{string}
|
The dialog id
|
title
|
{string}
|
Title to display for the dialog window
|
url
|
{string}
|
The source of the data, it can be
In this case, the filter is done internally using all the field (string comparison) and the pagination is done automatically also
[ ['R1-F1','R1-F2','R1-F3'], ...,['Rn-F1','Rn-F2','Rn-F3'] ]
|
If you include the token *q* then it will be replaced automatically by the text into the filter field, and we will call to that url after the user press the search button
In the next example, we display all the warehouse with the {ItemCode} or {ItemName} containing the text in the field "filter"
/odata4/v1/WareHouse?$select=WhsCode,WhsName&$orderby=WhsCode&$filter=(WhsCode like "*q*" or WhsName like "*q*")
|
|
fields
|
{array of json objects}
|
Field to create the data grid, is an array of json objects with this structure:
[ {...}, ..., {...} ]
Property
|
Data Type
|
Description
|
title
|
{string}
|
The column title
|
sort_key
|
{string}
|
The field name to sort by
|
sort_dir
|
{string}
|
The sort direction (ASC or DESC)
|
align
|
{string}
|
Field alignement (left, right, center)
|
hidden
|
{boolean}
|
Hide the field true/false/"M"
If a string with the char "M" is provided then the field is hidden only for small devices (ux.useMinimalistUI)
|
type
|
{string}
|
Data type for a better rendering of the field (string, number, date, boolean)
|
width
|
{string}
|
Field width
|
ondraw
|
{function}
|
You can overwrite the default cell draw function setting this function (see ux.dgrid)
|
|
filter
|
{string}
|
The initial value for the field "filter" in the modal window
|
|
Returns:
{class_extendedSearch object}
Example
let s = new extendedSearch(
{id:'warehouseSearch',
title:_t('Warehouse Search'),
url:'/odata4/v1/WareHouse?$select=WhsCode,WhsName&$orderby=WhsCode&$filter=(WhsCode like "*q*" or WhsName like "*q*")',
fields:[
{title:_t("WhsCode"), sort_key:'WhsCode'},
{title:_t("WhsName"), sort_key:'WhsName'}
]
}
);
|
|
search
display(onclose=null)
|
Open the modal window
Parameters:
function callback onclose
When the user close the modal window, this function is called
The selected row can be read from the variable "selected_row""
|
Returns:
{void}
Example
searchWindow.search(
function() {
if (searchWindow.selected_row != null )
do_something(searchWindow.selected_row);
}
);
|
|
x
