The components PALETTE
is shown to the left of the phone, and includes the following mobile UI components:
- jQuery Mobile components.
- HTML5 components such as audio, video.
- Google Map component.
- Carousel component.
- HTML component – to write any custom HTML code.
- Name – the mandatory property used for identifying the component. When you drag and drop the component from the components
PALETTE
, Appery.io Visual Builder gives it the standard namemobile<component>_X
(e.g.mobilebutton_2
,mobileimage_15
,mobilenavbar_21
,mobileaudio_34
etc.). It’s beneficial to rename the components so you can easily identify them. - Visible – this box is checked by default, so every component on the page is visible by default. You may need to hide components (e.g. label with an ID, or an audio component that starts automatically and you don’t want the user to stop the sound). In this case, uncheck this box.
- Tab Index – specifies the order of a component when
<Tab>
is used for navigation. The value of this property should be unique for the component. It can be edited in thePROPERTIES
panel. If you enter an existing value, an error message appears:
- To change the tab order for several components, you can click
Change
, next to theTab Index
input field. A pop-up with a list of all components containing this property appears:
- By clicking “Up” and “Down” you can change the order of the components. If your components have
Name
properties with easy-to-understand values, it’s easy to identify the components correctly:
After you set the desired order, click Save. The value of this property changed for all the components in the list at once.
- Element icon. Some components support icons. To choose the icon you want, click on the icon thumbnail:
- If you don’t need an icon after all, click No icon.
A list of components and their unique properties are listed below:
Dialog
Dialog is a page that can be opened as pop-up window. Because it is a page, it can contain any other UI components. Dialog is not presented in UI components palette, so to create a dialog, select CREATE NEW > Dialog
. It’s a good idea to set a name for the dialog in PROPERTIES
, in order to make it easier to refer to.
There are few events that helps to open and close the dialog.
Opening dialog
To open the dialog follow the steps:
- To use this action, make sure at least one dialog exists in the project. You should decide on what event dialog window should be opened. For example, you can do this on button click:
- Open the
EVENTS
tab, located towards the bottom of the screen. Selectmobilebutton
forCOMPONENT
,Click
forEVENT
and for theACTION
selectOpen dialog
. Choose dialog name and click Save.
You can also open the dialog via JavaScript. Because dialog is a page, use navigateTo
command (change ScreenName
to your dialog name):
1 2 3 |
Appery.navigateTo('ScreenName', { transition: 'pop' }); |
Closing dialog
Closing dialog can be performed the same as opening, but change Open dialog
action to Close dialog
.
To close the dialog via JavaScript use the following code:
1 |
closePopup(); |
Button
The Button
component is one of the most commonly used. It can navigate to a page or link, copy a property to a local storage variable or set the other component’s property, open and close pop-ups, invoke a service or run JavaScript. The Button
component has the following properties:
- Position – select the position of the icon on the button. It can be right, left, top, bottom or notext (no text on the button):
- Swatch – select the button swatch if you want it to differ from the default type specified in the app settings.
API examples
Getting button label value:
1 |
Apperyio('button').text(); |
This is the same select without using the Apperyio(..)
function:
1 |
$('[dsid=button]').text(); |
The button label value must be changed through the ui-btn-inner
span, otherwise all the CSS formatting will be lost.
1 |
Apperyio('button').find('.ui-btn-inner').text('Stop watch'); |
This is the same select without using the Apperyio(..)
function:
1 |
$('[dsid=button]').find('.ui-btn-inner').text('New value'); |
Learn about Apperyio JavaScript library.
Visit the jQuery Mobile documentation for complete Button component API.
Group Buttons
The Group Buttons
component includes several buttons in a group. Each button has properties similar to those listed above. The Group Buttons
component has the following properties:
- Mini Version – check to make all the buttons in a group smaller.
- Orientation – select vertical (by default) or horizontal placement for the buttons:
- Items – select how many buttons you need in the group.
Visit the jQuery Mobile documentation describing the Controlgroup (Group Buttons) component.
Input
The Input
component allows you to receive data from the app user. It may be a name, login, email or password, a word, phrase, location or anything else you need in your app. The Input
component has the following properties:
- Text – write the text you want to appear in the input field once the page loads; make this property empty if you want the input field have placeholder text:
- Placeholder – if you want the text disappear once the user starts typing, write the placeholder text in this field:
- Type – select the type of the input text. If
password
is selected, the entered text is shown as dots:
If file
is selected, then the new check box Мultiple
appears. Selecting this check box allows you to upload multiple files at once:
API examples
Getting input value:
1 |
Apperyio('input').val(); |
This is the same select without using the Apperyio(..)
function:
1 |
$('input[name=input]').val(); |
Setting input value:
1 |
Apperyio('input').val('New value'); |
This is the same select without using the Apperyio(..)
function:
1 |
$('input[name=input]').val('New value'); |
Learn about the Appery.io JavaScript library.
Visit the jQuery Mobile documentation for complete Input, Search and Textareas API.
Text Area
The Text Area
component allows the app user to enter text. It has the following properties:
- Text – write the text you want to appear in the text area. This text may not be a placeholder, so it may not disappear by itself, but can be cleared if needed.
- Placeholder – write the placeholder text you want to appear in the text area; the
Text
property should be empty. - Mini Version – check if you want to decrease the text size.
API examples
Getting the text area value:
1 |
Apperyio('text_area').val(); |
This is the same select without using the Apperyio(..)
function:
1 |
$('textarea[name=text_area]').val(); |
Setting the text area value:
1 |
Apperyio('text_area').val('New value'); |
This is the same select without using the Apperyio(..)
function:
1 |
$('textarea[name=text_area]').val('New value'); |
Learn about Appery.io JavaScript library.
Visit the jQuery Mobile documentation for complete Input, Search and Textareas API.
Datepicker
The Datepicker
component is very helpful when the app user needs to enter a date.
Overview
The Datepicker
component has the following properties:
- Date Format – you can change the standard
mm/dd/yy
order of the elements to any you like, but there are some notes you should know:- Only slash
/
or dash-
may be used as separators. - Only two symbols must be specified to each date component, although in your app you will see a four-digit year.
- Appery.io database date format corresponds to
yy-mm-dd
.
- Only slash
- Default Date – by default the current date is set, but you can change this setting.
- Min Date – the dates before the one set in this field will be unselectable:
- Max Date – the dates after the one set in this field will be unselectable.
- First Day – you can select the first weekday:
Sunday
(default) orMonday
. - Day Names – you can change day names to symbols or other names if your language differs from English:
Label
The Label
component is used to show information to the app user. The Label
component has the following properties:
- Text – write the text you want to appear when the page loads.
- Font Face – select the font name to be used for the text in the
Label
component. - Font Color/Size – specify the color and the size of the symbols in the
Label
component. - Font – define if the text font will be bold, italic, underlined, etc.
- Align – define if the text alignment in the component will be left, right, center or justify. By default, it is left.
Link
The Link
component is similar to the Label
component. The difference is that upon clicking the Link
component, the user will navigate to the specified URL. The Link
component has the following properties:
- Text – write the link text here.
- URL – specify the destination of a link here.
The Font Face
, Font Color/Size
, Font
and Align
properties are the same the Label
component has.
Visit the jQuery Mobile documentation describing the Link component.
Radio
The Radio
component is a group of options where only one may be checked. The Radio
component has the following properties:
- Options Count – define the number of alternatives from which to choose.
- Orientation – select vertical (default) or horizontal placement of the options:
When vertical orientation is chosen, a circular hole precedes the description and the selection is marked with a dot in it. When horizontal orientation is chosen, a circular hole is absent and the selected item is highlighted:
- Mini Version – check to make all the options in a group smaller.
Each option in the Radio
component looks similar to the Button
component, but the properties are different:
- Value – the value which will be set if the option is selected.
- Text – the description of the selection; by default it is the same as the value.
- Selected – check if you want this option to be selected by default. Once
Selected
is checked for one option, it will become unchecked for the rest of the options.
API examples
Getting the radio group selected value:
1 |
$('input[name=radio_group]:checked').val(); |
Getting the radio group item value:
1 |
Apperyio("mobileradiobutton_5").find('input[type="radio"]').val(); |
Setting the radio group selected value:
1 2 |
$('input[name="radio_group"][value="1"]').attr('checked', true); $('input[name="radio_group"]').checkboxradio("refresh") |
Setting the radio group item text:
1 |
Apperyio("mobileradiobutton_5").find(".ui-btn").text("Hello world"); |
Learn about the Appery.io JavaScript library.
Visit the jQuery Mobile documentation for information about the Checkbox and Radio API.
Setting a default selection via JavaScript
Here is how you can set a default selection with JavaScript:
1 |
$('[dsid="button3"]').find('input').prop("checked", true).checkboxradio("refresh"); |
Make sure that when you’re using this JS, the third radio button is named “button3.” You can place this code, for example, for the startScreen
load
event:
Checkbox
The Checkbox
component is a group of options where one or more options may be checked. The Checkbox
component has the same properties as the Radio
component:
Each option in the Checkbox
component has the same properties as the Radio
component options. The only difference is that any number of options may have the Selected
property checked.
Visit the jQuery Mobile documentation describing the Checkbox and Radio components.
API examples
Getting the checkbox checked value:
1 |
$('input[name=check_box_group]:checked').val(); |
Getting the checkbox item value:
1 |
Apperyio("mobilecheckbox_5").find('input[type="checkbox"]').val(); |
To verify that the the checkbox is checked, perform the following:
Under EVENTS
, add the next JavaScript to: mobilecheckboxgroup_Name > Value change > Run JavaScript
, and click Save:
1 2 3 4 5 |
var checkboxValue = $('input[name=mobilecheckboxgroupName]').is(':checked'); if (checkboxValue === true){ alert ("true");// returns true when checked }else{ alert ("false");}//returns false when unchecked |
Learn about the Appery.io JavaScript library.
Visit the jQuery Mobile documentation for information about the Checkbox and Radio API.
Slider
The Slider
component allows you to choose a numeric value by moving an indicator:
The Slider
component has the following properties:
- Max Value – the value set when the indicator is on the right end of the slider.
- Value – the default value.
- Min Value – the value set when the indicator is on the left end of the slider.
- Mini Version – check to make the
Slider
component smaller:
Visit the jQuery Mobile documentation describing the Slider and Toggle components.
Toggle
The Toggle
component allows you to switch between two values:
The Toggle
component has the following properties:
- Toggled – check to switch the toggle component on.
- Label On Text – text appearing when the toggle component is switched on.
- Label Off Text – text appearing when the toggle component is switched off.
API examples
Getting the toggle value:
1 |
Apperyio('toggle').val(); |
Setting the toggle value:
1 2 |
Apperyio("tog").val("off"); Apperyio("tog").flipswitch("refresh"); |
Learn about the Appery.io JavaScript library.
Visit the jQuery Mobile documentation for information about the Slider and Toggle API.
Select
The Select
component allows you to choose one item from a predefined set of values:
The Select
component has the following properties:
- Icon – select the icon to be shown on the component, or remove the icon. The selected icon appears only on the main component, not on the lines of the list.
- Position – select the icon position.
- Options – click Change to set labels and values of the list:
- Selected – choose the option to be selected by default.
- Native Menu – check to make the list look like a menu:
- Mini Version – check to make the
Select
component smaller. - Inline – check to locate several components in line:
Visit the jQuery Mobile documentation describing the Selectmenu component.
This dynamic select menu contains two drop-down lists. The second drop-down list depends on the value selected in the first drop-down.
1. Create a new page, and build the following UI:
Both components are Select
components. The first lists consists of: Fruits
, Vegetables
. On the PROPERTIES
panel, go to Options > Change
, and set the correct titles.
Set the component name to: list1
.
The second list consists of: Orange
, Apple
, Banana
, and the component name is: list2
.
2. Add a value change
event to the first list. Add Run JavaScript
to the event.
3. Add this JavaScript
, and then test the app.
1 2 3 4 5 6 7 8 9 10 11 12 |
var selectedValue = this.value; var data = { 'Fruits': ['Orange', 'Apple', 'Banana'], 'Vegetables': ['Onion', 'Carrot', 'Tomato'] }; var dropDown = $('[name=list2]'); dropDown.html(''); var newData = data[selectedValue]; for(i = 0; i < newData.length; i++) { dropDown.append('<option value="' + newData[i] + i + '">' + newData[i] + '</option>'); } dropDown.selectmenu('refresh'); |
List
The List
component shows a list of items:
The List
component has the following properties:
- Auto Divider – check to add a divider to the list. The divider shows the first letter of the item (or group of items, if they start with one letter):
- Split Button – check to split each button into two parts: label and icon. If the property is checked, each part has specific properties (these properties will be listed below) and can have their own events:
- Buttons Icon – select the default icon for list items.
- Buttons Swatch – select the default swatch for list icons. This property appears only when
Split Button
is checked:
- Placeholder – enter the text for the
filter
field. This property appears only whenData Filter
is checked:
- Items – set the number of items in the list.
- Linked – makes the list items active (checked by default).
List items have the following properties:
- Image Type – select whether you want to have images on the list items. You can select thumbnail image, icon image or no image:
- Image – click
Change
to upload or select the image. - Icon – click Inherit to choose an icon.
- Counter Value – the counter appears if the
Counter Visible
box is checked. - Counter Visible – check to make the
Counter
property visible. - Text – enter the text for the list item.
- Divider – check to highlight the item as a divider. When the
Auto Divider
list property is checked, this check box becomes inactive. If theDivider
property is checked, the following changes will appear:
If you check the
Auto Divider
list property after theDivider
property was checked for some items, these items will disappear from the list:
- If the
Split Button
list property is checked, you can define it for every list item’s unique icon and swatch:
To do this, select the list item button:
- Linked – makes the list items active or passive. This property inherit by default (takes value from
List linked
value). To turn off the inherit mode switch the toggle:
When this property is unchecked, the list item becomes passive and doesn’t react on hover. However, events still work. - Tab index – allows you to change item order by using the Up and Down buttons:
Set the Icon
and Swatch
properties.
You can add different events for the list item, and the list item button.
Visit the jQuery Mobile documentation describing the Listview components.
Image
The Image
component allows you to add custom images to your app. The Image
component has the following properties:
- Preserve Ratio – uncheck to change the image ratio.
- Asset – click
Change
to upload or select the image, orClear image
to clear it.
The examples here show how to use the File
and String
types to get images into your Appery.io app and display them with List component.
Grid
The Grid
component allows you to format page content into rows and columns. The Grid
component has the following properties:
- Rows – number of rows.
- Cols – number of columns.
- Dimension – grid width and height. Allowed values are
<num>px
,<num>pt
,<num>%
andauto
. - Border Thickness – the default value is
0
(it is invisible), but you can set the different value. - Border Color – select the color for the border.
Every grid cell has the following properties:
- Background Transparent – uncheck, if you want the cell background to be colored.
- Background Color – select the color for the cell background if
Background Transparent
is unchecked.
Visit the jQuery Mobile documentation describing the Grid component.
The Navbar
component may be dragged and dropped on the page header or footer. It can consist of several buttons with optional icons. The Navbar
component has only one main property – Items
. The number of items in the Navbar
can vary from 1 to 10:
If the number of items you set doesn’t exceed 5, the buttons will be on one line:
If you set more than 5 items, they will be placed in several lines – two buttons in a line (regardless of the page size):
This doesn’t look very good, which why we don’t recommend using the Navbar
component with more than 5 items.
The Navbar
items have the following properties:
- Icon – you can select any icon from the list or
None
. - Text – enter the text to appear on the button (this field may be left empty).
- Active – check to make the button highlighted on this page:
The Navbar
component is often used for creating Custom Components. Read about Custom Components.
Visit the jQuery Mobile documentation describing the Navbar component.
Here is how to set custom icons on the jQuery Mobile Navbar
component. From components PALETTE
, drag and drop the Navbar
component.
Setting via JavaScript
- Open
EVENTS
view, selectstartScreen >Load event > Run JavaScript
. - Enter the following code:
1$('[name=mobilenavbaritem_4]').addClass("myClass");Navbar
item name inPROPERTIES
.
- Click Save.
- Click
Create New > CSS
, enter the name, and click Create CSS.
- Enter the following code:
12345.myClass:after{background: url("http://cdn3.iconfinder.com/data/icons/ellegant/64x64/9.png") !important;background-size: 22px 22px !important;border-radius: 0 !important;} - Save.
- Test the app. It should look like:
Setting via CSS
- Click
Create New > CSS
, enter the name, and click Create CSS.
- Enter the following code:
1234[dsid=mobilenavbaritem_5]:after{background: url("http://cdn3.iconfinder.com/data/icons/ellegant/64x64/9.png");background-size: 22px 22px;}[dsid=mobilenavbaritem_5]
– contains the same name as theNavbar
item inPROPERTIES
.
Search
The Search
component is an input field with a search
icon, and a clear text
icon that appears once the app user begins typing:
The Search
component has the following properties:
- Text – enter the text that should appear in the input field. This text may not be a placeholder, so it may not disappear by itself, but can be cleared if needed.
- Placeholder – write the placeholder text you want to appear in the text area; the
Text
property should be empty.
Visit the jQuery Mobile documentation describing the Input, Search and Textareas components.
CollapsibleSet
CollapsibleSet
is a complex component that, when tapped, allows you to expand and collapse content. The CollapsibleSet
component consists of one or several blocks, and each block has a header and content area. The header stays visible even when the content is collapsed. Using the CollapsibleSet
component saves space on your mobile page.
The CollapsibleSet
has the following properties:
- Data Collapsed Icon – select the icon that appears on the header of the collapsed block.
- Data Expanded Icon – select the icon that appears on the header of the expanded block.
- Data Iconpos – select the position of the icon on all block headers.
- Swatch – select the component swatch if you want it to differ from the inherited.
- Data Content Theme – select the block contents’ swatch if you want it to differ from the inherited.
- Tab Index – allows you to change item order by using the Up and Down buttons.
The CollapsibleSet
block properties open for editing when you click the block name:
The CollapsibleSet
block properties are as follows:
- Collapsed – uncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
- Swatch – select the block swatch if you want it to differ from other blocks. If you set the block swatch, it will not change after changing the component swatch.
- Tab index – allows you to change item order by using the Up and Down buttons.
- Mini Version – check if you want the block headers be smaller.
The CollapsibleSet
block header properties:
- Icon Position – select this block header’s icon position.
- Collapsed – uncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
- Text – enter the block header text.
- Swatch – select the block header swatch if you want it to differ from the inherited.
The CollapsibleSet
block content area only has the Swatch
property.
Visit the jQuery Mobile documentation describing the Collapsible set component.
Collapsible
The Collapsible
component differs from the CollapsibleSet
component only in the number of items – it has only one block, which has a header and content area, it may be collapsed or expanded by default, and can be of standard or mini size.
The Collapsible
block properties are as follows:
- Collapsed – uncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
- Swatch – select the block swatch if you want it to differ from other blocks. If you set the block swatch, it will not change after changing the component swatch.
- Tab Index – allows you to change item order by using the Up and Down buttons.
- Mini Version – check if you want the block headers be smaller.
The Collapsible
block header properties:
- Icon Position – select this block header’s icon position.
- Collapsed – uncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
- Text – enter the block header text.
- Swatch – select the block header swatch if you want it to differ from the inherited.
The Collapsible
block content area only has the Swatch
property.
Visit the jQuery Mobile documentation describing the Collapsible component.
Spacer
The Spacer
component is used to make space between other components. You can resize it with mouse cursor or by changing the Dimension
properties (allowed values are <num>px
, <num>pt
, <num>%
and auto
):
Video
The Video
component allows you to embed a video in your app page. The Video
component has the following properties:
- Auto Play – check to make the video start once the page loads.
- Src – specify the location of the video file.
- Type – specify the MIME-type of the video file. There are 3 pairs of
Src/Type
properties, so that you can specify 3 different video locations and types, because different browsers support different video formats. - Show Controls – check to show play/stop/pause controls (they will be different depending on the browser).
- Loop – check to make the video start over every time it is finished.
- Mute – check if you want the audio output of the video be muted.
- Poster – specify the image to be shown when the video loads (but isn’t playing yet). It’s also used if the video isn’t available.
- Preload – select whether the video should be loaded as soon as the page loads. Possible values are:
- none – the video should not start loading when the page loads.
- metadata – only the metadata for the video should be loaded once the page loads.
- auto – the video should start loading when the page loads.
Examples of the Src/Type
properties:
- Src: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
- Type: video/mp4
- Src: http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv
- Type: video/ogg
- Src: http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm
- Type: video/webm
Audio
The Audio
component allows you to embed a sound in your app page. The Audio
component has the following properties:
- Auto Play – check to make the audio start playing as soon as it is ready.
- Src – specify the URL of the audio file.
- Type – specify the MIME-type of the audio file. There are 3 pairs of
Src/Type
properties, so that you can specify 3 different audio locations and types, because different browsers support different audio formats. - Loop – check to make the audio start over every time it is finished.
- Preload – select if/how the audio should be loaded when the page loads. Possible values are:
- none – the audio file should not start loading as soon as the page loads.
- metadata – only the metadata for the audio should be loaded once the page loads.
- auto – the entire audio file should start loading as the page loads.
The examples of the Src/Type
properties:
- Src: http://nigelcoldwell.co.uk/audio/mp3s/mp3-048.mp3
- Type: audio/mpeg
- Src: http://nigelcoldwell.co.uk/audio/oggs/ogg–1-00%2848%29.ogg
- Type: audio/ogg
- Src: http://nigelcoldwell.co.uk/audio/wav-1-40mb.wav
- Type: audio/wav
Map
The Map
component allows you to embed Google Maps into your app page. The Map
component properties are as follows:
- Latitude – specify the coordinate which should be shown on the map when the page loads.
- Longitude – specify the coordinate which should be shown on the map when the page loads.
- Address – specify the address which should be shown on the map when the page loads.
- Zoom – specify the zoom level of the map.
- Show marker – check if you want the markers to be visible.
The Map
component contains a marker
, which is an info window:
The Map marker
has the following properties:
- Show Info Window – check if you want it to appear.
- Latitude – specify the default coordinate of the info window.
- Longitude – specify the default coordinate of the info window.
- Address – specify the default address of the info window.
- Text – enter some text.
HTML
The HTML
component allows you to insert custom HTML code; <div>
and <span>
tags. The HTML
component properties are as follows:
- Type – you can select either
div
,span
,html
, orform
. - HTML – the Edit HTML button is enabled when the
Type
property is set tohtml
. On clicking the Edit HTML button, the HTML Editor pop-up opens, where any custom HTML, JavaScript or CSS code can be entered:
- Dimension – component width and height. Allowed values are
<num>px
,<num>pt
,<num>%
andauto
.
Creating forms
As you set the HTML Type
property to form
, the PROPERTIES
panel changes – new properties appear:
- Form Action – you can enter the URL where the information should be sent, or from where it can be received.
- Form Method – you can choose a
POST
orGET
method.
The form can be filled with components.
Add the Click
event to the submitbutton
withAction
= Run JavaScript
:
1 |
Apperyio("html_X").submit(); |
Where html_X
is the HTML element name:
Wrapping external document
Sometimes you need to wrap external documents, such as websites. Follow this steps to do it:
1. Place an HTML
component on the page.
2. In PROPERTIES
, set Dimensions
to auto
and auto
.
3. Set the ClassName
property to htmlOtherSite
:
4. Click Edit HTML
and switch to HTML Source
. Add the following code:
1 |
<iframe src="https://appery.io/" width="100%" height="100%"></iframe> |
Change https://appery.io/
to the site that should be wrapped.
5. Create a new CSS and add the following code:
1 2 3 4 5 6 7 8 |
div div.htmlOtherSite{ position: absolute; left: 0px; right: 0px; top: 54px; bottom: 54px; overflow: visible; } |
6. Test the application. You will see the wrapped content:
Carousel
The Carousel
component allows you to create a list of frames which can be scrolled horizontally back and forth. The Carousel
component has the following properties:
- Frames – set the number of frames in the
Carousel
component. - Indicators – set the name of the component to which indicators of the carousel will be outputted. If it is empty, indicators will be displayed at the top of the carousel block.
- Show indicator – uncheck to hide indicators.
- Show title – uncheck to hide the title of the carousel.
- Title Built In – allows for the formatting of the frame title. If it is checked, title text is wrapped in two divs with class
ui-carousel-title
and an insidediv
with classui-carousel-title-inside
. Otherwise, the title text is wrapped in only one div with classui-carousel-title
. - Title Is Text – if checked, then an attempt to pass html-code as a text will lead to the HTML being displayed as plain text with tags. Otherwise, the title is interpreted as HTML (e.g. you can pass
<b>Text</b>
and the text will be displayed as bold). - Animation Duration – you can set the duration of an animation (in milliseconds).
- Use Legacy Animation – if checked, the JS code will be used for animation; otherwise it will try to use the built-in browser mechanisms for animation through CSS3-styles.
- Enabled – if unchecked,
Carousel
won’t work (frames won’t change, only the first frame will be accessible).
The Carousel
item has the following properties:
- Type – you can select
HTML
orimage
type:- HTML – provides other components to be added to the frame (including the
Image
component). - image – provides only the image to be shown at the carousel frame (other components dropped to the frame will be invisible).
- HTML – provides other components to be added to the frame (including the
- Title – set the frame title.
- Image URL – this property appears when the
image
frame type is selected.
Learn more about the
Carousel
component here.
Panel
The Panel
component allows you to create sliding panels which appear from the left or right. The Panel
component has the following properties:
- Swatch – by default this property inherits the screen swatch property value.
- Position – the panel can slide out from the left or right side of the screen:
- Display – you can select one of the following modes:
Overlay
– the panel appears over the page content:
Reveal
– the page content moves and the panel appears from under it:
Push
– the panel pushes the page content aside:
You can add any component to the Panel
(with the exception of Popup
, Panel
and Navbar
):
For editing the Panel
component, use the OUTLINE
tab opening the components tree:
To hide or delete the Panel
, click the corresponding link next to its name in the components tree:
To reopen it, click on its link back.
Alternatively, every Panel
component has a down arrow button to hide it and a delete button for deleting it:
Changing panel size
Reducing panel size can be handy when you want to not overlap the header or footer when panel is opened. Here is how you can do that:
1. Place the Button
component on the page and add the following event:
mobilebutton_3 > Click > Run JavaScript
. Add the following code:
1 |
Apperyio(‘panel_2′).panel( “open” ); |
This will open the panel.
2. Place the Panel
component on the page and name it MyPanel
:
3. Create a new CSS file and add the following code:
1 2 3 4 5 6 7 8 |
.ui-panel.myPanel{ height: auto; min-height: 0; position: fixed; top: 50px; bottom: 50px; overflow: hidden; } |
Make sure to set a class
myPanel
to the panel you use in the CSS.
4. Now you can test the app. You’ll see that panel doesn’t overlap the header and footer:
API examples
Open panel:
1 |
Apperyio('panel').panel( "open" ); |
Close panel:
1 |
Apperyio('panel').panel( "close" ); |
Learn about Appery.io JavaScript library.
Visit the jQuery Mobile documentation for complete Panels API.
Popup

The Popup
component allows you to present any data as a pop-up. All the pop-ups are listed under OUTLINE
:
You can manage (delete or hide/show) certain pop-ups from the OUTLINE
tab by clicking the corresponding link:
You can also hide pop-ups by clicking the small down arrow above the pop-up:
The Popup
component has the following properties:
- Swatch – select the button swatch if you want it to differ from the default type specified in the app settings.
- Overlay Theme – when pop-up is opened, it can overlay UI in the background with a different swatch:
By toggling this option, the overlay theme will be the same as the Popup Swatch
:
The toggle
button next to Overlay Theme
can be set to on (property is enabled) or off (property is disabled) status.
If overlay isn’t needed, choose Transparent
, and the UI in the background will be untouched:
Arrow
– shows an arrow in the selected direction, and shifts the pop-up towards the opposite side. If the pop-up cannot be moved due to insufficient container size, the arrow will not be shown:
You can select multiple arrow directions by using the <Ctrl>+<Click>
combination. So if one arrow cannot be shown, the next arrow will be performed. Use <Ctrl>+<Click>
to unselect arrow direction.
The
Arrow
parameter is only available for 2.0 version libraries (or higher).
Corners
– makes the pop-up corners rounded:
Dismissible
– allows you to close a pop-up by clicking anywhere outside of the pop-up.
Position To
– sets the element relative to which the pop-up will be centered. It has the following values:
- window – when the pop-up opens, center in the window.
- jQuery selector – when the pop-up opens, create a jQuery object based on the selector, and center over it. The selector is filtered for elements that are visible with
:visible
. If the result is empty, the pop-up will be centered in the window. For example, to center the pop-up to the button specify the following jQuery selector:
1 |
[dsid=mobilebutton_24] |

The
Tolerance
parameter is ignored when the value forPosition To
is specified.
Shadow
– whether or not to show a shadow around the pop-up:
Tolerance
– the minimum distance between the pop-up and the edge of the window. Parameters are enumerated clockwise: top
, right
, bottom
, left
. Here is the pop-up with right Tolerance
value of 85
:
As you can see, the pop-up is shifted left.
Visit the jQuery Mobile documentation for the complete Popup component API.
YouTube
The YouTube
component allows you to embed video from YouTube. The YouTube
component has the following properties:
- Auto Play – check to make the video start once the page loads.
- Video ID – enter the video ID from youtube.com.
- Show controls – checked by default; uncheck if you want to hide the controls.
- Loop – check to make the video restart every time it is finished.
- Start – enter the start second of the video playing.
- End – enter the end second of the video; a
0
value means the video should play to the end.
The YouTube
component can be placed to any container on a screen. The component width and height can be set by dragging a corner handler or by editing dimensional properties.
YouTube events
The YouTube
component has the following built-in events:
YouTube state change
– fires whenever the player’s state changes. The value specifies an integer that corresponds to the player state. Possible values are:- -1 (unstarted)
- 0 (ended)
- 1 (playing)
- 2 (paused)
- 3 (buffering)
- 5 (video cued)
- YouTube video ended – fires when the player’s state changes to
0
(ended); this event is based on theYouTube state change
event; it does not return any object:
- YouTube video playing – fires when the player’s state changes to
1
(playing); this event is based on theYouTube state change
event; it does not return any object:
- YouTube video paused – fires when the player’s state changes to
2
(paused); this event is based on theYouTube state change
event; it does not return any object:
- YouTube video buffering – fires when the player’s state changes to
3
(buffering); this event is based on theYouTube state change
event; it does not return any object.
The
YouTube video buffering
event is available only with the HTML5 player (not available in Flash Player). To switch the player type, open HTML5 settings and clickRequest the HTML5 player
. - YouTube playback quality change – fires whenever the video playback quality changes. The value is a string that identifies the new playback quality. Possible values are:
- small
- medium
- large
- hd720
- hd1080
- highres
- YouTube playback rate change – fires whenever the video playback rate changes. The value is a number that identifies the new playback rate:
The
YouTube playback rate change
event is available only with the HTML5 player (not available in Flash Player). To switch the player type, open HTML5 settings and clickRequest the HTML5 player
.
- YouTube error – fires if an error occurs in the player. The value is an integer that identifies the type of error that occurred. Possible values are:
- YouTube playback quality change – fires whenever the video playback quality changes. The value is a string that identifies the new playback quality. Possible values are:
Read more about YouTube events via the link.
Vimeo
The Vimeo
component allows to embed video from Vimeo. The Vimeo
component has the following properties:
- Auto Play – check to make the video start once the page loads.
- Video ID – enter the video ID from vimeo.com.
- Loop – check to make the video restart every time it is finished.
- Show title – checked by default; uncheck if you want to hide the video title.
- Show portrait – checked by default; uncheck if you want to hide the author’s portrait.
- Controls color – change the color of the component controls to make it more appropriate to your application appearance:
If the Vimeo
component width is less than 299px
or its height is less than 168px
, then the component has no controls (excluding the Play and Fullscreen buttons) and properties Show Title and
Show Portrait
have no visible effects. It’s a standard behavior for the embedded Vimeo video player.
Multiple component properties
By holding the <Ctrl>
key and clicking components, you can select multiple components and set the same values for some of their properties.
When selecting multiple components on the PROPERTIES
panel, you’ll only see the similar properties:
The properties that have different values will be highlighted:
When you edit the value of a property, it’s changed for all selected components. In the image above, you can see that the buttons have different texts, so the Text
property is highlighted. As this property was edited, the text on all buttons changed, and highlighting disappeared:
This way you can quickly set different properties of similar and non-similar components. In the following image, you can see that the Swatch
property was changed for the Button
and Input
components: