DecSoft App Builder

Dropdown description

A Dropdown control has a similar aspect and share some properties with the Dropdown control, but, when the Dropdown control is pressed by the user, an associated menu of items appear, so the user can press one of these items, and we can do whatever thing depending on what item has been pressed.

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

Dropdown CSS rules

This control has a default style, and, some control JavaScript properties (see below), can also changes the control style, not to mention the Classes property, that you can use to establish one or more CSS classes to be applied to the control.

In addition to that style, you can also set custom CSS rules for the control by using the IDE controls style inspector. If this is not enough, you can include any number of CSS stylesheets in the app by using the app files manager.

If you want to use CSS stylesheets, you need to know how to refer to the control, so take a look at the Runtime selectors help topic.

Dropdown at designtime

The Dropdown control put at your disposition the below designtime properties or variables. Designtime means here that these properties are only available in designtime and not in runtime.

Dropdown at runtime

The Dropdown control put at your disposition the below runtime properties or variables. You can set almost all these variables in designtime, and, they are also available to be use when the app is running. Note that we named here these variables in a capitalized way, because is like you can see it in the designtime control's inspector, however, at runtime we use the lower camel case way.

Dropdown methods

The Dropdown control put at your disposition the below methods. You can use these methods in runtime in order to perform various control related tasks.

Dropdown events

The Dropdown control put at your disposition the below events handlers:

Dropdown designtime properties

Dropdown Top property

Designtime. Integer variable. The Top property stores the top position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Dropdown Left property

Designtime. Integer variable. The Left property stores the left position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Dropdown Width property

Designtime. Integer variable. The Width property stores the width of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Dropdown Height property

Designtime. Integer variable. The Height property stores the height of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Dropdown Locked property

Designtime. Boolean variable. The Locked property determines if the control can be moved or resized in app view designer or not. Set a "false" value mean the control can be moved and resized. Set a "true" value (by default) mean the control cannot be moved nor resized. Remember that this control property is only for designtime and is not available in runtime.

Dropdown runtime properties

Dropdown Name property

Runtime. String variable. The Name control property stores the name of the Dropdown control as you set in designtime. The Name property value must be unique for the same app view, dialog or frame, that is, it's possible to have more than one "dropdown1" in the app, if that controls resides in different app views, dialogs or frames. Note that you must consider this variable as read only: change the name of a control in runtime can cause unexpected results.

Dropdown Event property

Runtime. Mixed variable. The Event control property stores the "event" variable received in all the control events. This variable can contain the target (HTML element of the control) that fire the event and more useful stuff.

Dropdown Items property

Runtime. Array variable. The Items control property stores the items of the Dropdown menu. This is an array of objects variable, and every object represent an item in the Dropdown menu.

You can set this variable at designtime using the Dropdown items dialog.

At runtime, you can manipulate this variable like any other, and, additionally, you can also use the Dropdown control methods.

Dropdown Item property

Runtime. Object variable. The Item control property is an empty object by default but is filled in the control ItemClick event and stores the item that has been pressed by the user.

The Item object variable has the below properties at your disposition:

Name Type Description
class String The item class that has been pressed. This variable can have the values "item" or "header", since the "divider" items cannot be pressed by the user.
text String The item text that has been pressed. This variable stores the item or header text pressed by the user.
index Number The Dropdown menu item index that has been pressed. The Dropdown menu items starts by zero, so the first item has the index "0", the second item has the index "1", and so on.

Dropdown Direction property

Runtime. String variable. The Direction control property determines the direction in which the Dropdown menu items appear. By default this variable has a "dropdown" value, and, you can use one of the available "app.dropdownDir.*" constants in order to set this variable.

Dropdown RightAligned property

Runtime. Boolean variable. By default the Dropdown menu appear aligned to the left of the Dropdown button, but, you can set this variable to "true" so the Dropdown menu appear right aligned.

Dropdown Title property

Runtime. String variable. The Title Dropdown control property stores some small but descriptive text, mainly to be used to be show that text when the user place the mouse cursor into the control.

Dropdown Classes property

Runtime. String variable. The Classes control property stores one or more additionals CSS classes (space separated) to be applied to the control.

Dropdown Hidden property

Runtime. Boolean variable. The Hidden control property determines if the control appear visible to the user or not. Set to "true" to hide the control, or to "false" to show the control (by default).

