DecSoft App Builder

App methods

An "app" object JavaScript variable is available in all app events, app views events, app dialogs events and all the controls events. The "app" variable provide several app properties and app constants, as well the below referred app methods, ready to be used.

Variables

setReactiveVar()
getReactiveVar()
unsetReactiveVar()
setNonReactiveVar()
getNonReactiveVar()
unsetNonReactiveVar()

App views

showView()
replaceView()

App dialogs

showDialog()
hideDialog()
hideDialogs()
isDialogVisible()
getVisibleDialogs()

App sidebar

showSidebar()
hideSidebar()
sidebarIsVisible()
sidebarSetDirection()

App alerts

showAlert()
hideAlert()

App toasts

showToast()
hideToast()
hideToasts()
getToast()
getToasts()

App local storage

setOption()
getOption()
removeOption()
clearOptions()

App resources

resource()

App languages

translateView()
getLanguages()
getLanguagesNames()
getLanguagesCodes()
getLanguageCodeFromName()
getLanguageNameFromCode()

App controls

focusControl()

App themes

setAppTheme()
getAppThemeColor()
setAppThemeColor()
setAppFixedStyle()
setAppScaledStyle()
setAppTextDirection()
getAppColorScheme()

Devices

setViewReadyForDeviceKeyboard()
setDialogReadyForDeviceKeyboard()

Strings methods

lowerCase()
upperCase()
strLen()
trimStr()
strSearch()
splitStr()
subStr()
strReplace()
strReplaceAll()
strToBase64()
base64ToStr()
serialize()
unserialize()
randomStr()
formatStr()

Numbers methods

randomNum()

Sounds methods

beep()
playSound()
stopSound()

Window methods

alert()
console.info()
console.error()
console.debug()
setTimeout()
setInterval()
clearInterval()

App methods

App SetReactiveVar method

You can use the app SetReactiveVar method to establish app global reactive variables, ready to be used in all the app views, app dialogs and app frames. You can show the content of these global reactive variables in the user interface (some app view, app dialog or app frame) and they are updated accordingly if was changing in any of the app views, app dialogs or app frames.

For example, suppose you declare a "userName" global reactive variable and then show it in certain HTML control. Then, you can change the value of this variable in any app view, app dialog or app frame, and, the variable is show as expected, that is, well updated.

The app SetReactiveVar method admits the below arguments:

Name	Type	Description
name	String	The app global reactive variable name to be set.
value	Mixed	Any value to be set, can be a string, a number, array, object, etc.


// Creates a "userName" app global reactive variable
app.setReactiveVar('userName', 'John Doe');

// Creates a "execCounter" app global reactive variable
app.setReactiveVar('execCounter', 1);

// Creates a "firstRun" app global reactive variable
app.setReactiveVar('firstRun', true);

// Creates a "firstData" app global reactive variable
app.setReactiveVar('firstData', {"name": "John", "lastName": "Doe"});

To access to the created app global reactive variables you can use the app.getReactiveVar() app method or directly the Store property, like "app.store.varName". Note that by using the method you can establish a default value to be returned if the variable did not exists.


<!-- This code is inside the HTML property of an HTML control -->

Your user name is: {{app.store.userName}}

<br>

Your user name is: {{app.getReactiveVar('userName')}}

Consider if you need a global reactive variable. In order to made a variable reactive some resources are expended. If you don't show the variable contents in the user interface, probably you no need a global reactive variable, but just a global variable, to be available in all the app views, app dialogs and app frames, but in shown in the app interface. You can use the app.getNonReactiveVar() app method to set app global non reactive variables.

App GetReactiveVar method

You can use the app GetReactiveVar method to get the value of a previously established app global reactive variables.

To access to the created app global reactive variables you can use this method or directly the Store property, like "app.store.varName".

The app GetReactiveVar method admits the below arguments:

Name	Type	Description
name	String	The app global reactive variable name to be get.
defaultValue	Mixed	Any value to be get if the specified variable did not exists, can be a string, a number, array, object, etc.


<!-- This code is inside the HTML property of an HTML control -->

Your user name is: {{app.store.userName}}

<br>

Your user name is: {{app.getReactiveVar('userName', 'John Doe')}}

App UnsetReactiveVar method

You can use the app UnsetReactiveVar method to delete a previously established app global reactive variables.

The app UnsetReactiveVar method admits the below arguments:

Name	Type	Description
name	String	The app global reactive variable name to be deleted.


// Set a variable
app.setReactiveVar('userName', 'John Doe');

// Show John Doe
alert(app.getReactiveVar('userName'));

// Unset the variable
app.unsetReactiveVar('userName');

// Show "undefined"
alert(app.getReactiveVar('userName'));

App SetNonReactiveVar method

You can use the app SetNonReactiveVar method to establish app global non reactive variables, ready to be used in all the app views, app dialogs and app frames.

The app SetNonReactiveVar method admits the below arguments:

Name	Type	Description
name	String	The app global non reactive variable name to be set.
value	Mixed	Any value to be set, can be a string, a number, array, object, etc.


// Creates a "userName" app global non reactive variable
app.setNonReactiveVar('userName', 'John Doe');

// Creates a "execCounter" app global non reactive variable
app.setNonReactiveVar('execCounter', 1);

// Creates a "firstRun" app global non reactive variable
app.setNonReactiveVar('firstRun', true);

// Creates a "firstData" app global non reactive variable
app.setNonReactiveVar('firstData', {"name": "John", "lastName": "Doe"});

To access to the created app global non reactive variables you can use the app.getNonReactiveVar() app method or directly the "window.store" variable, like "window.store.varName". Note that by using the method you can establish a default value to be returned if the variable did not exists.


// Show Jhon Doe
alert(app.getNonReactiveVar('userName'));

// Show Jhon Doe too
alert(window.store.userName);

App GetNonReactiveVar method

You can use the app GetNonReactiveVar method to get the value of a previously established app global non reactive variables.

To access to the created app global non reactive variables you can use this method or directly the "window.store" variable, like "window.store.varName".

The app GetNonReactiveVar method admits the below arguments:

Name	Type	Description
name	String	The app global non reactive variable name to be get.
defaultValue	Mixed	Any value to be get if the specified variable did not exists, can be a string, a number, array, object, etc.


// Show Jhon Doe
alert(app.getNonReactiveVar('userName'));

// Show Jhon Doe too
alert(window.store.userName);

App UnsetNonReactiveVar method

You can use the app UnsetNonReactiveVar method to delete a previously established app global non reactive variables.

The app UnsetNonReactiveVar method admits the below arguments:

Name	Type	Description
name	String	The app global non reactive variable name to be deleted.


// Set a variable
app.setNonReactiveVar('userName', 'John Doe');

// Show John Doe
alert(app.getNonReactiveVar('userName'));

// Unset the variable
app.getNonReactiveVar('userName');

// Show "undefined"
alert(app.getNonReactiveVar('userName'));

App ShowView method

You can use the app ShowView method to show to the user any of the available app views. This method show the specified app view and leave a record in the browser history, so the user can use the "back button" in order to navigate to the previous app view in the history. If you want to show an app view without leave a record in the browser history you can use the replaceView() method.

This method admits the below arguments:

Name	Type	Description
viewName	String	The name of the app view to be show.


// Show the app view2
app.showView('view2');

It's also possible to pass variables to the view just by adding it after the view name in the below way:


// Show the app view2
app.showView('view2?a=hello&b=world');

Then you can take a look at the app.query property, which in the above case stores an object with two properties: "a" and "b", with the "hello" and "world" values respectively.

App ReplaceView method

You can use the app ReplaceView method to show to the user any of the available app views. This method show the specified but don't leave a record in the browser history, so the user cannot use the "back button" in order to navigate to the previous app view in the history. If you want to show an app view leaving a record in the browser history you can use the showView() method. This method admits the below arguments:

This method admits the below arguments:

Name	Type	Description
viewName	String	The name of the app view to be show.


// Show the app view2 without leave a record in browser history
app.replaceView('view2');

It's also possible to pass variables to the view just by adding it after the view name in the below way:


// Show the app view2
app.showView('view2?a=hello&b=world');

Then you can take a look at the app.query property, which in the above case stores an object with two properties: "a" and "b", with the "hello" and "world" values respectively.

App ShowDialog method

You can use the app ShowDialog method to show to the user a specific app dialog. You must indicate to this method the dialog name which you want to show, and, optionally, you can indicate a callback which will be executed when the dialog is shown, and, another optional callback which will be executed when the dialog is hidden. Note that the dialog itself have the Show event and the Hide event: the optional callbacks that you can use with this method are independent of these dialog's methods.

This method admits the below arguments:

Name	Type	Description
dialogName	String	The name of the app dialog to be show.
shownCallback	Function	An optional function to be executed when the dialog are shown.
hiddenCallback	Function	An optional function to be executed when the dialog are hidden.


// Show the app dialog1
app.showDialog('dialog1');

// Show the app dialog1 and be informed when the dialog are shown
app.showDialog(
  'dialog1',
  function () {
    alert('The dialog is shown!');
  }
);

// Show the app dialog1 and be informed when the dialog are shown and hidden
app.showDialog(
  'dialog1',
  function () {
    alert('The dialog is shown!');
  },
  function () {
    alert('The dialog is hidden!');
  }
);

// Show the app dialog1 and be informed when the dialog are hidden
app.showDialog(
  'dialog1',
  null,
  function () {
    alert('The dialog is hidden!');
  }
);

App HideDialog method

You can use the app HideDialog method to hide a showing app dialog.

This method admits the below arguments:

Name	Type	Description
dialogName	String	The name of the app dialog to be show.


// Hide the app dialog1
app.hideDialog('dialog1');

App HideDialogs method

You can use the app HideDialogs method to hide all the possible showing app dialogs. This method don't require any arguments.


// Hide all showing
app.hideDialogs();

App IsDialogVisible method

You can use the app IsDialogVisible method to find if an app dialog is visible (shown) or not. The method returns a Boolean true value if the dialog is visible or a Boolean false value if not.

This method admits the below arguments:

Name	Type	Description
dialogName	String	The name of the app dialog to be check.


// Is dialog1 visible?
if (app.IsDialogVisible('dialog1')) {
  alert('dialog1 is visible');
} else {
  alert('dialog1 is NOT visible');
}

App getVisibleDialogs method

