App Builder

Index of ContentsApp controls

App Builder allow us to use various controls in our apps, for example, input controls to show information or retrieve information from the app users. Buttons controls, allowing the user to perform some task when click on them. Non visuals controls like Timer or HttpClient, which allow us to perform certain task in time intervals or to send HTTP requests from our apps, etc., etc. Remember also that App Builder include numerous app samples, which try to show us how these controls can be used. Access the app samples from the program File → Samples menu.

App Builder controls for apps

All controls

Buttons

Inputs

Additional

Non visuals

Design

General considerations

Below we can see some general considerations, variables, tips, etc., which are shared by almost all the available app controls.

Names and HTML ID's

It's a good practice to maintain our app controls well identified. For example, if we drop an Text input control into our app, their default name can be "Input1". This is a valid control identifier and can be used without rename, however, a more good control name can be something like "UserNameInput". Doing that we can refer to the control, for example, to access the control variables, in a better and more comfortable way. Also, remember that our app control names are used to identify the controls in our apps HTML code.

Control's variables

Most App Builder controls exposes certain variables which can be accessed or updated to achieve our controls behaviour. Access these variables from our app script code it's very simple, for example, suposing a Text input control named "UserNameInput" we can retrieve or set their value variable in this way:

// Set the input control value
SetVar "[UserNameInput.Value]" "New value" "String" 

// Show the input control value
AlertBox "Hello [UserNameInput.Value]" "info"

As you can see above, what we need to access an specific control variable it's to use the control name following by a dot and the variable name. We can for example set the CSS classes of the above control using their "Classes" variable:

// Set the input control value
SetVar "[UserNameInput.Class]" "animated bounce" "String" 

Doing that our "UserNameInput" control CSS classes now become "animated bounce". However, note that manipulate the control "Class" variable overwrite possible existing classes.

We can deal with the control CSS classes in a more convenient way using actions like AddClass, HasClass, ToggleClass and RemoveClass.

Designtime variables

Some control variables which can be manipulated from the object inspector are considered designtime only variables, because show and allow us to view and edit the variables at designtime, but not when our app is running. Below we found these controls designtime variables, which all App Builder controls have.

Variable name Variable type Description
Top Number The control top position in pixels.
Left Number The control left position in pixels
Width Number The control width size in pixels
Height Number The control height size in pixels
Position String One of these possible values: pTop, pRight, pBottom, pLeft, pClient, pCustom
Name String An unique, valid, convenient identifier for the control. The control name is used also in the app HTML as the control identifier.
When your app is running you can retrieve the top, left, width and height properties of a control using the GetStyle action and also can set these control properties using the SetStyle action.

Common control variables

Since most of App Builder various variables names we want to refer here such common control variables. Note however that some controls may do not have some specific common variable, for example, a non visual control do not have the CSS "Classes" variable.

Variable name Variable type Description
Control.Classes String Space separated CSS classes. Access this control variable to retrieve or set the control specific CSS style classes.
Control.Hidden String This variable can contain a non empty string value in order to indicate that the control must be hidden. An empty string value for this variable mean the control must be visible.
Control.Disabled String This variable can contain a non empty string value in order to indicate that the control must be disabled. For example, an input control can be disabled in order to disallow the user to enter any data into that control. An empty string value for this variable mean the control must be enabled.
Control.PastedText String Contains the pasted text into the control. This variable is available in the Paste events of most of the text inputs controls and the Textarea control.
Control.TabIndex Number Determine the tab index of the control in the app view. "-1" by default, mean that we don't care about the control tab index. 1 or greater to indicate the control tab order.
Control.Title String Determine the title of the control, which is an small text that some browsers put over the control when the mouse enter it, as a little help about the control and his behaviour.
Control.TooltipPos String The control optional tooltip position. This variable can be one of these values: top, top-left, top-right, bottom, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top or right-bottom.
Control.TooltipText String The control optional tooltip text. This text that can appear when the user over the mouse into the control. Let empty if you don't want to use.
Control.PopoverPos String The control optional popover position. This variable can be one of these values: top, top-left, top-right, bottom, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top or right-bottom.
Control.PopoverText String The control optional popover text. This text that can appear when the user over the mouse into the control or when the control receive a click or tap event. Let empty if you don't want to use.
Control.PopoverTitle String The control optional popover title. This title that can appear above of the popover text when the user over the mouse into the control or when the control receive a click or tap event. Let empty if you don't want to use.
Control.PopoverEvent String The control optional popover event. This variable can be one of these vales: "mouseenter", "click", "outsideClick" and "focus". This variable determine when the popover appear to the user and when hide it.
Control.PlaceHolder String Available in most inputs controls, this variable can optionally contain a text to be show in the control when their "Value" variable is empty in order to help the user about what text the control requires. For example, if the control expect an user name, a possible "PlaceHolder" text can be "Enter your name here".
Control.Size String Available in most inputs controls, this variable determine the default size of the control. The possible values can be one of these: xs, sm, md and lg, for extra small, small medium, medium and large sizes, respectively. Note that these control sizes are controlled by CSS classes and therefore can be changed at runtime by changing the control CSS class.
Control.Event Object This variable is available in almost all control events and store a Javascript object which contains information about the executed control event. For more information take a look below at the "Event" variable section.
Even when you can use these control variables in order to manipulate it, we have available actions like Show, Hide, Enable, Disable, etc.

Common control events

Since most of App Builder various variables names we want to refer here such common control events. Note however that some controls may do not have some specific common event, for example, a non visual control do not have the "Click" event. Take a look at the "Event" variable section too.

Event name Description
Change A control fire this event when the user change the control value. For example, all input controls have the Change event.
Copy A control fire this event when the user copy some text from the control. For example, all input controls have the Copy event.
Cut A control fire this event when the user cut some text from the control. For example, all input controls have the Copy event.
Paste A control fire this event when the user paste some text into the control. See above the common control's variable "[Control.PastedText]". For example, all input controls have the Copy event.
KeyUp A control fire this event when the user press a key into the control.
KeyDown A control fire this event when the user release a key into the control.
Click A control fire this event when the user click or tap such control.
DblClick A control fire this event when the user double click or double tap such control.
MouseUp A control fire this event when the user do a mouse up in the control.
MouseDown A control fire this event when the user do a mouse down in the control.
MouseEnter A control fire this event when the user enter the mouse above the control.
MouseLeave A control fire this event when the user leave the mouse from the control.
Focus A control fire this event when the control get the user focus.
Focus A control fire this event when the control loss the user focus.
SwipeLeft A control fire this event when the user swipe left over the control.
SwipeRight A control fire this event when the user swipe right over the control.

You can put whatever App actions what you wanted in these events controls in order to be executed when the event is fired.

The "Event" variable

The app itself (in the [App.Event] global variable), the app views (in the [ViewName.Event] variable) and all the controls count with an "Event" variable. This variable is used to store the event information after an specific event is fired. For example, you can prepare some code to be executed when a button receive a "Click" event. In that event/code the "Event" variable is filled with a Javascript object that offer information about such specific event.

Remember the "Event" variable is an object, then you can access to the above properties by writing something like this:

AlertBox "Page X: [Button1.Event.pageX]" "info"

The above code show how we can access to the "pageX" property of the "[Button1.Event]" variable.

The following properties are availables in all browsers/platforms:

Property Description
target The DOM element that initiated the event. The target property can be the element that registered for the event or a descendant of it. It is often useful to compare Event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.
relatedTarget The other DOM element involved in the event, if any. For mouseout, indicates the element being entered; for mouseover, indicates the element being exited.
pageX The mouse position relative to the left edge of the document.
pageY The mouse position relative to the top edge of the document.
which For key or mouse events, this property indicates the specific key or button that was pressed. The Event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input. Event.which also normalizes button presses (mousedown and mouseupevents), reporting 1 for left button, 2 for middle, and 3 for right. Use event.which instead of event.button.
metaKey Indicates whether the META key was pressed when the event fired. Returns a boolean value ("true" or "false") that indicates whether or not the META key was pressed at the time the event fired. This key might map to an alternative key name on some platforms.

The following properties are also copied to the event object, though some of their values may be undefined depending on the event: altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, view, which.


Text input control

Use this control to show certain text information to the user or to retrieve text information from the user. Some mobile platforms show an on screen keyboard with all the available keys in order to fill a control like this.

For example, supose you have a control named "MyInput" in one of your app views. Then, the below action show to the user the value of that input:

AlertBox "[MyInput.Value]" "info"

And this other action establish the value for the same input:

SetVar "[MyInput.Value]" "New input value" "String"
Variable name Variable type Variable value
Control.Value String The control value. Use this control variable to get or set the control value, that is, the text which the control are currently show to the user.
Control.Report String This optional variable allow us to bind the control to a Report control. Doing this, for example, a Report control can show only records which match with certain text query. For more information see the Report control help.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Number input control

Use this control to show certain number information to the user or to retrieve number information from the user. Some mobile platforms show an on screen keyboard with only number keys in order to fill a control like this. Also some platforms allow the user to enter only numbers in this kind of controls.

