Customized WEB Apps can be developed with the Beas UI/UX framework. With the UX library you can easily connect to the Beas Service Layer.
We want to create a data grid with ItemCode and ItemName
Create the container:
document.getElementById("ux-dgrid-example").innerHTML = ui.dgrid( "ux-dgrid" );
Initialize the datagrid
ux.dgrid('ux-dgrid', {
limit:10
,fields:[ {title:_t("Item No"), sort_key:'ItemCode'},{title:_t("Item Name"), sort_key:'ItemName'} ]
,url:'/odata4/v1/Item?$ProgramId='+appInfo.gid+'&$AppId='+appInfo.appID+'&$format=jsonarray&$inlinecount=allpages&$transaction=receipt&$orderby=ItemCode&$select=ItemCode,ItemName'
,onclick_row:function(d,rid) { console.log('Data in Row selected: ',d); }
}
);
limit: 10 limits the number of rows per page
fields: Describes the visible fields
url: is the ODATA url
onclick_row: Define the function or function call
Later, we can set a new url with a filter:
ux.dgrid('ux-dgrid').url = /* we can reset the url with a filter if we wan */
And reload page(x):
ux.dgrid('ux-dgrid').page(1);
The ODATA4 call works as follows:
/odata4/v1/Item?$ProgramId='+appInfo.gid+'&$AppId='+appInfo.appID+'&$format=jsonarray&$inlinecount=allpages&$transaction=receipt&$orderby=ItemCode&$select=ItemCode,ItemName'
Part |
Description |
/odata4/v1 |
Define the url for the ODATA service (v1 is optional) |
Item |
The entity / object name |
ProgramId |
Inform the service of the ProgramId that the request is coming from. This is mandatory, otherwise the program can be unstable, if you start more than one app in the browser in parallel. The Program d is saved in appInfo.gid. |
AppId |
Send the name of the current app. All additional settings are set in the app, for example print solution or additional app settings. |
Format |
The UX is working with the "jsonarray" format. This is a fast JSON variant. |
$inlinecount=allpages |
The UXs needs to know how many records exist. With this command ODATA returns the count of rows. |
$transaction=receipt |
The $transaction command (optional) helps defining the correct filter for the current process. In this example: only return items, which can be used for the receipt process. |
$orderby |
Ordering of the data. In this case order by ItemCode ascending. |
$select |
Define the fields to return. This is mandatory, if you work with the json array format. |
See ux.js library for more details.