You can use the app getVisibleDialogs method to retrieve the names of the visible dialogs. This method do not require any arguments and returns an Array with the names of the visible dialogs.


// Count the visible dialogs
let totalVisibleDialogs = app.getVisibleDialogs().length;

// Get the visible dialogs
let visibleDialogs = app.getVisibleDialogs();

// Can show [] (no visible dialogs) or ['dialog1'] or ['dialog1', 'dialog2',...]
alert(visibleDialogs);

App ShowSidebar method

You can use the app ShowSidebar method to show the optional app sidebar. To put the sidebar ready to use you only need to set the app sidebar items and subitems at designtime by using the sidebar items dialog. This dialog is available from the app sidebar options and also from the app designer controls inspector. You can also access to the app sidebar items and subitems at runtime by using the app app.sidebar.items property.


// Show the app sidebar
app.showSidebar();

App HideSidebar method

You can use the app HideSidebar method to hide the optional app sidebar. You can know if the app sidebar is visible by using the app sidebarIsVisible() method.


// Hide the app sidebar
if (app.sidebarIsVisible()) {
  app.hideSidebar();
}

App SidebarIsVisible method

You can use the app SidebarIsVisible method to check if the app sidebar is visible or not. This methods returns "true" if the sidebar is visible, or "false" if not.


// Hide the app sidebar if visible
if (app.sidebarIsVisible()) {
  app.hideSidebar();
}

App SidebarSetDirection method

Use this method to change the direction of the app sidebar at runtime. This method returns the established direction of the app sidebar, which can be "left" or "right".


// Toogle the app sidebar direction
if (app.sidebar.direction === 'left') {
  app.sidebarSetDirection('right');
} else {
  app.sidebarSetDirection('left');
}

App ShowAlert method

Use the app ShowAlert method in order to show an alert to the user in a modal way, instead of the browser's alert that you can show to the user by using the window.alert() method.

This method admits the below arguments:

Name	Type	Description
body	String	The alert's body. Can contain some HTML tags like "p" and "strong".
title	String	Optionally set the alert's title.
kind	String	Optionally set the alert's header kind. To set this variable you can use one of the available "app.kind.*" constant values. If you provide an alert's title, then the kind is applied to the alert's title. You can also provide an empty title, so the kind (if any) is applied to the alert's body.
buttons	Array	Optionally set an Arrray of objects variable with the buttons that you want to appear in the alert. Every object / button can have three properties: "text", "kind" and "size". You can use the "app.kind." values for the "kind" and the "app.size." for the "size".
closeCallback	Function	Optionally set a function callback to be executed when the user press an alert's button. The function callback receive an "index" argument, which inform to you about the button which is pressed by the user, starting by "zero" (first button).


// Simple alert
app.showAlert('Hello, I am an alert!');

// Simple alert with HTML
app.showAlert('<i class="far fa-bell"></i> Hello, <strong>I am</strong> an alert!');

// Alert with header
app.showAlert('Hello, I am an alert!', 'Information');

// Alert with header kind
app.showAlert('Hello, I am an alert!', 'Information', app.kind.primary);

// Alert with button
app.showAlert(
 'Hello, I am an alert!',
 'Information',
 app.kind.primary,
 [{text: 'Accept', kind: app.kind.primary, size: app.size.md}]
);

// Alert with close callback
app.showAlert(
  'Hello, I am an alert!',
  'Information',
  app.kind.primary,
  [{text: 'Accept', kind: app.kind.primary}],
  function () {
    app.showAlert('You close the alert!');
  }
);

// Alert with buttons
app.showAlert(
  'Hello, I am an alert!',
  'Information',
  app.kind.primary,
  [
    {text: 'Accept', kind: app.kind.primary, size: app.size.sm},
    {text: 'Cancel', kind: app.kind.danger, size: app.size.sm}
  ],
  function (index) {
    app.showAlert('You close the alert pressing the button with index: ' + index);
  }
);

// Large body alert
app.showAlert(
  '<p>Hello, I am an alert!</p><p>Hello, I am an alert!</p><p>Hello, I am an alert!</p><p>Hello, I am an alert!</p><p>Hello, I am an alert!</p><p>Hello, I am an alert!</p>',
  'Information',
  app.kind.primary,
  [
    {text: 'Accept', kind: app.kind.primary, size: app.size.sm},
    {text: 'Cancel', kind: app.kind.danger, size: app.size.sm}
  ],
  function (index) {
    app.showAlert('You close the alert pressing the button with index: ' + index);
  }
);

// Very large body alert
var
  alertBody = '\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
    <p>Hello, I am an alert!</p>\
  ';

app.showAlert(
  alertBody,
  'Information',
  app.kind.primary,
  [
    {text: 'Accept', kind: app.kind.primary, size: app.size.sm},
    {text: 'Cancel', kind: app.kind.danger, size: app.size.sm}
  ],
  function (index) {
    app.showAlert('You close the alert pressing the button with index: ' + index);
  }
);

// Autohide alert
window.clearInterval(window.autoHideAlertTimeout);

app.showAlert('Hello, I am an alert!');

window.autoHideAlertTimeout = window.setTimeout(function () {

  app.hideAlert();

}, 3000);

There is an Alert sample app included with the installation of DecSoft App Builder. Take a look to see this app method in action!

