BSL and WEB UX Library

Contents

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

UX_dgrid_ex_01

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.