Dropdown Disabled property

Runtime. Boolean variable. The Disabled control property determines if the control appear disabled to the user or not. Set to "true" to disable the control, or to "false" to enable the control (by default).

Dropdown Text property

Runtime. String variable. The Text control property stores the text that is shown in the control, like "Press me", "Click me", etc. This variable can contain some HTML if required.

Dropdown Kind property

Runtime. String variable. The Kind control property determine the style, to say like that, of the Dropdown, shown it "green", "red", etc. You can use one of the available app constants "app.kind.*" to set this variable, for example:

Dropdown LeftIcon property

Runtime. String variable. The LeftIcon control property allows to establish an optional icon to be show at the left of the Dropdown text. Remember that you are free to use any of the available icons in the Font Awesome library, which is one of the available libraries in the DecSoft App Builder created apps.

An icon picker dialog is available to set this variable and also ni the code editor.

Dropdown RightIcon property

Runtime. String variable. The RightIcon control property allows to establish an optional icon to be show at the right of the Dropdown text. Remember that you are free to use any of the available icons in the Font Awesome library, which is one of the available libraries in the DecSoft App Builder created apps.

An icon picker dialog is available to set this variable and also ni the code editor.

Dropdown Size property

Runtime. String variable. The Size control property determines the size of the Dropdown button font. By default the Dropdown have the "sm" (small) size, and, you can use the available app constansts "app.size.*" to set this variable, for example:

Dropdown TabIndex property

Runtime. Number variable. The TabIndex control property determines how the browser / platform must deal with the control when the user press the TAB key. The default value for this variable is "0" (zero), which means that the control should be focusable in sequential keyboard navigation, but its order is defined by the document's order.

You can set this variable to a value of "-1", which means that the element should not be reachable via sequential keyboard navigation, but could be focused with JavaScript or visually. It's mostly useful to create accessible widgets with JavaScript.

A positive value for this variable means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" would be focused before tabindex="5", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source.

You can use the TabIndex order dialog to set this variable.

Dropdown LeftBadge property

Runtime. String variable. This property stores an optional text or number to be show at the left of the control Text property.

Dropdown LeftBadgeKind property

Runtime. String variable. The LeftBadgeKind control property determine the style, to say like that, of the optional button left badge, shown it "green", "red", etc. You can use one of the available app constants "app.kind.*" to set this variable, for example:

Dropdown LeftBadgePilled property

Runtime. Boolean variable. The LeftBadgePilled property determines if the optional left badge must be show a bit more rounded and with a bit more left and right padding.

Dropdown RightBadge property

Runtime. String variable. This property stores an optional text or number to be show at the right of the control Text property.

Dropdown RightBadgeKind property

Runtime. String variable. The RightBadgeKind control property determine the style, to say like that, of the optional button right badge, shown it "green", "red", etc. You can use one of the available app constants "app.kind.*" to set this variable, for example:

Dropdown RightBadgePilled property

Runtime. Boolean variable. The RightBadgePilled property determines if the optional right badge must be show a bit more rounded and with a bit more left and right padding.

Dropdown runtime methods

Dropdown appendItem() method

Runtime method. You can use this Dropdown control method in order to append a new text item at the end of the Dropdown menu. This method admits the below arguments:

Name Type Description
text String The item text for the new Dropdown menu item. Can contain a bit of HTML if needed.
actived Boolean This is an optional boolean argument that determine if the item must appear actived or not. An actived text item appear with a different background color in the Dropdown menu.
disabled Boolean This is an optional boolean argument that determine if the item must appear disabled or not. A disabled text item appear grayed in the Dropdown menu and cannot be pressed by the user.

Dropdown appendHeader() method

Runtime method. You can use this Dropdown control method in order to append a new header item at the end of the Dropdown menu. This method admits the below argument:

Name Type Description
text String The item text for the new Dropdown menu header. Can contain a bit of HTML if needed.

Dropdown appendDivider() method

Runtime method. You can use this Dropdown control method in order to append a new divider item at the end of the Dropdown menu. This method has no arguments.

Dropdown insertItem() method

Runtime method. You can use this Dropdown control method in order to insert a new text item at the specified index of the Dropdown menu. This method admits the below arguments:

Name Type Description
index Number The item index for the new Dropdown menu item. The Dropdown menu items started by zero, so the first item is the zero index, the second item is the first index and so on.
text String The item text for the new Dropdown menu item. Can contain a bit of HTML if needed.
actived Boolean This is an optional boolean argument that determine if the item must appear actived or not. An actived text item appear with a different background color in the Dropdown menu.
disabled Boolean This is an optional boolean argument that determine if the item must appear disabled or not. A disabled text item appear grayed in the Dropdown menu and cannot be pressed by the user.

Dropdown insertHeader() method

Runtime method. You can use this Dropdown control method in order to insert a new header item at the specified index of the Dropdown menu. This method admits the below arguments:

Name Type Description
index Number The item index for the new Dropdown menu header item. The Dropdown menu items started by zero, so the first item is the zero index, the second item is the first index and so on.
text String The item text for the new Dropdown menu header. Can contain a bit of HTML if needed.

Dropdown insertDivider() method

Runtime method. You can use this Dropdown control method in order to insert a new divider item at the specified index of the Dropdown menu. This method admits the below argument:

Name Type Description
index Number The item index for the new Dropdown menu divider item. The Dropdown menu items started by zero, so the first item is the zero index, the second item is the first index and so on.

Dropdown removeItem() method

Runtime method. You can use this Dropdown control method in order to remove a specific menu item of the Dropdown menu. This method admits the below argument:

Name Type Description
index Number The index of the item to be removed. The Dropdown menu items started by zero, so the first item is the zero index, the second item is the first index and so on.

Dropdown events

Dropdown ItemClick event

The ItemClick event handler is fired when the user click or tap one of the items of the Dropdown menu. See also the available events variables.

Inside the ItemClick event we have at our disposition the Dropdown control Item variable. We can identify what item has been pressed by the user using this variable.

Dropdown Click event

The Click event handler is fired when the user click or tap into the Dropdown control. See also the available events variables.

Dropdown DblClick event

The DblClick (Double Click) event handler is fired when the user double click or double tap into the Dropdown control. See also the available events variables.

Dropdown Focus event

The Focus event handler is fired when the when the Dropdown control receive the user focus. This event is the partner of the Blur event that you can see below. See also the available events variables.

Dropdown Blur event

The Blur event handler is fired when the when the Dropdown control loss the user focus. This event is the partner of the Focus event that you can see above. See also the available events variables.

Dropdown MouseUp event

The MouseUp event handler is fired when the user up the mouse into the Dropdown control. See also the available events variables.

Dropdown MouseDown event

The MouseDown event handler is fired when the user down the mouse into the Dropdown control. See also the available events variables.

Dropdown MouseMove event

The MouseMove event handler is fired when the user move the mouse into the Dropdown control. See also the available events variables.

Dropdown MouseEnter event

The MouseEnter event handler is fired when the user enter the mouse into the Dropdown control. See also the available events variables.

Dropdown MouseLeave event

The MouseLeave event handler is fired when the user leave the mouse from the Dropdown control. See also the available events variables.

Dropdown ContextMenu event

The ContextMenu event handler is fired when the browser must shown the context menu of the the Dropdown control, which occur when the user click with the right mouse button into the Dropdown control. See also the available events variables.

Dropdown events variables

The below JavaScript variables are available in all the referred Dropdown control events handlers:

Name Type Description
event Mixed This variable is received in almost all control events. You can use this variable to stop the propagation of the event, to access the HTML element who fire the event and more.
self Object Stores the control object. This is a shortcut to the control variable, and it's available since we are talking about specific control events.
view Object

Stores the current app view or dialog. This variable allow us to access to that view or dialog properties and methods and also their controls properties and methods. For example, you can access to a control properties using the variable "view.yourControlName", suposing the control is named "yourControlName".

views Object Stores all the loaded app views. Note that loaded views mean that the app views has been previously show to the user. It's possible to access to the app view controls properties like "views.view1.yourControlName", suposing the view is named "view1" and the control is named "yourControlName". In the same way we can access to other controls of the view and to other loaded views and their controls.
frames Object Stores all the app frames. You can use this variable to access to all the app frames and their controls.
dialogs Object Stores all the app dialogs. You can use this variable to access to all the app dialogs and their controls.
app Object Stores all the app properties and methods. You can use this variable to access to all the app properties and app methods.