App HideAlert method

You can use the app HideAlert method in order to hide a previously shown app alert. This method do not require any argument, since only one alert can be visible in the app at the same moment. If there is no visible alerts, this method don't cause any error if is called.


// Autohide alert
window.clearInterval(window.autoHideAlertTimeout);

app.showAlert('Hello, I am an alert!');

window.autoHideAlertTimeout = window.setTimeout(function () {

  app.hideAlert();

}, 3000);

There is an Alert sample app included with the installation of DecSoft App Builder. Take a look to see this app method in action!

App ShowToast method

You can use the app ShowToast method to show one or more notifications to the user. Note that more than one notification toast can be show at the same time, since they are properly stocked vertically. This method returns a unique identifier string that can be used with the app getToast() method and the hideToast() method to manipulate and hide the toast respectively.

As you can see in the below arguments table, this method accept a couple of callbacks that receives one argument with a "toast" object variable. Also the app getToast() method returns a "toast" object variable. Please, see this last method to know the properties of this "toast" object variable.

This method admits the below arguments:

Name	Type	Description
text	String	The text to be show in the toast body. This can contain a bit of HTML tags if you needed. This is the only mandatory argument for the method. All others are optionals. This methods returns a string identifier that can be used with the app hideToast() method or the app getToast() method.
hideMsecs	Number\|Boolean	Optionally set to a number of milliseconds in order to automatically hide the toast after that time. By default, a toast notification must be dismissed by the user clicking the close button. You can use this argument to establish a number of milliseconds to auto hide the toast notification. You can also set this argument to "false", if you want to use another method arguments but don't want to auto hide the toast notification.
kind	String	Optionally establish here the toast kind or "colors". To set this variable you can use one of the available "app.kind.*" constant values.
title	String	Optionally set a title for the toast. The title is shown at the left of the toast header.
subtitle	String	Optionally set a subtitle for the toast. The subtitle is shown at the right of the toast header with an smaller font size.
clickCallback	Function	Optionally set here a function to be called when the user click in the toast body. The function receives one argument with a "toast" object variable. This "toast" object stores all the toast properties, in addition to the payload that you can set too (see below the payload optional argument). You can use here the app hideToast() method to hide the toast, if you wanted.
dismissCallback	Function	Optionally set here a function to be called when the user click in the toast close button. The function receives one argument with a "toast" object. This "toast" object stores all the toast properties, in addition to the payload that you can set too (see below the payload optional argument). You no need to hide the toast, since it's automatically hide after this function call.
payload	Object	Optionally set here an object to be added to the toast. As you read above the "clickCallback" and the "dismissCallback" functions receives one argument with a "toast" object variable, this "toast" variable stores all the toast properties, and, also a "payload" property, which contains the payload object that you pass here in this argument. This can be useful to do some specific things when an specific toast (with some specific payload) is clicked or dismissed.


// Show a simple toast

app.showToast(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
);

// Show a simple toast and auto hide it after 4 seconds

app.showToast(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  4000
);

// Show a "danger" toast and auto hide it after 4 seconds

app.showToast(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  4000,
  app.kind.danger
);

// Show a "danger" toast with title and auto hide it after 4 seconds

app.showToast(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  4000,
  app.kind.danger,
  'Lorem ipsum'
);

// Show a "danger" toast with title and subtitle and auto hide it after 4 seconds

app.showToast(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  4000,
  app.kind.danger,
  'Lorem ipsum',
  '1 minute ago'
);

// Show a "danger" toast with title and subtitle and auto hide it after 4 seconds
// and be ready if the user click in the toast body

app.showToast(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  4000,
  app.kind.danger,
  'Lorem ipsum',
  '1 minute ago',
  function (toast) {
    alert('You clicked the toast with ID: ' + toast.id);
  }
);

// Show a "danger" toast with title and subtitle and auto hide it after 4 seconds
// and be ready if the user click in the toast body or the toast close button

app.showToast(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  4000,
  app.kind.danger,
  'Lorem ipsum',
  '1 minute ago',
  function (toast) {
    alert('You clicked the toast with ID: ' + toast.id);
  },
  function (toast) {
    alert('You dismissed the toast with ID: ' + toast.id);
  }
);

// Show a "danger" toast with title and subtitle and auto hide it after 4 seconds
// and be ready if the user click in the toast body or the toast close button and
// pass a payload for the toast and use it

app.showToast(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  4000,
  app.kind.danger,
  'Lorem ipsum',
  '1 minute ago',
  function (toast) {
    // Show "The payload user is: John"
    alert('The payload user is: ' + toast.payload.user);
  },
  function (toast) {
    alert('You dismissed the toast with ID: ' + toast.id);
  },
  {user: "John"}
);

There is a Toasts sample app included with the installation of DecSoft App Builder. Take a look to see this app method in action!

App HideToast method

You can use the app HideToast method to hide a specific toast notification previously show by using the app showToast() method.

This method admits the below arguments:

Name	Type	Description
toastId	String	Mandatory. You must specify here the ID of a toast notification returned by the app showToast() method.

There is a Toasts sample app included with the installation of DecSoft App Builder. Take a look to see this app method in action!

App HideToasts method