Variable name Variable type Variable value
Control.Value Number The control value. Use this control variable to get or set the control value, that is, the number which the control are currently show to the user.
Control.Report String This optional variable allow us to bind the control to a Report control. Doing this, for example, a Report control can show only records which match with certain text query. For more information see the Report control help.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Email input control

Use this control to show email addresses to the user or to retrieve email addresses from the user. Some mobile platforms show an on screen keyboard specialized in this kind of controls. Also some platforms allow the user to enter only email addresses in this kind of controls.

Variable name Variable type Variable value
Control.Value String The control value. Use this control variable to get or set the control value, that is, the email address which the control are currently show to the user.
Control.Report String This optional variable allow us to bind the control to a Report control. Doing this, for example, a Report control can show only records which match with certain text query. For more information see the Report control help.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Password input control

Use this control to show passwords to the user or to retrieve passwords from the user. This control doesn't show the entered characters, but some kind of asterisk instead. Some mobile platforms show an on screen keyboard specialized in this kind of controls.

Variable name Variable type Variable value
Control.Value String The control value. Use this control variable to get or set the control value, that is, the password which the control are currently show* to the user.
Control.Report String This optional variable allow us to bind the control to a Report control. Doing this, for example, a Report control can show only records which match with certain text query. For more information see the Report control help.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Color input control

Use this control to show colors to the user or to retrieve colors from the user. Some platforms show a pick selector dialog for this kind of controls which allow us to choose a color. Some platforms render this control "colorized" with the selected color, or, anyway, show the selected color like: "#ffffff" for the white color and so on.

Variable name Variable type Variable value
Control.Value String The control value. Use this control variable to get or set the control value, that is, the color which the control are currently show to the user.
Control.Report String This optional variable allow us to bind the control to a Report control. Doing this, for example, a Report control can show only records which match with certain text query. For more information see the Report control help.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Phone input control

Use this control to show phone numbers to the user or to retrieve phone numbers from the user. Some mobile platforms show an specialized on screen keyboard for this kind of controls. Some platforms also may disallow the entering of other data than a phone number.

Variable name Variable type Variable value
Control.Value String The control value. Use this control variable to get or set the control value, that is, the phone number which the control are currently show to the user.
Control.Report String This optional variable allow us to bind the control to a Report control. Doing this, for example, a Report control can show only records which match with certain text query. For more information see the Report control help.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Date input control

Use this control to show a date to the user or to retrieve a date from the user. Some platforms show an specialized on datepickers for this kind of controls. Some platforms also may disallow the entering of other data than a date.

Variable name Variable type Variable value
Control.Value JS Date This control requires a Javascript Date variable as their value. You can specify an string in designtime using the format "yyyy-MM-dd", for example, "1974-12-05". In runtime you must set a Date variable, for example, using the DateToJSDate action.
Control.Report String This optional variable allow us to bind the control to a Report control. Doing this, for example, a Report control can show only records which match with certain text query. For more information see the Report control help.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

File input control

Use this input control to allow the user to choose a file from their disk, and also to get an image, audio or video capture. You can then send this file to the app server using actions like SimplePost or controls like the HttpClient.

Take a look at the App Builder included app samples that use a control like that to send files into the app server.
Variable name Variable type Variable value
Control.Capture Boolean This is a designtime only variable to specify that the control must let the user to directly use their device capabilities to take a capture for the file input. Set to "True" to activate it, set to "False" to deactivate.
Control.Accept String The Accept variable specifies the accepted types of files. You can specify here a file extension (.mp4 for example), "audio/*" (all sound files are accepted), "video/*" (all video files are accepted), "image/*" (all image files are accepted) or a valid media type with no parameters.
Control.Url String Available after the user select a file, this variable store the blob URL for the selected file. This can be useful to show in an Image control the selected image.
Control.Data String Available after the user select a file (and after the Read event too) this variable store the Base64 encoded of the selected file. Note the Read event is optional, since read a choosen file is more or less expensive depending on the file size.
Control.Value String The control value. This variable store the file path that the user choose.
Control.Value.name String Available after the user select a file, this variable store the name of the selected file.
Control.Value.size String Available after the user select a file, this variable store the size in bytes of the selected file.
Control.Value.type String Available after the user select a file, this variable store the MIME type of the selected file.

This control have this specific events ready to use:

Event name Description
Read This is an optional event that you can use to get the Base64 encoded of the selected file. If you put any code in this event, then, when the event is fired, you can play with the "[Control.Data]" variable (see above), which contains the Base64 representation of the file. This even is optional since larger files can take a while until become completely readed and not always we need the Base64 representation of the selected file.
You can assign to the "Image" variable of an Image control the value of the "Url" variable of this control, in order to show the selected image into the Image control.
The Capture variable allow us to specify we wanted to let the user to take a capture from their camera device, for example. To do this, we use this variable in conjuction with the Accept variable. For example, to let the user to take a camera picture use: Capture = True and Accept = image/*
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Range input control

Using this control you can show to the user a range input which allow to select values from 0 to 100. Platforms differs in how this control is rendered.

Variable name Variable type Variable value
Control.Value Number The control value. Use this control variable to get or set the control value, that is, the range number which the control are currently show to the user.
Control.Report String This optional variable allow us to bind the control to a Report control. Doing this, for example, a Report control can show only records which match with certain text query. For more information see the Report control help.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Textarea input control

Use this control when you want to show or retrieve multiple lines from the user. This control is similar than a Text control, but allow to show multiples lines instead of just one.

Variable name Variable type Variable value
Control.Value String The control value. Use this control variable to get or set the control value, that is, the lines text which the control are currently show to the user.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Radio input control

This control is similar than a Checkbox control, but only a radio control (of the same group) can be checked at the same time.

Variable name Variable type Variable value
Control.Value String The control value. Use this control variable to get or set the control value, that is, the lines text which the control are currently show to the user.
Control.Checked String The intention of this variable is to allow us to check or uncheck the radio control in designtime, however this variable doesn't work like expected in runtime. Take a look below to view how we can check or uncheck a radio control in runtime.
Control.Group String The Group variable allow us to group various radio controls, in the way than when one of these are checked, the others become unchecked. You can use a descriptive identifier for a group of radio controls and use more than one if you wanted to get various groups of radio controls. See below how this variable is useful to check or uncheck radio controls in runtime.

We can't use the Checked variable in order to check or uncheck a radio control. Instead of that, we need to use the Group variable and refer to a radio control value in order to check an specific radio control. Doing that it's not possible to have more than one radio control checked at runtime, which is the expected behaviour. Then supose you have two radio controls "RedRadio" and "BlueRadio" with the variable Group equals to "Color". Then you can check the "RedRadio" control in this way:

SetVar "[Color]" "[RedRadio.Value]"
Remember to take a look at the App Builder included app samples: some of them deal with this kind of controls and show how we can use it.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Checkbox input control

This control is similar than a Radio control, but multiple checkbox can be checked or unchecked independently.

Variable name Variable type Variable value
Control.Checked String Use this variable to check or uncheck a Checkbox control, and to know if the control is checked or not.

To check a Checkbox control you must use the "checked" value for their Checked variable, something like this:

SetVar "[MyCheckbox.Checked]" "checked"

On the contrary, if we want to uncheck a Checkbox control we must empty their Checked variable, something like this:

SetVar "[MyCheckbox.Checked]" ""
Remember to take a look at the App Builder included app samples: some of them deal with this kind of controls and show how we can use it.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Select input control

Use this control to allow the user to select one of various options. This control is binding with the appropiate Items Array variable, in which you can store the various items/options, and tell us what item is selected by the ItemIndex number variable.

Note that App Builder have dozens of actions to deal with Arrays variables, in runtime you can use these actions with the binding Array variable of this control in order to add new items, to remove existing items, etc. You can also establish the items of a Select control in designtime, just by using the object inspector and double clic the Items property.

Variable name Variable type Variable value
Control.Items Array This variable is an Array variable that contains the items that the Select control show to the user. You can use the App Builder Array related actions in order to play with this control variable, exactly in the same way than any other Array variable.
Control.ItemIndex Number This variable store the number of the selected item in the Select control. Since the Array variables index start by zero, this variable store zero if the first item is selected, "1" if the second item is selected and so on. If no item is selected this variable contains "-1".

For example, supose you have a "ColorSelect" control in one of your app views. Then we can add some items to it writing something like:

ArrayPush "[ColorSelect.Items]" "My new item"
ArrayPush "[ColorSelect.Items]" "My other item"

If you want to select "My other item" you can write something like this:

SetVar "[ColorSelect.ItemIndex]" "1" "Number"
If you wanted for a control which allow us to choose various options at a time, take a look at the MultiSelect control.
Remember to take a look at the App Builder included app samples: some of them deal with this kind of controls and show how we can use it.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Typeahead input control

This control is similar to the Text input control but allow us to provide the user with items which can be selected when type ahead in the control. For example, we can provide a list with the USA states and then, when the user type "A", the control popup show to the user states which contains the "A" letter.

Note that App Builder have dozens of actions to deal with Arrays variables, in runtime you can use these actions with the binding Array variable of this control in order to add new items, to remove existing items, etc. You can also establish the items of a Select control in designtime, just by using the object inspector and double clic the Items property.

Variable name Variable type Variable value
Control.Items Array This variable is an Array variable that contains the items that the Typeahead control show to the user. You can use the App Builder Array related actions in order to play with this control variable, exactly in the same way than any other Array variable.
Remember to take a look at the App Builder included app samples: some of them deal with this kind of controls and show how we can use it.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

MultiSelect input control

Use this control to allow the user to select one or more of various options. This control is binding with the appropiate Items Array variable, in which you can store the various items/options, and tell us what items are selectd by using the control SelItems variable.

Note that App Builder have dozens of actions to deal with Arrays variables, in runtime you can use these actions with the binding Array variable of this control in order to add new items, to remove existing items, etc. You can also establish the items and selected items of a MultiSelect control in designtime, just by using the object inspector and double clic the Items or SelItems properties.

Variable name Variable type Variable value
Control.Items Array This variable is an Array variable that contains the items that the MultiSelect control show to the user. You can use the App Builder Array related actions in order to play with this control variable, exactly in the same way than any other Array variable.
Control.SelItems Array This variable store the selected items in the MultiSelect control. This variable is empty if no items are selected, or contains the selected items text. You can use this variable at runtime to set the selected items programatically or to retrieve what items are selected in the MultiSelect control.

For example, supose you have a "ColorsSelect" control in one of your app views. Then we can add some items to it writing something like:

ArrayPush "[ColorsSelect.Items]" "Red"
ArrayPush "[ColorsSelect.Items]" "Blue"
ArrayPush "[ColorsSelect.Items]" "Green"

If you want to select "Red" and "Green" you can write something like this:

ArrayPush "[ColorsSelect.SelItems]" "Red"
ArrayPush "[ColorsSelect.SelItems]" "Green"
If you wanted for a control which allow us to only on option at a time, take a look at the Select control.
Remember to take a look at the App Builder included app samples: some of them deal with this kind of controls and show how we can use it.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Push button control

This control can be clicked by the user in order to execute certain actions. This control have most of the control's common events.

Variable name Variable type Variable value
Control.Badge Mixed An small string or a number to be show at the right of the button text.
Control.Icon String The name of an icon to be show at the left of the button text. At designtime you can use the object inspector to open the Icon picker dialog in order to set this control variable. At runtime you can manipulate this variable in order to change the button icon if you wanted.
Control.Kind String The name of the button kind. This variable can contain one of these possible values: "default", "primary", "success", "info", "danger", "warning" or "link". These values determines how the button is show to the user.
Control.Size String This variable can contain one of these values: "xs", "md" or "lg", indicating we wanted an extra small, medium or large button, respectively.
Control.Text String This variable store the button text and this text allow HTML tags in order to enhance it.

Note that "Kind" and "Size" variables are not available in runtime. If you want to change the kind or size of a button you can do it in runtime by using the appropiate CSS classes: "btn-xs", "btn-md", "btn-lg" and "btn-default", "btn-primary", "btn-success", "btn-info", "btn-danger" and "btn-warning". For example, if you want to set the "danger" kind and an "extra small" size of a button in runtime you can write something like this:

AddClass "MyButtonName" "btn-xs btn-danger"
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Toggle button control

This control is similar than the Push button control and just add a Checked variable which determine if the button is checked or not, in a similar way than the Checkbox control. This control have most of the Push button control's variables and events, so take a look at them. This control have most of the control's common events too.

Variable name Variable type Variable value
Control.Checked String This variable store "checked" if the toggle button is checked or an empty string when the toggle button is unchecked. You can set this variable to "checked" to check the button or just set this variable empty to uncheck the button.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

HTML control

Probably this can be one of the most useful controls in App Builder. You can use an HTML control to put whatever HTML you wanted in your app. With the help of the HTML Editor incorporated in the program, you can use this control to put headings, paragraphs, lists or whatever you wanted. This control HTML allow the use of app variables, and you can use it, for example, to retrieve certain remote content and put directly on the appropiate variable into the HTML control.

The HTML editor which App Builder incorporate try to help you in the use of headings, aligned text, etc. Remember anyway that our apps uses the Bootstrap CSS and the Animate.css frameworks, and then all their stuff in form of useful CSS classes are available to us in our apps. We carefully recommend the study the Bootstrap CSS framework, at least, in order to disccover useful CSS classes availables and ready to use in our apps.

Variable name Variable type Variable value
Control.Html String This variable contains the HTML contents of the control. You can use app variables inside the HTML if you needed.

Note that if you wanted to use and HTML tag with an SRC attribute (like in an IMG or IFRAME HTML tags) with an app variable, you need to use the AngularJS attribute "ng-src" instead "src", for example:

On the other hand, if your "ng-src" attribute must contain an external URL (not an image URL from your app, for example), you probably need to use the AngularJS "trustSrc" function like in the below code:

Take a look at the below action. The SimpleGet action retrieve the response from an HTTP GET request and put such response in the specified variable. Since we indicate the HTML variable of an HTML control, the HTTP response are stored directly into such control and then is show to the user.

SimpleGet "http://www.yourappserver.com/getsomething" "[MyHtmlContentVar]"
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Chart control

This control allow us to show up to six diferent charts in our apps. We can determine the chart kind at designtime and also can change at runtime. Note that single data charts (Pie, Doughnut and PolarArea) can be fully setup in designtime, but multiple data charts (Bar, Line and Radar) need some additional code in runtime. This control have most of the control's common events.

Variable name Variable type Variable value
Control.Legend Boolean Determine if the Chart control must show legends or not. This is a designtime variable and changes in runtime do not affect the Chart control at all.
Control.Responsive Boolean Determine if the Chart control must be responsive to screen sizes or not. This is a designtime variable and changes in runtime do not affect the Chart control at all.
Control.AspectRatio Boolean Determine if the Chart control must be maintain or not their aspect ratio when Responsive variable is "True". This is a designtime variable and changes in runtime do not affect the Chart control at all.
Control.Kind String Determine the Chart control kind. Can be one of these values: "Pie", "Doughnut", "PolarArea", "Bar", "Line" or "Radar".
Control.Labels Array Specify the Chart control labels. You can provide one or more string items for this array in designtime and also in runtime using the App Builder Array provided actions.
Control.Series Array Specify the Chart control series. You can provide one or more string items for this array in designtime and also in runtime using the App Builder Array provided actions.
Control.Data Array Specify the Chart control data. For single data charts (Pie, Doughnut and PolarArea) you can set any number items to this array in designtime and also in runtime. For multiple data charts (Bar, Line and Radar) you need to leave this variable empty at designtime and setup at runtime with your series of data.
Control.Points Array

This variable is available for the Chart control Click event. The length of this variable (see ArrayLength action) determine if the user click in a point with data available or not. Every element of this array variable store an object with two useful properties: "label" and "value", which store the clicked Chart label and the clicked Chart data value.

The Chart control have this specific events ready to use:

Event name Description
Click This event is fired everytime the user tap or click the Chart control. Take a look above at the Chart Points variable, which is available when this event is fired.
Carefully take a look at the Charts app sample, in which you can learn how to use the six diferent chart kinds and also how we can deal with single data charts or multiple data charts at runtime. The Charts app sample also show to us how to deal with the Click event of the Chart control.

Gauge control

This control allow us to shown customizables gauges in our applications. We can customize the gauges in various ways using the control's variables you can see below in both designtime and runtime. This control have most of the control's common events.

Variable name Variable type Variable value
Control.Value Number Stores the control's current value.
Control.Width Number Specify the control's width.
Control.Height Number Specify the control's height.
Control.Title String The title which should be drawn on a gauge. Empty (no title) by default.
Control.Units String The units which should be drawn on a gauge. Empty (no units) by default.
Control.MinValue Number The minimal value which is used on a gauge bar. Default is "0".
Control.MaxValue Number The maximum value which is used on a gauge bar. Default is "100".
Control.ValueFormat String Specify the format for the gauge's value. By default it's "3.2", which means, "put tree main digits and two digits for the decimal part". We can ommit the decimal part setting this variable to "3", for example.
Control.MajorTicks String Space separated major tick marks. By default is "0 10 20 30 40 50 60 70 80 90 100".
Control.MinorTicks Number Number of minor ticks to draw between major ticks on a gauge bar. Default is 10.
Control.StrokeTicks Boolean The flag which identifies if the ticks bar should be stroked or not. By default is "true".
Control.Glow Boolean Indicates if shadow glow should be drawn for gauge plate or not. By default is "true".
Control.Animation String Determine the animation for the gauge's needle. Can be one of these values: "linear", "quad", "quint", "cycle", "bounce", "elastic".
Control.AnimationDelay Number Determine the animation start delay in milliseconds. By default is "10".
Control.AnimationDuration Number Determine the animation duration in milliseconds. By default is "200".
Control.Highlights String Comma separated highlights ranges and colors which could be drawn on a gauge bar. You can indicate one or more ranges separated by commas. Every range must contain the start and end numbers followed by the color. This time we must use colors in the "#f00" way and not "red". The default value for this variable is "20 60 #eee, 60 80 #ccc, 80 100 #999"
Control.PlateColor String Specifies the gauges plate color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.MajorTicksColor String Specifies the gauges major ticks color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.MinorTicksColor String Specifies the gauges minor ticks color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.TitleColor String Specifies the gauges title color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.UnitsColor String Specifies the gauges units color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.NumbersColor String Specifies the gauges numbers color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.NeedleStartColor String Specifies the gauges needle start color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.NeedleEndColor String Specifies the gauges needle end color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.NeedleShadowUpColor String Specifies the gauges needle shadow up color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.NeedleShadowDownColor String Specifies the gauges needle shadow down color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.ValueBoxRectStartColor String Specifies the gauges value box rectangle border start color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.ValueBoxRectEndColor String Specifies the gauges value box rectangle border end color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.ValueBoxBackgroundColor String Specifies the gauges value box background color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.ValueBoxShadowColor String Specifies the gauges value box shadow color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.ValueTextForegroundColor String Specifies the gauges value text foreground color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.ValueTextShadowColor String Specifies the gauges value text shadow color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.CircleShadowColor String Specifies the gauges circle shadow color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.CircleOuterStartColor String Specifies the gauges outer circle start color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.CircleOuterEndColor String Specifies the gauges outer circle end color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.CircleMiddleStartColor String Specifies the gauges middle circle start color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.CircleMiddleEndColor String Specifies the gauges middle circle end color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.CircleInnerStartColor String Specifies the gauges inner circle start color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.CircleInnerEndColor String Specifies the gauges inner circle end color. This can be a named HTML color or colors in the #ccc, #ccccc or rgba formats.
Control.ValueBoxVisible String Determine if the gauge's value box is visible or not. This variable can be "true" or "false" and it's "true" by default.
Control.ValueTextVisible String Determine if the gauge's value text is visible or not. This variable can be "true" or "false" and it's "true" by default.
Control.CircleOuterVisible String Determine if the gauge's outer circle is visible or not. This variable can be "true" or "false" and it's "true" by default.
Control.CircleMiddleVisible String Determine if the gauge's middle circle is visible or not. This variable can be "true" or "false" and it's "true" by default.
Control.CircleInnerVisible String Determine if the gauge's inner circle is visible or not. This variable can be "true" or "false" and it's "true" by default.
Take a look at the included Gauges application sample from the Menu - File - Samples to see various gauges running!

Label control

Use this control to associate a text label for one Input control like Text, Number, Select or Textarea controls. When the user click or tab into the label text then the associated input control give the user focus.

Take a look at the "Labels" app sample, which is included into the App Builder distribution.
Variable name Variable type Variable value
Control.Text String Contains the text you want to show into the label control
Control.Input String The name (ID) of the Input control to be associated with the label control.
Control.Icon String The name of an icon to be show at the left of the label text. At designtime you can use the object inspector to open the Icon picker dialog in order to set this control variable. At runtime you can manipulate this variable in order to change the label icon if you wanted.

Image control

Use this control to show images to the user. This control allow us to show a particular image to the user by specifiying the image URL. In designtime you can choose from the disk an image to be show, and the image path is stored in this control "Image" variable. When you compile the app, however, the refered image is copied into the "images" folder of your app and the "Image" variable store the appropiate relative URL of the image.

You can also use app files to incorporate images to your publication. These images are copied into the "images" directory and become available to use at runtime.

Variable name Variable type Variable value
Control.Image String This variable contain the image file path at designtime and the image URL at runtime. The URL can be relative to the app images directory or a remote URL to show a remote image.

You can use the SetVar action in order to set the "Image" variable, just like in the below code:

SetVar "[MyImage.Image]" "Url Of The Image" "String"

The Image control have this specific events ready to use:

Event name Description
Load This event is fired when the image assigned to the control is succesfully load into the control.
Error This event is fired when the image assigned to the control cannot be loaded, for example, because don't exists.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

IFrame control

This control allow us to show an specifi URL resource into our apps. For example, sites like Youtube.com allow us to share videos using HTML frames. These sites provide you with an specific URL which you can use for the "Url" variable of this control in order to show the specified video.

Variable name Variable type Variable value
Control.Url String This variable contains the resource URL to be show into the IFrame control.

You can use the SetVar action in order to set the "Url" variable, just like in the below code:

SetVar "[MyIFrame.Url]" "Url Of The Resource" "String"

This control have this specific events ready to use:

Event name Description
Load This event is fired when the URL resource is loaded into the IFrame control.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

MediaPlayer control

Use this control to reproduce audio and video files from your app. You can specify audio or video files included by your app or remote URL's as the source for your audio and video files.

Variable name Variable type Variable value
Control.Audio Boolean Established at designtime, this variable determine if the control act like an audio or a video player. Set to "true" to act like an audio player. Set to "false" to act like a video player.
Control.Autoplay Boolean Established at designtime, this variable determine if the reproduction must start when the MediaPlayer is ready or not. Set to "true" to start the reproduction automatically. Set to "false" when not.
Control.Loop Boolean Established at designtime, this variable determine if the reproduction must be repeated when complete. Set to "true" if you want to loop the reproduction. Set to "false" when not.
Control.Controls Boolean Established at designtime, this variable determine if the default media player controls must be shown or not. Set to "true" if you want to show the controls. Set to "false" when not.
Control.Source3gp String Set this control variable pointed to an URL or app's file path which contain the 3GP version of the file you want to reproduce into the MediaPlayer.
Control.SourceMp4 String Set this control variable pointed to an URL or app's file path which contain the MP4 version of the file you want to reproduce into the MediaPlayer.
Control.SourceOgg String Set this control variable pointed to an URL or app's file path which contain the OGG version of the file you want to reproduce into the MediaPlayer.
Control.SourceWebm String Set this control variable pointed to an URL or app's file path which contain the Webm version of the file you want to reproduce into the MediaPlayer.
You can put one or (recommended) more than one source files for the MediaPlayer. Then every platform in wich your app run choose the more appropiate source in order to be played.

This control have this specific events ready to use:

Event name Description
Ready This event is fired when the MediaPlayer control is ready to use.
CanPlay This event is fired when the media file is ready to be played.
Error This event is fired if some error occur in the MediaPlayer control.
Complete This event is fired when the reproduction of a file is end.
Update This event is fired when the MediaPlayer update their state.
ContextMenu This event is fired when the user right click over the video player for a context menu. You can disabled the default browser context menu by use the PreventDefault action.
In the "Update" event we can use certain actions related with the MediaPlayer useful to retrieve information like the current reproduction position. Don't forget to take a look at the MediaPlayer control related actions: MediaPlay, MediaPause, MediaStop, MediaProperty, MediaSeekPercent, MediaSeekSeconds, MediaSetVolume, MediaFullScreen and MediaSetSource .
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

WebCam control

This control allow us to use the appropiate HTML5 API in order to shows the user's WebCam video and capture images from it. This controls works in modern mobile and desktop browsers. This control do not require any Cordova's plugin in order to work properly in the supported browsers.

Variable name Variable type Variable value
Control.Error String Contains the possible error message if the browser do not support the right HTML5 API.
Control.VideoWidth Number This variable store the WebCam video pixels width in runtime. The variable is only available after the control's Metadata event is fired.
Control.VideoHeight Number This variable store the WebCam video pixels height in runtime. The variable is only available after the control's Metadata event is fired.
Take a look at the App Builder included WebCam app sample, in which this control is used along with their related WebCam* actions.

This control have this specific events ready to use:

Event name Description
Success This event is fired after call the WebCamCheck action, if the user agree to give us the permissions to deal with their WebCam.
Error This event is fired after call the WebCamCheck action, if the user DO NOT agree to give us the permissions to deal with their WebCam. In that case the control's Error variable contains "-1". In any other case the Error variable contain the reason of the error.
Metadata This event is fired when the WebCam video stream metadata are available. In this event (or after) we can access the control's "VideoWidth" and "VideoHeight" variables.

Progressbar control

Variable name Variable type Variable value
Control.Percentage Number Percentage of the progress in the progressbar. A number value from 1 to 100.
Control.Active Boolean Designtime boolean variable to establish if the progressbar is active or not. This variable is only used if the Striped variable is true.
Control.Striped Boolean Designtime boolean variable to establish if the progressbar is striped or not.
Control.BarText Text Determine the text to be shown into the middle of the control. Empty by default (no text to be show).
Control.Kind String The name of the progressbar kind. This variable can contain one of these possible values: "default", "primary", "success", "info", "danger" or "warning". These values determines how the progressbar is show to the user.

Note that "Kind", "Active" and "Striped" variables are not available in runtime. If you want to change the kind, active or striped classes of a progressbar you can do it in runtime by using the appropiate CSS classes. For example:

// Set the Progressbar1 active 
AddClass "Progressbar1" "active"

// Change the Progressbar1 kind
AddClass "Progressbar1" "progress-bar-success"

// Set the Progressbar1 striped
AddClass "Progressbar1" "progress-bar-striped"
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Report control

Using this control we can show in an HTML table the contents of a JSON source. Also we can show the JSON source inside another HTML elements, for example, by using the Bootstrap CSS grid system. The JSON source is retrieved from the URL variable specified in the Report control, and, we can prepare the HTML table template using the Html variable of the Report control.

The Report control automatically fetch the JSON from the specified Url variable, and, if you change such variable, again automatically the Report control fetch the JSON. The Url variable can point to an app JSON file or a remote resource which produce a JSON object as their response.

Alternatively we can also use the Report control Data variable to feed the Report. What we need is to assign to the Data variable some JSON data, for example, using the SimpleGet action.

Also using the Data variable and the Array and Object related actions we can assign to the Report control Data variable one or more objects to be reported. For example, the below code add a couple of objects to an "Report1" control:

// Create an Array specifiying the Report Data variable
NewArray "[Report1.Data]"

// Create an object to be added into the Data variable
NewObject "Record"
ObjectSetProp "Record" "ID" "1"
ObjectSetProp "Record" "Title" "Lorem ipsum"
ObjectSetProp "Record" "ImageUrl" "app/images/sample.png"
ObjectSetProp "Record" "Description" "Record one description"

// Add the created object to the Data variable
ArrayPush "[Report1.Data]" "[Record]"

// Create a second object to be added into the Data variable
NewObject "Record"
ObjectSetProp "Record" "ID" "2"
ObjectSetProp "Record" "Title" "Lorem ipsum"
ObjectSetProp "Record" "ImageUrl" "app/images/sample.png"
ObjectSetProp "Record" "Description" "Record one description"

// Add the second object to the Data variable
ArrayPush "[Report1.Data]" "[Record]"
We have two ways to feed the Report control: using the URL variable (to automatically retrieve a JSON response) and using the Data variable. Note that only if we choose the URL way the Success and Error event are take in count.

The Report control Html variable is the place to define our HTML table template and contains the JSON objects fields and values in the same way which are defined in the JSON source. For example, supose the below JSON source:

[
  {"ID": 1, "Name": "Jhon", "Sports": ["Futbol", "Running"]},
  {"ID": 2, "Name": "Abel", "Sports": ["Rugby", "Tenis"]}
]

In order to parse the above JSON source we can prepare the below template in the Report Html variable:

The below HTML table template must be repeated for all the records found in the JSON source. Note how we refers to the records values using the "Record" prefix and following by the record name, using exactly the same name defined in the JSON source. In other words, the "Record." is mandatory, but the "ID" and "Name" fields can vary, depending on the JSON source objects.

Note also that the above JSON source contains complex objects, in the sense that one of the object field contains an Array by itself. We can also deal with something like that in our HTML table template, writing something like this:

You can see how we show every Sport associated with a record by using the special "ng-repeat" attribute into a table row element. The most important part is the expression: "Sport in Record.Sports". This expression mean "For every field (Sport) in Sports (Record) repeat this table row".

Note that if you wanted to use and HTML tag with an SRC attribute (like in an IMG or IFRAME HTML tags) with a record item variable, you need to use the AngularJS attribute "ng-src" instead "src", for example:

On the other hand, if your "ng-src" attribute must contain an external URL (not an image URL from your app, for example), you probably need to use the AngularJS "trustSrc" function like in the below code:

Take a look at the App Builder included Reports app samples (Report, Report2, Report3, etc.), which show us the Report control in action.
Specifically the Report6 and Report7 app samples shown us how to use the "grid" wrapper instead o the "table" wrapper in the Report control.

The Report control have two other interesting variables, "Query" and "Order", which allow us to filter the HTML table records and show it in an specified order, respectively. The "Query" variable can contain an string value, which the Report control automatically use to find in every records fields in order to show it only if contains the specified query text.

The "Query" variable can be an string in order to search in the entire Report Data fields, or can be an object with one or more properties corresponding with the Report Data fields. In this last case the query is only performed over the specified Query object/Report Data fields.

For example, look at the below code:

In the above code, instead of use an string for the Report Query, we use an object with a "Name" property. Since the Report Data Array contains objects with such property, the above code filter the records by their "Name" property.

We can also perform negates filters/searchs, just by preceeding the search query by an "!" symbol. For example, the below code:

The above code perform a query/filter/search in a negate way, that is, the Report finally shown only records in which their "Name" property DO NOT exists the query string, in this case stored in the "[Input1.Value]" variable.

The "Order" variable can contain an string value, which the Report control automatically use to establish the order of the records in the HTML table. The value of the "Order" variable must be the name of a record, for example, this variable can contain "ID" or "Name" for the above JSON source, which mean the order are established by alfabetically by the ID or Name record fields.

An important point is that almost all input controls incorporates an "Report" variable, which can be linked with a Report control, in order to automatically take the order or the query from the input control. For example, suposing we have a text input named "Input1" and a Report control named "Report1", we can set the "Input1.Report" variable to "Report1.Query", and then, automatically, the value of the input is taken as the Report query, in order to filter the records HTML table.

Optionally we can prefix the Report's "Order" variable contents with a "plus" (+) sign to perform an ascending order, or with a "minor" (-) sign to perform the order in an descending way. By default the order is performed in an ascending way and we no need to prefix the "Order" variable with the "plus" (+) sign.

Other thing to note is related with the CSS classes and identifiers that App Builder put in the Report control HTML code. Basically every row in the Report have a CSS class named "ReportRow", where "Report" must be replace by the name of your Report control. Also every row in the Report have an identifier like "ReportRowN", where "Report" is the name of your control, and "N" is the row's index number. We can use this CSS classes an identifiers to perform some cute things in the Report, like activate rows when they are clicked or taped by the user.

Take a look at the App Builder included Report* samples, which show us the Report control in action!

The Report control have this specific variables:

Variable name Variable type Variable value
Control.Wrapper String This can be "table" or "grid". Using the first one the Report expect TD colums in the Report HTML property. By using "grid" instead the Report HTML can contains any HTML contents, but, preferably "DIV" with Bootstrap CSS grid system columns CSS classes.
Control.Index String This variable is available only inside the "RockClick" event (see below) and stores the row index clicked or taped by the user. Note the index starts by zero.
Control.Order String The name of a JSON source object field to use when ordered the Report HTML table. See above for details.
Control.Query String An string to use as the filter for the Report HTML table. See above for details.
Control.Url String The URL to retrieve the JSON source. See above for details.
Control.Data String The Report JSON data. We can use it at runtime to feed the Report. See above for details.
Control.Html String Contains the definition of the Report HTML table. See above for details. This variable is designtime only.
Control.Header String Can contain some optional HTML to be placed at the beginning of the Report contents. This variable is designtime only.
Control.Footer String Can contain some optional HTML to be placed at the end of the Report contents. This variable is designtime only.
Control.Loading String Contains a message ("Loading..." by default) to show when the report JSON is loading. This message also appear if the report can't show any record.
We can use the Loading variable in two ways. First the variable can contain a "Loading..." message, but, also we can use in the control Success, for example, in this way:
.Find if the Data variable contains some records
ArrayLength "[Report1.Data]" "[Result]"
If "[Result]" "==" "0"
  .When not, use the Loading variable to inform the user
  SetVar "[Report1.Loading]" "No records found" "String"
EndIf
Control.Record Object This variable contains the Record object which is clicked by the user. See below the "Row*" events for details.

The Report control have this specific events ready to use:

Event name Description
Succes This event is fired when the Report control receive an appropiate response from the specified URL HTTP request. When this event is fired you count with the variables "[ControlName.Status]" and "[ControlName.Data]" ("ControlName" is the name of the Report control), which contains the HTTP status code and the HTTP response respectively.
Error This event is fired when the Report control receive a wrong response from the specified URL HTTP request. When this event is fired you count with the variables "[ControlName.Status]" and "[ControlName.Data]" ("ControlName" is the name of the Report control), which contains the HTTP status code and the HTTP response respectively.
RowClick This event is fired when the user click in a row from the Report control HTML table. This event is also fired when we use the "grid" wrapper instead the "table" wrapper. When this event is fired the "Record" variable stores an object with the clicked Report's record. The properties of such record object depend on your JSON source. For example, if your records have an ID property, you can access to this property into this event from the variable: "[ReportName.Record.ID]". See the Report app sample to view in action this event. We have also available in this event the Report's "Index" variable, which stores the index of the clicked record. Note the index start by zero.
RowDblClick This event is fired when the user perform a "double click" in a row from the Report control HTML table. This event is also fired when we use the "grid" wrapper instead the "table" wrapper. When this event is fired the "Record" variable stores an object with the clicked Report's record. The properties of such record object depend on your JSON source. For example, if your records have an ID property, you can access to this property into this event from the variable: "[ReportName.Record.ID]". We have also available in this event the Report's "Index" variable, which stores the index of the clicked record. Note the index start by zero.
RowSwipeLeft This event is fired when the user swipe left a row from the Report control HTML table. This event is also fired when we use the "grid" wrapper instead the "table" wrapper. When this event is fired the "Record" variable stores an object with the clicked Report's record. The properties of such record object depend on your JSON source. For example, if your records have an ID property, you can access to this property into this event from the variable: "[ReportName.Record.ID]". See the Report app sample to view in action this event. We have also available in this event the Report's "Index" variable, which stores the index of the clicked record. Note the index start by zero.
RowSwipeRight This event is fired when the user swipe right a row from the Report control HTML table. This event is also fired when we use the "grid" wrapper instead the "table" wrapper. When this event is fired the "Record" variable stores an object with the clicked Report's record. The properties of such record object depend on your JSON source. For example, if your records have an ID property, you can access to this property into this event from the variable: "[ReportName.Record.ID]". See the Report app sample to view in action this event. We have also available in this event the Report's "Index" variable, which stores the index of the clicked record. Note the index start by zero.
Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Container control

This control is intented to contains other controls. Doing that we can obtain some beneficts like the hability to hide and/or show various controls at the same time, for example.

Remember to take a look at the Control's variables, Designtime variables, Common variables and Common events help sections.

Timer control

We can use the Timer control to execute certain piece of code in a determined time interval. This is a non visual control, that is, they are not visible in our apps.

The TimerStart, TimerStop and TimerInterval actions are intended to play with the Timer control.

The Timer control have this specific variables:

Variable name Variable type Variable value
Control.Interval Number The Timer control interval in milliseconds

The Timer control have this specific events ready to use:

Event name Description
Interval This event is fired every Timer control interval tick until the Timer are not stoped.
Take a look at the App Builder included Timer app example, which show us how to work with the Timer control.

Camera control

The Camera control offer to us the ability to capture an image from the device's camera or the device's gallery. This control requires to build our application using Apache Cordova and also the Camera plugin option must be checked in our app's options dialog. Depending on the "Destination" option (see below) the Cordova's Files plugin is also required. In order to take a picture we need to use the CameraGetPicture or the CameraDataToImage actions in combination with this control. To use this last action you need to check the Files plugin in the app's Cordova's options, in addition to the check the Camera plugin.

The Camera control have this specific variables:

Variable name Variable type Variable value
Control.Destination String This option can be "data_url" (by default) or "file_uri". If you use "data_url", after get an image, the "Data" variable store the Base64 representation of the selected image. If you use "file_uri", after get an image, the "Data" variable stores the file path for the image file. If you use the "file_uri" one you must use the CameraDataToImage action in order to upload the image using an HttpClient control.
Control.Quality Number A number between 1 and 100 to indicate the quality of the image retrieved. 50 (medium quality) by default.
Control.Source String Determines the source of the image and can be one of these possible values: "camera" or "photolibrary". "camera" is used by default.
Control.Direction String Determines the device's camera to be used. One of these possible values: "back" or "front". "back" is used by default.
Control.Corrected Boolean Set to "true" rotate the image to correct for the orientation of the device during capture. Set to "false" to no rotation. Default value is "true".
Control.TargetWidth Number If they are different than "-1" indicates we wanted an scaled image using this desired width. "-1" is used by default, which means no image scaling. Note this variable do not take effect if you choose "photolibrary" for the Source variable.
Control.TargetHeight Number If they are different than "-1" indicates we wanted an scaled image using this desired height. "-1" is used by default, which means no image scaling. Note this variable do not take effect if you choose "photolibrary" for the Source variable.
Control.Data String This variable is available after the Camera control Success event and store the Base64 of the final image or the image URL, depending on the Destination variable. We can use this to show it in an Image control or just upload the image to our app's sever.
Control.Error String This variable is available after the Camera control Error event and store "-1" if the Camera plugin is not available or our application is not build with Apache Cordova. In any other case this variable store an device's error message.

The Camera control have this specific events ready to use:

Event name Description
Success This event is fired when the user take or choose a picture and then close the camera application with the OK button.
Error This event is fired when the user cancel the camera application or if an error occur.
App Builder includes various Camera* app samples with their installation. Please, take a look at them to discover how to use the Camera control and their related actions.

Recorder control

The Recorder control allow us to record audio and video from the user's device. This control requires to build our application using Apache Cordova and also the Recorder plugin option must be checked in our app's options dialog. In order to record we must use the RecorderGetAudio or the RecorderGetVideo actions in combination with this control. We can also use the RecorderDataToFile action. To use this last action you need to check the Files plugin in the app's Cordova's options, in addition to the check the Recorder plugin.

The Recorder control have this specific variables:

Variable name Variable type Variable value
Control.Quality Number Used only for the Android platform, this variable can be 1 or 0 and determine the quality of the video. 1 means high quality, and 0 means a less quality and video size.
Control.FileName String This variable is available after the Recorder control Success event and store the recorded file name.
Control.FilePath String This variable is available after the Recorder control Success event and store the recorded file path.
Control.FileSize Number This variable is available after the Recorder control Success event and store the recorded file size in bytes.
Control.FileDate Number This variable is available after the Recorder control Success event and store the recorded file last modified timestamp.
Control.Data Object This variable is available after the Recorder control Success event and store the recorded data. We can use this variable along with the RecorderDataToFile action in order to get a file ready to be upload with an HttpClient control.
Control.Error String This variable is available after the Recorder control Error event and store "-1" if the Recorder plugin is not available or our application is not build with Apache Cordova. In any other case this variable store an device's error object which contains a "code" property with more information about the error. See the "Recorder" app sample for details.

The Recorder control have this specific events ready to use:

Event name Description
Success This event is fired when the user take or choose a picture and then close the camera application with the OK button.
Error This event is fired when the user cancel the camera application or if an error occur.
App Builder includes various Camera* app samples with their installation. Please, take a look at them to discover how to use the Camera control and their related actions.

Watcher control

We can use the Watcher control to execute certain piece of code when a particular app variable changes. This is a non visual control, that is, they are not visible in our apps.

The WatcherStart, WatcherStop and WatcherVariable actions are intended to play with the Watcher control.

The Watcher control have this specific variables:

Variable name Variable type Variable value
Control.Variable String The variable name to be observed by the Watched control
Control.OldValue String Available in the control Change event, this variable contains the associated variable value before the change.
Control.NewValue String Available in the control Change event, this variable contains the associated variable value after the change.

The Watcher control have this specific events ready to use:

Event name Description
Change This event is fired when the Watcher control detects a change in the observed variable. When this event is fired you count with the variables "[ControlName.OldValue]" and "[ControlName.NewValue]" ("ControlName" is the name of the Watcher control), which contains the observed old variable value and the observed new variable value respectively.
Take a look at the App Builder included Watcher app example, which show us how to work with the Watcher control.

Hotkeys control

We can use the Hotkeys control in order to be advised when certain hotkey combination is pressed by the user. We can add one or more hotkeys combinations in both designtime and runtime. To bind certain hotkey combination we just need to add a new item into the control Hotkeys Array variable of the control. In the same way, to unbind a hotkey combination we only need to remove such combination from the control Hotkeys Array variable.

The hotkeys combinations can be conformed by a single key ("i"), single keys combinations ("g i") and the usage of one or more of these special keywords: backspace, tab, enter, shift, ctrl, alt, capslock, esc, space, pageup, pagedown, end, home, left, up, right, down, ins, del, meta, for example: "shift+i", "left up right", "shift+ctrl+i" and so on.

The Hotkeys control have this specific variables:

Variable name Variable type Variable value
Control.Hotkeys Array This variable can be filled in designtime and runtime in order with one or more hotkeys combinations. Since the variable is an Array, we can use all the available Array related actions to deal with it.
Control.Hotkey String Available in the control Hotkey event, this variable store the hotkey combination pressed by the user, then we can use the same event to catch various hotkeys combinations by using the Hotkey variable.

The Watcher control have this specific events ready to use:

Event name Description
Hotkey This event is fired when the user press certain hotkey combination. We can look at the "[Control.Hotkey]" variable (see above) for the hotkey combination being pressed.
Take a look at the included Hotkeys app sample, which show us how to use the Hotkeys control in various ways.

Share control

We can use a Share control to store share information in designtime and also in runtime. Once we fill the share variables of the control we can use the ShareByControl action to share the information in the specified social web site.

This control works by open a popup window with the appropiate social site request URL. This work in all desktop and mobile browsers. If you plain to build your app using Apache Cordova, remember to add the Apache Cordova Browser plugin.

The Share control have this specific variables:

Variable name Variable type Variable value
Url String Mandatory. The URL we want to share.
Via String Optional. For some sites like Twitter.
Text String Optional. For some sites shared title or description.
Media String Mandatory for Pinterest, optional for Tumblr. URL of an image.
ImgCaption String Mandatory for Tumblr. A caption for the media image.
Hashtags String Optional. Used for Twitter. Comma separated tags/words.
Provider String Optional. One of these values: vk, digg, buffer, reddit, tumblr, twitter, meneame, linkedin, facebook, google+, pinterest, delicious or stumbleupon. "facebook" by default.
PopupWidth String Optional. Popup width. Default 500.
PopupHeight String Optional. Popup height. Default 500.
PopupToolbar String Optional. Popup toolbar. "yes" or "no". Default "yes".
PopupResizable String Optional. Popup resizable. "yes" or "no". Default "yes".
PopupScrollbars String Optional. Popup scrollbars. "yes" or "no". Default "yes".
App Builder include the "Share1" and "Share2" app samples. You can take a look at these samples in order to learn how to use this control and the related actions!

Pusher control

Using this control along the service provided by Pusher.com our app are ready to receive real time push notifications in a nutshell. Just drag a Pusher control in your app and provide your Pusher app key, a channel and event name. Prepare the control events and that's all! Your app are ready to receive push notifications/messages.

In order to connect the Pusher control and bind to the appropiate channel and event you must use the PusherConnect action specifiying the Pusher control name. You can also disconnect the Pusher (and no longer receive messages) by using the PusherDisconnect action.
Take a look also at the Pusher control video tutorial here. And don't forget also the Pusher app sample included with App Builder.
The Pusher control works in conjunction with the service provide by Pusher.com and provide you the client pair. You need to know how to implement the server pair but this is out of the scope of this help and you need to learn about in the Pusher Server API documentation.

The Pusher control have this specific variables:

Variable name Variable type Variable value
Control.AppKey String This variable are available in designtime and runtime and speficy your Pusher.com app key. Pusher.com allow us to control various apps, then we have an app key for every app.
Control.Channel String This variable are available in designtime and runtime and speficy your Pusher.com app channel. You can create various channels for your apps from the Pusher.com dashboard. A Pusher control allow you to receive messages for an specific channel. If you want to get ready for more channels, just use another Pusher control.
Control.Event String This variable are available in designtime and runtime and speficy your Pusher.com app channel event. You can create various channels events for your apps from the Pusher.com dashboard. A Pusher control allow you to receive messages for an specific channel and event. If you want to get ready for more channels and events, just use another Pusher control.
Control.ErrorCode String This variable is available in runtime from the Error event, which is fired when a connection error occur. See below more information about this Pusher control event. This variable store the connection error code.
Control.ErrorText String This variable is available in runtime from the Error event, which is fired when a connection error occur. See below more information about this Pusher control event. This variable store the connection error text.
Control.CurrentState String This variable is available in runtime from the State event, which is fired when a connection state change occur. See below more information about this Pusher control event. This variable the current connection state. See below the Connection states table for the possible values for this variable.
Control.PreviousState String This variable is available in runtime from the State event, which is fired when a connection state change occur. See below more information about this Pusher control event. This variable the previous connection state. See below the Connection states table for the possible values for this variable.
Control.Message String|Object This variable is available in runtime from the Message event, which is fired when a new push notification/message arrive to the app. See below more information about this Pusher control event. The content of this variable depends of what you send from the server. You can send a JSON object, for example, and the variable store that. Or you can simply send an string, and the variable store such simple string.

The Pusher control have this specific events ready to use:

Event name Description
Message This event is fired when your app receive a push notification/message for the Pusher control channel and event. You can use the Pusher control Message variable (see bellow) to access the content of the message, which depends on what you send from the server.
State This event is fired when the Pusher connection state changes and provide you information about such change into the Pusher control PreviousState and CurrentState variables. See below the table of the possible connection states.
Error This event is fired when the Pusher connection fails. The Pusher ErrorCode and ErrorText variables store information about the error.

The below table specified the possible values and meaning of every possible states availables from the Pusher control State event (see above).

State Description
initialized Initial state. No event is emitted in this state.
connecting All dependencies have been loaded and Pusher is trying to connect. The connection will also enter this state when it is trying to reconnect after a connection failure.
connected The connection to Pusher is open and authenticated with your app.
unavailable The connection is temporarily unavailable. In most cases this means that there is no internet connection. It could also mean that Pusher is down, or some intermediary is blocking the connection. In this state, Pusher will automatically retry the connection every ten seconds.
failed Pusher is not supported by the browser. This implies that WebSockets are not natively available, Flash is not available, and an HTTP-based transport could not be found.
disconnected The Pusher connection was previously connected and has now intentionally been closed.

HttpClient control

This control allow us to perform HTTP request from our apps, in order to retrieve something from our app server, retrieve the contents of an app file, or post data to our app server. This is a non visual control, that is, they are not visible in our apps.

The HttpExecute, HttpSetUrl, HttpSetMethod, HttpSetData, HttpClearData, HttpStatus and HttpResponse actions are intended to play with the HttpClient control.

The HttpClient control have this specific variables:

Variable name Variable type Variable value
Control.Url String Designtime only defined URL to be used when the HTTP request is executed.
Control.Method String Designtime only defined the HTTP method to use by HTTP request: GET, POST, etc.
Control.Transform String Determine the transformation kind over the HTTP request's data. Can be "data", "json" or "form". By default it's "data". Change to "json" if your server expect a JSON object. Change to "form" if your server expect HTML form encoded data.
Control.Request.url String The URL to be used when the HTTP request is executed.
Control.Request.method String The HTTP method to use by HTTP request: GET, POST, etc.
Control.Status Number After the Success or Error events are fired this variable contains the HTTP response status code.
Control.Response String After the Success or Error events are fired this variable contains the HTTP response contents.
Control.StatusText Number After the Success or Error events are fired this variable contains the HTTP response status text.

The HttpClient control have this specific events ready to use:

Event name Description
Succes This event is fired when the HttpClient control receive an appropiate response from the executed HTTP request. When this event is fired you count with the variables "[ControlName.Status]" and "[ControlName.Response]" ("ControlName" is the name of the HttpClient control), which contains the HTTP status code and the HTTP response respectively.
Error This event is fired when the HttpClient control receive a wrong response from the executed HTTP request. When this event is fired you count with the variables "[ControlName.Status]" and "[ControlName.Response]" ("ControlName" is the name of the HttpClient control), which contains the HTTP status code and the HTTP response respectively.
Various of the included App Builder app samples uses an HttpClient control and in particular you can take a look at the included HttpClient app example, which show us how to work with the HttpClient control. You can also be interested in SimpleGet and SimplePost actions.
If you receive an status equals to "0" (zero) this generally mean the HTTP response is empty. Remember you need to enable CORS (Cross-Origin Resource Sharing) in your server. Take a look at this website, which show us how to enable CORS in various kind of servers and scripting languages like PHP.
Take a look at the "HttpJson" app sample to view the HttpClient control working with the "Transform" variable set to "json".

WebSocket control

You can use this control to establish bidirectional communications between your app and your some app WebSocket server. You can fill the WebSocket control variables (see below) and then execute the SocketOpen action to establish the connection with the server, the SocketSend action to send messages to the connected server and the SocketClose action to close a previoiusly established connection.

This control have various events (see below) in order to get ready when our app is connected, when a message is received from the server, when the connection is closed and if some error occur.

Take a look at the App Builder included WebSocket app sample, in which this action is used along other Socket* actions.

The WebSocket control have this specific variables:

Variable name Variable type Variable value
Control.Url String This variable store the URL of the WebSocket server to connect with. You can fill this variable in designtime (using the properties inspector) or in runtime, anyway, before call to SocketOpen.
Control.Protocols String A comma separated string with the optional protocols, which specifies a protocols that the server must support for the connection to be successful. You can leave this variable empty when no needed. This variable is available in both designtime and runtime.
Control.Status String This variable is only available in runtime and have a value of "0" indicates that the connection has not yet been established. A value of "1" indicates that the connection is established and communication is possible (then you can use the SocketSend action). A value of "2" indicates that the connection is going through the closing handshake. And finally a value of "3" indicates that the connection has been closed or could not be opened.
Control.Message String This variable is only available in runtime in the "On Message" event (see below), that is, when the app receive a message from the WebSocket server.
Control.Code String This variable is only available in runtime in the "On Close" event (see below) and store the code for the WebSocket connection close. See below the table of the possible values for this variable.
Control.Reason String This variable is only available in runtime in the "On Close" event (see below) and store the reason for the WebSocket connection close.

The WebSocket control have this specific events ready to use:

Event name Description
Open After we call the SocketOpen action, this event are fired when WebSocket connection is established.
Close This event occurs when connection is closed. See above the control "Code" and "Reason" variables, availables in this event.
Error This event occurs when there is any error in communication.
Message This event occurs when client receives data from server. The control variable "Message" contains the message server received message.

The WebSocket "ControlName.Code" table reference:

Status code Name Description
0999   Reserved and not used.
1000 CLOSE_NORMAL Normal closure; the connection successfully completed whatever purpose for which it was created.
1001 CLOSE_GOING_AWAY The endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection.
1002 CLOSE_PROTOCOL_ERROR The endpoint is terminating the connection due to a protocol error.
1003 CLOSE_UNSUPPORTED The connection is being terminated because the endpoint received data of a type it cannot accept (for example, a text-only endpoint received binary data).
1004   Reserved. A meaning might be defined in the future.
1005 CLOSE_NO_STATUS Reserved.  Indicates that no status code was provided even though one was expected.
1006 CLOSE_ABNORMAL Reserved. Used to indicate that a connection was closed abnormally (that is, with no close frame being sent) when a status code is expected.
1007   The endpoint is terminating the connection because a message was received that contained inconsistent data (e.g., non-UTF-8 data within a text message).
1008   The endpoint is terminating the connection because it received a message that violates its policy. This is a generic status code, used when codes 1003 and 1009 are not suitable.
1009 CLOSE_TOO_LARGE The endpoint is terminating the connection because a data frame was received that is too large.
1010   The client is terminating the connection because it expected the server to negotiate one or more extension, but the server didn't.
1011   The server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request.
10121014   Reserved for future use by the WebSocket standard.
1015   Reserved. Indicates that the connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).
10161999   Reserved for future use by the WebSocket standard.
20002999   Reserved for use by WebSocket extensions.
30003999   Available for use by libraries and frameworks. May not be used by applications.
40004999   Available for use by applications.

Motion control

This control allow us to retrieve the device motion in the x, y, and z directions. The Motion is not currently available in web browsers, we need to select the Motion plugin from the app options dialog and then compile our app using Apache Cordova. This is a non visual control which provide us with the appropiate Success and Error events which are fired after we call the Acceleration action.

The Motion control have this specific variables:

Variable name Variable type Variable value
Control.Error Number This variable is available inside the Error event and can contain "-1" if the Motion is not available.
Control.AccelerationX Number Amount of acceleration on the x-axis. (in m/s^2) (Number)
Control.AccelerationY Number Amount of acceleration on the y-axis. (in m/s^2) (Number)
Control.AccelerationZ Number Amount of acceleration on the z-axis. (in m/s^2) (Number)
Acceleration values include the effect of gravity (9.81 m/s^2), so that when a device lies flat and facing up, x, y, and z values returned should be 0, 0, and 9.81.

The Motion control have this specific events ready to use:

Event name Description
Error After we call the Acceleration action, this event can be fired and means an error occur. Take a look above at the control Error variable.
Success After we call the Acceleration action, this event can be fired and means we have the motion acceleration information ready to use. Take a look above at the control Accelerations variable.

Compass control

This control allow us to retrieve the direction that the device is pointing. The compass is not currently available in web browsers, we need to select the Compass plugin from the app options dialog and then compile our app using Apache Cordova. This is a non visual control which provide us with the appropiate Success and Error events which are fired after we call the CompassHeading action.

The Compass control have this specific variables:

Variable name Variable type Variable value
Control.Error Number This variable is available inside the Error event and can contain "0" (zero) which mean an internal error, or "20", which mean the compass hardware is not available.
Control.Heading Number This variable is available inside the Success event and can contain a number from "0" (zero) to "360", where "0" is north.

The Compass control have this specific events ready to use:

Event name Description
Error After we call the CompassHeading action, this event can be fired and means an error occur. Take a look above at the control Error variable.
Success After we call the CompassHeading action, this event can be fired and means we have the compass heading information ready to use. Take a look above at the control Heading variable.

Location control

This control allow us to retrieve the location of the device in which our app is running. This control can work using the appropiate HTML5 API in mobile and desktop browsers. Also you can check the Location plugin from Apache Cordova options of the app options dialog if you plain to compile your app using Apache Cordova, that is in order to use the device's native API instead the HTML5 API.

The Location control have this specific variables:

Variable name Variable type Variable value
Control.Error Number This variable is available inside the Error event and can contain "1", which means the acquisition of the geolocation information failed because the app didn't have the permission to do it. "2", which means the acquisition of the geolocation failed because at least one internal source of position returned an internal error. Or "3", which means the time allowed to acquire the geolocation was reached before the information was obtained.
Control.Timeout Number This variable setup the maximum length of time (milliseconds) that is allowed to pass from the call to Geolocation action until the corresponding Success event are fired. If the Success event is not fired within this time, the Error event is passed a timneout error code.
Control.Latitude Number This variable is available inside the Success event and contains a double representing the position's latitude in decimal degrees.
Control.Longitude Number This variable is available inside the Success event and contains a double representing the position's longitude in decimal degrees.
Control.Altitude Number This variable is available inside the Success event and contains a double representing the position's altitude in metres, relative to sea level. This variable can be null if the implementation cannot provide the data.
Control.Accuracy Number This variable is available inside the Success event and contains a double representing the accuracy of the latitude and longitude properties, expressed in meters.
Control.AltitudeAccuracy Number This variable is available inside the Success event and contains a double representing the accuracy of the altitude expressed in meters. This value can be null.
Control.Heading Number This variable is available inside the Success event and contains a double representing the direction in which the device is traveling. This value, specified in degrees, indicates how far off from heading due north the device is. "0" degrees represents true true north, and the direction is determined clockwise (which means that east is 90 degrees and west is 270 degrees). If speed is "0", heading is NaN. If the device is unable to provide heading information, this value is null.
Control.Speed Number This variable is available inside the Success event and contains a double representing the velocity of the device in meters per second. This value can be null.

The Location control have this specific events ready to use:

Event name Description
Error After we call the Geolocation action, this event can be fired and means an error occur. Take a look above at the control Error variable.
Success After we call the Geolocation action, this event can be fired and means we have the location information ready to use. Take a look above at the above control variables.

Clipboard control

This control can be used in in conjunction with the CopyToClipboard action in order to copy text into the clipboard.

Take a look at the Clipboard app sample included with the App Builder installation.

The Clipboard control have this specific variables:

Variable name Variable type Variable value
Control.Error String This variable is available inside the Error event and contains an error message.

The Clipboard control have this specific events ready to use:

Event name Description
Error After we call the CopyToClipboard action this event can be fired and means an error occur. Take a look above at the control Error variable.
Success After we call the CopyToClipboard action this event can be fired and means the copy to clipboard operation has been correctly executed.

Battery control

The Battery control works in Apache Cordova build apps and requires the Battery plugin.

The Battery control have this specific variables:

Variable name Variable type Variable value
Control.Level Number This variable is available in any of the control events and store the percentage of battery charge (0-100).
Control.IsPlugged Boolean This variable is available in any of the control events and store "true" if the device is plugged in or "false" when not.

The Battery control have this specific events ready to use:

Event name Description
Status This event fires when the percentage of battery charge changes by at least 1 percent, or if the device is plugged in or unplugged.
Low The event fires when the percentage of battery charge has reached the low battery threshold, device-specific value.
Critical The event fires when the percentage of battery charge has reached the critical battery threshold. The value is device-specific.

Barcode control

This control allow us to scan barcodes from our apps. This control requires out app to be compiled using Apache Cordova or Adobe Phonegap and requires to check the plugin Barcode from the app options dialog. This control is used in conjunction with the BarcodeScan action.

The Barcode control and related actions runs in Android, iOS, Windows 8, Windows Phone 8, BlackBerry 10 and Browser only when build our app using Apache Cordova, for example.

The Barcode control have this specific variables:

Variable name Variable type Variable value
Control.Error String This variable is available inside the Error event and contains an error message.
Control.Text String This variable is available inside the Success event and contains the barcode scaned text.
Control.Canceled String This variable is available inside the Success event and contains "true" or "false" meaning the user cancelled the scan or not.
Control.Format String This variable is available inside the Success event containing the format of the scan barcode. Can be one of these values: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, CODE_93, CODABAR, ITF, RSS14, RSS_EXPANDED, AZTEC or PDF417.
Control.Formats String This variable store the kind of barcodes we expected. By default this variable is empty and means "look for all supported barcodes". Only for Android you can set this this variable to "AZTEC" or "PDF417" in order to recognize this kind of barcodes.
Control.Prompt String This variable stores the message to be placed in the barcode scanner window. By default this variable is empty (no message is shown) but you can set with the message you want to shown.
Control.Orientation String This variable determine how the barcode window appear and can be "empty" (follow the device's rotation), "portrait" or "landscape". By default the variable is empty.

The Barcode control have this specific events ready to use:

Event name Description
Error After we call the BarcodeScan action this event can be fired and means an error occur. Take a look above at the control Error variable.
Success After we call the BarcodeScan action this event can be fired and means the barcode has been scaned or the user cancel the operation. Take a look at the above control available variables.

Comment control

We can use the Comment control to put notes and comments in our app views. This comments are not included in our apps in runtime but are visibles in designtime and can be useful to remember us something to do, etc.