Topic
|
Method
|
click
|
Description
|
A wrapper for the listen function.
|
Parameters
|
string
|
The element ID to add the onclick event
|
function
|
The function to trigger on the event
|
Return
|
|
No return value
|
Example
|
|
<span id="click-example">Try to click me</span>
<script>ux.click("click-example",function(){alert("Not so strong! XD");});</script>
Preview:
In the preview of the example you can see the result of the string:
A click function is displayed: "Try to click me". When clicking the function, a message appears in a separate box which you can close with "OK".
|
|
|
listen
|
Description
|
Listen on the element ID for the event name and then trigger the function given
|
Parameters
|
string
|
The event to listen
|
string
|
The element ID to watch
|
function
|
The function to trigger on the event
|
Return
|
|
No return value
|
Example
|
|
<span id="listen-example">Try to pass over me</span>
<script>
ux.listen("mouseover","listen-example",function(){this.className='has-background-danger';});
ux.listen("mouseout","listen-example",function(){this.className='';});
</script>
Preview:
In the preview of the example you can see the result of the string:
A function to trigger an event appears: "Try to pass over me". When you hover over the line, it is highlighted wit red until you keep the mouse over it.
|
|
|
getElement
|
Description
|
Search an element by ID or Name
|
Parameters
|
string
|
The element ID or name
|
Return
|
|
The element if it is found or null
|
Example
|
|
<input id="getElement-exampleID" name="getElement-exampleName">
<input type="button" value="Example 1" onclick="ux.getElement('getElement-exampleID').value = 'By ID';">
<input type="button" value="Example 2" onclick="ux.getElement('getElement-exampleName').value = 'By Name';">
Preview:
In the preview of the example you can see the result of the string:
|
|
|
loading
|
Description
|
Show a loading mask to avoid the user click on any control
|
Parameters
|
boolean
|
Activate o DeActivate the loading mask
|
Return
|
|
No return value
|
Example
|
|
<a href="#" onclick="loading_example()">Click here</a> to display the loading mask for 5 seconds
<script>
function loading_example() {
ux.loading(true);
setTimeout(function(){ ux.loading(false); }, 5000); }
</script>
Preview:
In the preview of the example you can see the result of the string:
By clicking the link in the "Click here to display the loading mask for 5 seconds" message, the app displays the loading mask for 5 seconds.
|
|
|
dialog
|
Description
|
A modal dialog box
|
Parameters
|
string
|
The title
|
string
|
The HTML content
|
object
|
json object with all options to render the control:
icon
|
An icon to show in the message
|
buttons
|
Array of objects with the definitons of the buttons
( id, title, type [is-success/is-info/is-warning/is-danger]] )
|
|
function
|
Function to call when the dialog is closed or a button is pressed
The pressed button id is sent as parameter (or null if closed without press any button)
|
Return
|
|
No return value
|
Example
|
|
<a href="#" onclick="dialog_example()">Click here</a> to display a modal dialog
<script>
function dialog_example() {
ux.dialog("UX Tutorial","This is a dialog.<br> Do you like it?", {buttons:[ {id:'Y', title:'Yes'},{id:'SY',title:'SUper Yes'}]}, function(b) { alert('You pressed the button with id: '+b); } );
}
</script>
Preview:
In the preview of the example you can see the result of the string:
"Click here to display a modal dialog box."
- by clicking the link in the preview, a dialog box to opens for testing:
|
|
|
set
|
Description
|
Provide a visual feedback to the input controls
|
Parameters
|
string
|
The control's id or name
|
string
|
The new status: show|hide|readonly|disabled|error|title|subtitle|clear
|
object
|
json object with all options
buttons
|
Apply the status to the attached buttons ( true|false)
|
bX
|
Apply the status to the attached button number X( true|false)
|
|
Return
|
object
|
The element
|
Example
|
|
<div id="set-example" class="preview"></div>
<script>
document.getElementById("set-example").innerHTML = ui.input( "User Name", "name", "", {placeholder:"Type your name", licon:"fa-user", rbutton:"fa-search" } )
+ ui.button( "set01", "set Error", {type:"is-link", link:"javascript:set01()", licon:"error"} )
+ ui.button( "set02", "set Disabled", {type:"is-link", link:"javascript:set02()", licon:"eye"} )
+ ui.button( "set03", "set Clear", {type:"is-link", link:"javascript:set03()", licon:"clean"} ) ;
function set01() { ux.set("set-example","error"); }
function set02() { ux.set("set-example","disabled"); }
function set03() { ux.set("set-example","clear"); }
</script>
Preview:
|
|
|
tabs
|
Description
|
Add functionality to ui.tabs
|
Parameters
|
string
|
The control's ID or name
|
string
|
The command: init|active
|
object
|
The params depend of the command:
action=init
|
set params to null to init all tabs or set an id to init only the specified one
|
action=active
|
set the name of the tab to activate
|
|
Return
|
void
|
|
Example
|
|
document.getElementById("your-container").innerHTML = ui.tabs( "tabExample01ux",
[ {title:"Tab1", icon:ui.fa("fire"), content:"Content for tab 1"},
{title:"Tab2", icon:ui.fa("water")}, {title:"Tab3", icon:ui.fa("wind")}] );
ux.tabs("tabExample01ux","init");
Preview:
In the preview of the example you can see the result of the string:
|
|
|
dgrid
|
Description
|
Create a functional data grid and fill it with data from a valid oData source
|
Parameters
|
string
|
The control's ID
|
object
|
JSON object with the options to create the grid:
fields
|
Array of field: [ field1, field2, ..., fieldN ]
Field structure:
title
|
The title of the field
|
sort_key
|
Name of the field if it's possible to be sorted by this field
|
align
|
left|center|right
|
hidden
|
true|false
|
type
|
text|number|date|time|datetime|boolean
|
width
|
Set the width for this field
|
ondraw
|
Function with the value of the current field and you must return the html to draw this cell
|
|
rows
|
(It will be fill up using the url). Array of Array with the rows data: [ [row1_col1,row1_col2,...,row1_colN], ..., [rowN_col1,...,rowN_colN]]
|
URL
|
string with the url to get the data (oData or beas generated dgrid data)
|
sort_key
|
string with the name of the field to sort the result
|
sort_dir
|
Set order to (asc)ending or (desc)ending. Default: asc
|
onclick_row
|
function to be executed when the user select a row, the row's data is passed as argument
|
limit
|
Set the maximum number of rows to retrieve at time. Default: 25
|
|
Return
|
void
|
|
Example 01 (using Beas Service Layer)
|
|
// 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); }
}
);
// 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 want**
// And reload the page(x)
ux.dgrid('ux-dgrid').page(1);
Preview:
In the preview of the example you can see the result of the string:
|
|
|
|
|
autocomplete
|
Description
|
Add auto-complete functionality to any input box.
|
Parameters
|
string
|
The control's ID
|
string
|
The URL to fetch the data (the value of the filter must be *q* this function will replace it later by the current value)
|
object
|
JSON object with the options to create the auto-completion component:
ondraw
|
Function with the value of the current field and you must return the HTML to draw this cell
|
|
Return
|
void
|
|
Example
|
|
// Create the container
document.getElementById("ux-autocomplete-example01").innerHTML = ui.input( "ItemCode", "ux-autocomplete-cexample01", "", {placeholder:"Type an ItemCode or Name", licon:"fa-search" } );
ux.autocomplete('ux-autocomplete-cexample01', '?program_id='+appInfo.gid+'&page=t20_demo&get=dgrid02&q=*q*');
Preview: (Try to type some "ItemCode" or "ItemName" existing in your database)
In the preview of the example you can see the result of the string:
Start typing an ItemCode or ItemName from your existing database, and a list containing the data will be prompted as below:
|
|
|
focus
|
Description
|
You can set the focus to a selected field with rules.
Giving a list of controls as an array and the name of a target control:
If the target control has error, we set the focus to this control, otherwise we should set the focus to the next non-disabled field in the list.
|
Parameters
|
array
|
array of controls ordered to be focused
|
string
|
current focused control
|
Return
|
void
|
|
Example
|
|
// Create three fields
document.getElementById("ux-focus-example01").innerHTML =
ui.input( "Field 1", "ux-focus01", "" )
+ui.button("ux-focus01b1","Set error",{link:"javascript:ux.set('ux-focus01','error')"})
+ui.button("ux-focus01b2","Set clear",{link:"javascript:ux.set('ux-focus01','clear')"})
+'<br>'
+ui.input( "Field 2", "ux-focus02", "" )
+ui.button("ux-focus02b1","Set disabled",{link:"javascript:ux.set('ux-focus02','disabled')"})
+ui.button("ux-focus02b2","Set clear",{link:"javascript:ux.set('ux-focus02','clear')"})
+'<br>'
+ui.input( "Field 3", "ux-focus03", "" )
+'<br>'
+'<br>'
+ui.button("ux-focus01b1","ux.focus(next after =<br> 'Field 1')",{link:"javascript:ux.focus(['ux-focus01','ux-focus02','ux-focus03'],'ux-focus01')"});
Preview: (Try to set error/disable and then click Set Focus)
In the Preview section of the example you can try using the button controls "Set error" and "Set clear"
|
|
|
saveAll
|
Description
|
Send data to the backend and block the app in the meanwhile. It switch the "Save" button to "Saving" also.
|
Parameters
|
string
|
URL
|
object
|
JSON object with the parameters to send
|
function
|
Callback function to execute after the command receives a reply.
|
object
|
JSON object with the options:
contentType
|
json|multipart|standard
|
timeout
|
Max time to wait a reply
|
loading
|
Block the app while sending/receiving data. Default: true
|
|
Return
|
void
|
|
Example
|
|
ux.saveAll( '/odata4/v1/issue?$ProgramId='+appInfo.gid+'&$AppId='+appInfo.appID
, json_with_all_data_to_send
, function(err, result) {
if ( !err /* && result hasn't errors */ ) {
ux.dialog(_t("Data saved!"),msg, { buttons:[{id:'ok', title:_t("Ok"),type:"is-success"}] }
, function(){
// Reset here the app
}.bind(this)
);
} else {
ux.dialog(_t("Error"),_t("An unknown error happened. Please wait some seconds and try again."), { buttons:[{id:'ok', title:_t("Ok"),type:"is-danger"}] } );
ux.loading(false);
}
}.bind(this)
, {contentType:'json',timeout:180000}
);
No Preview available
|
|
|
aget
|
Description
|
A wrapper for ux.ajax (GET)
|
Parameters
|
string
|
URL to load
|
function
|
Callback function to execute after the command receive a reply
|
object
|
JSON object with the options:
contentType
|
json|multipart|standard
|
timeout
|
Max time to wait a reply
|
loading
|
Block the app while sending/receiving data. Default: true
|
|
Return
|
void
|
|
Example
|
|
ux.aget( 'http://www.google.es'
, function(err, result) {
if ( !err /* && result hasn't errors */ ) {
ux.dialog(_t("Received!"),result, { buttons:[{id:'ok', title:_t("Ok"),type:"is-success"}] } );
} else {
ux.dialog(_t("Error"),_t("An unknown error happened. Please wait some seconds and try again."), { buttons:[{id:'ok', title:_t("Ok"),type:"is-danger"}] } );
ux.loading(false);
}
}
);
No Preview available
"Push to execute" - a link appears to execute a command.
|
|
|
apost
|
 apost(url, data, callback, options={})
Description
|
A wrapper for ux.ajax (POST)
|
Parameters
|
string
|
URL to load
|
object
|
JSON object with the parameters to send
|
function
|
Callback function to execute after the command receive a reply
|
object
|
JSON object with the options:
contentType
|
json|multipart|standard
|
timeout
|
Max time to wait a reply
|
loading
|
Block the app while sending/receiving data. Default: true
|
|
Return
|
void
|
|
Example
|
|
ux.apost( 'http://www.url-to-send-post.com/path'
, {data1:'hello',moreData:'World!'}
, function(err, result) {
if ( !err /* && result hasn't errors */ ) {
ux.dialog(_t("Sent and Received!"),result, { buttons:[{id:'ok', title:_t("Ok"),type:"is-success"}] } );
} else {
ux.dialog(_t("Error"),_t("An unknown error happened. Please wait some seconds and try again."), { buttons:[{id:'ok', title:_t("Ok"),type:"is-danger"}] } );
ux.loading(false);
}
}
);
No Preview available
|
|
|
ajax
|
Description
|
A wrapper for ux.ajax (POST)
|
Parameters
|
string
|
URL to load
|
function
|
Callback function to execute after the command receive a reply
|
object
|
JSON object with the options:
data
|
JSON object with the parameters to send
|
contentType
|
json|multipart|standard
|
timeout
|
Max time to wait a reply
|
loading
|
Block the app while sending/receiving data. Default: true
|
|
Return
|
void
|
|
Example
|
|
ux.ajax( 'http://www.url-to-send-get.com/path'
, function(err, result) {
if ( !err /* && result hasn't errors */ ) {
ux.dialog(_t("Sent and Received!"),result, { buttons:[{id:'ok', title:_t("Ok"),type:"is-success"}] } );
} else {
ux.dialog(_t("Error"),_t("An unknown error happened. Please wait some seconds and try again."),
{ buttons:[{id:'ok', title:_t("Ok"),type:"is-danger"}] } );
ux.loading(false);
}
}
);
No Preview available
|
|
|