You can use the app HideToasts method to hide all the existing toast notifications previously show by using the app showToast() method. If you want to know if some toast is actually showing, you can use the app getToast() method, which returns an array with the available toasts, so, you can use the array "length" property: if is greater than zero means that some toast is currently showing. This method don't require arguments, and, don't fail if no toasts are showing.


// Hide all the currently showing toasts
if (app.getToasts().length > 0) {
  app.hideToasts();
}

There is a Toasts sample app included with the installation of DecSoft App Builder. Take a look to see this app method in action!

App GetToast method

You can use the app GetToast method to get a specific toast notification previously show by using the app showToast() method. Get a toast notification can be useful, for example, because it's possible to change the toast properties and automatically reflect these changes in the toast notification, so it's possible to change the toast notification text, for example, after the toast has been show.

This method admits the below arguments:

Name	Type	Description
toastId	String	Mandatory. You must specify here the ID of a toast notification returned by the app showToast() method.

This method returns a "toast" object variable with the below properties:

Name	Type	Description
id	String	Read only. The toast ID as returned by the app showToast() method the the toast was show. Changing this property can cause unexpected results.
text	String	The toast text as you set when call to the app showToast() method. You can change this property if needed and that changes are automatically reflected in the toast notification.
kind	String	The toast kind as you set when call to the app showToast() method. You can change this property if needed and that changes are automatically reflected in the toast notification.
title	String	The toast title as you set when call to the app showToast() method. You can change this property if needed and that changes are automatically reflected in the toast notification.
subtitle	String	The toast subtitle as you set when call to the app showToast() method. You can change this property if needed and that changes are automatically reflected in the toast notification.
subtitle	String	The toast subtitle as you set when call to the app showToast() method. You can change this property if needed and that changes are automatically reflected in the toast notification.
payload	Object	The toast payload as you set when call to the app showToast() method. You can change this property if needed and that changes are automatically reflected in the toast notification.
clickCallback	Function	The toast click callback function as you set when call to the app showToast() method. You can change this property if needed and that changes are automatically reflected in the toast notification.
dismissCallback	Function	The toast dismiss callback function as you set when call to the app showToast() method. You can change this property if needed and that changes are automatically reflected in the toast notification.


// Show a toast notification and keep their ID to be used later

var
  toastId = app.showToast(
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    false,
    app.kind.success
  );

setTimeout(function () {

  // After 3 seconds, change some toast notification properties

  var
    toast = app.getToast(toastId);

  toast.title = 'Hello!';
  toast.kind = app.kind.danger;
  toast.subtitle = '3 seconds ago';

}, 3000);

There is a Toasts sample app included with the installation of DecSoft App Builder. Take a look to see this app method in action!

App GetToasts method

You can use the app GetToasts method to get all the currently showing toast notifications. This method don't require any argument and returns an array of objects variable. Every object is a "toast" one, and has the properties that you can see referred in the app getToast() method.

There is a Toasts sample app included with the installation of DecSoft App Builder. Take a look to see this app method in action!

App SetOption method

You can use this app method to store the specified key and value in the app local storage. The app local storage can be a good place to save app options, for example, and, it's available in all the browsers and platforms. This method admits the below arguments:

Name	Type	Description
key	String	The key name to be stored in the app local storage. You can later use this key to retrieve the saved value by using the app getOption() method.
value	mixed	The value that you want to store in below the specified key in the app local storage.

App GetOption method

You can use this app method to retrieved a previously saved value from the app local storage by using the setOption() method. This method admits the below arguments:

Name	Type	Description
key	String	The key name used previously by the app setOption() method.
defaultValue	mixed	This method returns a previously saved value from the app local storage, however, if the key is not found, the method returns this specified default value. If not default value is provided the method returns "undefined".

App RemoveOption method

You can use this app method to remove the specified key from the app local storage. The key / value must be previously saved by using the setOption() method. This method admits the below argument:

Name	Type	Description
key	String	The key name used previously by the app setOption() method and to be removed from the app local storage.

App ClearOptions method

You can use this app method to remove all the keys previously stored in the app local storage. The keys / values can be previously saved by using the setOption() method. This method has no arguments.

App Resource method

You can use this app method to retrieve a specific app resource. You can learn more about app resources here. This method is language aware, in other words, take in consideration the value of the app.language property.

This method retrieve the app resource in the right app language, and, fallback to the original app resource if the specified resource is not translated to the current app language. If the specifed resource is not found this method returns "undefined".

This method admits the below arguments:

Name	Type	Description
name	String	The name of the app resource to be retrieved.


// Show the "welcomeMessage" resource
alert(app.resource('welcomeMessage'));


// We can also use resources inside an HTML control, for example:

<div>
 {{app.resource('someText')}}
</div>

<div v-html="app.resource('someHtml')">
</div>

There is a Languages sample app included with the installation of DecSoft App Builder. Take a look to see this app method in action!

App TranslateView method

You can use this app method to translate the current app view or the current app dialog into the language specified in the "app.language" property. To get this method properly working you must prepare one or more app languages using the app languages manager.


// Translate the current app view
app.translateView();

// Specify the language to be used first
app.language = 'es';
app.translateView();

There is a Languages sample app included with the installation of DecSoft App Builder. Take a look to see this app method in action!

App GetLanguages method

You can use this app method to retrieve information at runtime of the available app languages, that you can define by using the app languages manager at designtime. This method returns a JavaScript Array of objects variable with the codes and the names of the available app languages.


// Show, for example: [{"code": "en", "name": "English"}, {"code": "es", "name": "Español"}]
alert(app.serialize(app.getLanguages()));

App GetLanguagesNames method

You can use this app method to retrieve the languages names at runtime of the available app languages, that you can define by using the app languages manager at designtime. This method returns a JavaScript array variable with the names of the available languages.


// Fill a Select control with the available app languages names
views.view1.select1.items = app.getLanguagesNames();

App GetLanguagesCodes method

You can use this app method to retrieve the languages codes at runtime of the available app languages, that you can define by using the app languages manager at designtime. This method returns a JavaScript array variable with the codes of the available languages.


// Fill a Select control with the available app languages codes
views.view1.select1.items = app.getLanguagesCodes();

App GetLanguageCodeFromName method

You can use this app method to retrieve a language code from the specified language name, of one of the available app languages, that you can define by using the app languages manager at designtime. This method returns a JavaScript string variable with the language code, or an empty string if no found.

This method admits the below arguments:

Name	Type	Description
code	String	A language name, so we can retrieve his code.


// Get the language code from a Select control filled with languages names
var
  language = app.getLanguageCodeFromName(
   views.view1.select1.items[views.view1.select1.itemIndex]);

// Show "es", for example
alert(language);

App GetLanguageNameFromCode method

You can use this app method to retrieve a language name from the specified language code, of one of the available app languages, that you can define by using the app languages manager at designtime. This method returns a JavaScript string variable with the language name, or an empty string if no found.

This method admits the below arguments:

Name	Type	Description
code	String	A language code, so we can retrieve his name.


// Get the language name from a Select control filled with languages codes
var
  language = app.getLanguageNameFromCode(
   views.view1.select1.items[views.view1.select1.itemIndex]);

// Show "Español", for example
alert(language);

App FocusControl method

You can use the app FocusControl to give the focus to the specified control.

This method admits the below arguments:

Name	Type	Description
controlName	String	The name of the control to give the user focus.


// Focus the input1 control
app.focusControl('input1');

App SetAppTheme method

You can use the app SetAppTheme method to set the app theme to the specified one. You can include more than one theme from the app options, then these themes become available and ready to be set in runtime with this app method.

You can use the app Theme property and the app Themes property to know the current app theme and the available app themes, respectively. This method return "false" if you try to set a theme which is not included in the app. In other case this method return the name of the established theme, and, also establish the "app.theme" variable to that established theme.

This method admits the below arguments:

Name	Type	Description
themeName	String	The name of one available app theme to be set.


// Set the sketchy app theme
app.setAppTheme('sketchy');

When you call to the SetAppTheme the right version (LTR -left to right- or RTL -right to left-) of the theme is automatically set, according to the app text direction property.

App GetAppThemeColor method

You can use the app GetAppThemeColor method to get the app theme color currently established. You can specify an app theme color at designtime from the app options and then at runtime you can get that app theme color using this method. You can set the app theme color at runtime using the setAppThemeColor() app method.


// Get the current app theme color
var themeColor = app.getAppThemeColor();

// The theme color can be "light" or "dark"
alert(themeColor);

App SetAppThemeColor method

You can use the app SetAppThemeColor method to set the app theme color to the specified one. You can specify an app theme color at designtime from the app options and then at runtime you can change that app theme color using this method. You can get the app theme color at runtime using the getAppThemeColor() app method.

This method admits the below arguments:

Name	Type	Description
colorMode	String	This value can be one of these values: "light" or "dark".


// Set the app theme color "dark"
app.setAppThemeColor('dark');

App SetAppFixedStyle method

You can use the SetAppFixedStyle method to change to the app style to fixed at runtime. Find more information in the app styles help topic. The app style property stores the current style of the app, which can be "fixed" or "scaled".


// Set the app fixed style
app.setAppFixedStyle();

App SetAppScaledStyle method

You can use the SetAppScaledStyle method to change to the app style to scaled at runtime. Find more information in the app styles help topic. The app style property stores the current style of the app, which can be "fixed" or "scaled".


// Set the app scaled style
app.setAppScaledStyle();

App SetAppTextDirection method

You can use the SetAppTextDirection method to change the app HTML text direction. This method also cause that the app TextDirection property was accordingly updated. This method admits the below arguments:

Name	Type	Description
textDirection	String	This argument can be "ltr" (left to right) or "rtl" (right to left).


// Set the app text direction left to right
app.setAppTextDirection('ltr');

// Set the app text direction right to left
app.setAppTextDirection('rtl');

When you call to the SetAppTextDirection method the current theme of the app is automatically changed to the direction that you set.

App GetAppColorScheme method

You can use the GetAppColorScheme method to find the current system app color scheme, which can be "light" or "dark". You can use this app method inside the app ColorSchemeChange event, for example, so you can change the app's theme depending on the app color scheme configured in the system.


if (app.getAppColorScheme() === 'light') {
  alert('The color scheme is light!');
} else {
  alert('The color scheme is dark!');
}

App SetViewReadyForDeviceKeyboard method

You can use the app SetViewReadyForDeviceKeyboard method to prepare your app view to be ready with the devices keyboards. This must be used only if your app view or app dialog, contains some input controls, so the user can press it in order to input some information using the device keyboard. This app method is intended to be use when the app is deployed in platforms like Android and Apple iOS. In other case (if the app is running in a browser) the method can be called, but do nothing. This method don't require any arguments.


// This code can be place in the app view Show event
app.setViewReadyForDeviceKeyboard();

App SetDialogReadyForDeviceKeyboard method

You can use the app SetDialogReadyForDeviceKeyboard method to prepare your app dialog to be ready with the devices keyboards. This must be used only if your app view or app dialog, contains some input controls, so the user can press it in order to input some information using the device keyboard. This app method is intended to be use when the app is deployed in platforms like Android and Apple iOS. In other case (if the app is running in a browser) the method can be called, but do nothing. This method don't require any arguments.


// This code can be place in the app dialog Show event
app.setDialogReadyForDeviceKeyboard();

App lowerCase method

Use this method to get a lower case string. Returns the lower cased string. This method admits the below arguments:

Name	Type	Description
text	String	Specify the string to be converted in lower case.


var
  userName = 'John Doe';

// Show "john doe"
alert(app.lowerCase(userName));

App upperCase method

Use this method to get a upper case string. Returns the upper cased string. This method admits the below arguments:

Name	Type	Description
text	String	Specify the string to be converted in upper case.


var
  userName = 'John Doe';

// Show "JOHN DOE"
alert(app.upperCase(userName));

App StrLen method

Use this method to get the length of the provided string. Returns the number of characters (length) of the provided string. This method admits the below arguments:

Name	Type	Description
text	String	Specify the string to retrieve the length.


var
  userName = 'John Doe';

// Show "8"
alert(app.strLen(userName));

App TrimStr method

Use this method to trim an string (remove the spaces at the left and at the right). Returns the trimmed string. This method admits the below arguments:

Name	Type	Description
text	String	Specify the string to be trimmed.


var
  userName = '     John Doe     ';

// Show "John Doe"
alert(app.trimStr(userName));

App StrSearch method

Use this method to searches a string for a specified value, and returns the position of the match or -1 if not found. This method admits the below arguments:

Name	Type	Description
text	String	The source string to be searches.
query	String	The query string to be search.


var
  str = 'Enjoy DecSoft App Builder!',
  pos = app.strSearch(str, 'DecSoft');

// Show: 6
alert(pos);

App SplitStr method

Use this method to split a string into an array of substrings, and returns the new array. This method admits the below arguments:

Name	Type	Description
text	String	The text to be splitted into an array.
separator	String	The separator string to be used for split the text string.
limit	Number	Set an optional number to return a limit the elements in the result array.


var
  str = "How are you doing today?",
  ressult = app.splitStr.split(str, ' ');

// Show: How,are,you,doing,today?
alert(result);

App SubStr method

Use this method to extracts the characters from a string, between two specified indices, and returns the new sub string. This method admits the below arguments:

Name	Type	Description
text	String	The source string to be used.
start	Number	The number to start to pick the resulted substring.
count	Number	The number of characters to be extracted form the start number.


var
  str = 'Hello world!',
  result = app.subStr(str, 0, 5);

// Show "Hello"
alert(result);

App StrReplace method

Use this method to replace the first match of the specified string, by the other specified value. This method admits the below arguments:

Name	Type	Description
text	String	The source string to be used.
from	String	The string to be searches and replaced with the "to" argument.
to	String	The string used to replace the one specified in the "from" argument.


var
  str = 'Hello world!',
  result = app.strReplace(str, 'o', 'e');

// Show "Helle world!"
alert(result);

App StrReplaceAll method

Use this method to replace all the matches of the specified string, by the other specified value. Returns the replaced string. This method admits the below arguments:

Name	Type	Description
text	String	The source string to be used.
from	String	The string to be searches and replaced with the "to" argument.
to	String	The string used to replace the one specified in the "from" argument.


var
  str = 'Hello world!',
  result = app.strReplaceAll(str, 'o', 'e');

// Show "Helle werld!!"
alert(result);

App StrToBase64 method

Use this method to get a Base64 string representation of the provided string. This method is the counterpart of the app.base64ToStr() method. This method admits the below arguments:

Name	Type	Description
text	String	The source string to be encoded in Base64.


var
  str = 'Hello world!',
  result = app.strToBase64(str);

// Show "SGVsbG8gd29ybGQh"
alert(result);

App Base64ToStr method

Use this method to get a clear text from the provided Base64 encoded string. This method is the counterpart of the app.strToBase64() method. This method admits the below arguments:

Name	Type	Description
text	String	The Base64 string to be decoded.


var
  str = 'SGVsbG8gd29ybGQh',
  result = app.base64ToStr(str);

// Show "Hello world!"
alert(result);

App Serialize method

Use this method to get a string representation of an Array or Object variable. This method is the counterpart of the app.unserialize() method. This method admits the below arguments:

Name	Type	Description
value	Mixed	The Array or Object variable to be serialized.


var
  user = {"name": "John", "lastName": "Doe" },
  serializedUser = app.serialize(user);

// Show {"name": "John", "lastName": "Doe" }
alert(serializedUser);

App Unserialize method

Use this method to get an Array or Object variable from a previously serialized string. This method is the counterpart of the app.serialize() method. This method admits the below arguments:

Name	Type	Description
value	Mixed	The Array or Object variable to be serialized.


var
  serializedStr = '{"name": "John", "lastName": "Doe" }',
  user = app.unserialize(serializedStr);

// Show "John"
alert(user.name);

App RandomStr method

Use this method to get a random string of the specified length. The random string is taken from these characters map: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", so can contain one or more of these characters. This method admits the below arguments:

Name	Type	Description
length	Number	The number of characters to be returned. If you don't provide this argument the method returns a random string of 10 characters length.


// Show a 10 characters length random string
alert(app.randomStr());

App FormatStr method

Use this method to get a formatted string based in the provided string and the other arguments passed to the method. This method admits the below arguments:

Name	Type	Description
str	String	The string to be formatted, which must include any number of tokens in the form: {0}, {1}, {2}, etc. That tokens will be replaced with the other arguments passed to the method.
arguments	String	Other arguments passed to the method. The first argument (second of the method) will be used to replace the {0} token, the second argument replace the {1} token and so on.


// Show "Hello world!"
alert(app.formatStr('Hello {0}', 'world!'));

// Show "My name is John and my last name is Doe"
alert(app.formatStr('My name is {0} and my last name is {1}', 'John', 'Doe'));

App RandomNum method

Use this method to get a random number from 0 (zero) to the specified max number. This methods admits the below arguments:

Name	Type	Description
maxNum	Number	The max number to be get. This argument is optional, and, if you did not provide it, the method returns a random number from 0 to 100.


// Show a random number from 0 to 100
alert(app.randomNum());

App Beep method

Use this method to play a beep sound in the user device. Look also at the Apache Cordova Dialogs plugin, specifically to their app.cordova.dialogs.beep() method. This method don't require any arguments.


// Play a beep!
app.beep();

App PlaySound method

Use this method to simply play a sound. Additionaly this method returns an Audio JavaScript object, which offers lot of methods, properties and events, if you need to use it. You can also take a look at the Audio player control. This method admits the below arguments:

Name	Type	Description
mp3Url	String	The URL for the MP3 file to be played.
oggUrl	String	The URL of an alternative OGG file to be used if the platform don't support MP3 (recommended).


// Play a sound and get the Audio JavaScript object instance (for possible further use).
var audioJSObject = app.playSound(
  'app/audios/beep/beep.mp3',
  'app/audios/beep/beep.ogg'
);

App StopSound method

Use this method to stop a sound reproduction started by the app.playSound() method. For more you can take a look at the Audio player control. This method don't require any arguments.


// Stop the playing sound
app.stopSound();

Window Alert method

Use this method in order to show a native alert dialog with the specified message. This method admits the below arguments:

Name	Type	Description
message	String	The message to be show in the alert dialog.


// Show an alert message
window.alert('Hello world!');

Window Console info method

Use this method to output an information message in the browser or the debugger console. This method admits the below arguments:

Name	Type	Description
variable	Mixed	The variable or the message (string) that you want to output in the browser or debugger console.


// Output an information message in the browser or debugger console
window.console.info('Hello world!');

// You can output more than one variable / separated as arguments
window.console.info('Hello world!', myVar, myOtherVar);

Window Console error method

Use this method to output an error message in the browser or the debugger console. This method admits the below arguments:

Name	Type	Description
variable	Mixed	The variable or the message (string) that you want to output in the browser or debugger console.


// Output an error message in the browser or debugger console
window.console.error('Hello world!');

// You can output more than one variable / separated as arguments
window.console.error('Hello world!', myVar, myOtherVar);

Window Console debug method

Use this method to output a debug message in the browser or the debugger console. This method admits the below arguments:

Name	Type	Description
variable	Mixed	The variable or the message (string) that you want to output in the browser or debugger console.


// Output a debug message in the browser or debugger console
window.console.debug('Hello world!');

// You can output more than one variable / separated as arguments
window.console.debug('Hello world!', myVar, myOtherVar);

Window SetTimeout method

Use this method to execute certain code after the specified ammount of milliseconds. This method admits the below arguments:

Name	Type	Description
callback	Function	The function to be executed after the specified milliseconds.
timeout	Number	The milliseconds for the timeout.


window.setTimeout(function () {

  // This alert is shown after 5 seconds
  window.alert('Hello from setTimeout!');

}, 5000);

Window SetInterval method

Use this method to execute certain code every the specified milliseconds interval. This method returns an interval reference that you can use with the clearInterval() method. This method admits the below arguments:

Name	Type	Description
callback	Function	The function to be executed at every interval of the specified milliseconds.
interval	Number	The milliseconds for the interval.


var
  myInterval = window.setInterval(function () {

    // This alert is shown every 5 seconds
    window.alert('Hello from setInterval!');

  }, 5000);

Window ClearInterval method

Use this method to stop the execution of the interval previosly returned by the setInterval() method. This method admits the below arguments:

Name	Type	Description
intervalRef	Number	The interval reference that we get before when calling the setInterval() method. This method returns an interval reference that you can use with the .


// Clear / stop the previously established interval
window.clearInterval(myInterval);