# Flipabit

You use Flipabit to create apps for iOS, Android, Windows and Mac without writing a line of code.


# Getting started

Start building apps


# Flipabit overview

Main window is your primary interface for viewing, editing, and managing all the parts of your project.

[Flipabit ](https://flipabit.dev)is integrated development environment. You use Flipabit to create apps for iOS, Android, Windows and Mac without writing a line of code. Flipabit provides tools to manage your entire development workflow — from creating your app to publish it to app stores. The entire user interface can be built using drag-and-drop functionality.

A project keeps the necessary files and resources for developing your app organized. To create a project, start with one of the **templates**, then modify it however you like. Each template comes preconfigured with default settings and is ready to run.

![](/files/-MIxukQxvtrAElAfMe-B)

After you create a project, the **main window** appears. This window is your primary interface for viewing, editing, and managing all the parts of your project.

![Flipabit main window](/files/-MIxukR-jCUrluhHxCJC)

Use the **Toolbar** to add widgets and files, configure your work environment. Widgets are a powerful feature that allows user interface components to easily be added to a project.

![Toolbar](/files/-MIxukQzm7bv0MOsTkk5)

Use the **Navigator** to view the project structure, navigate between pages, add, delete, and organize items in your project. Right-clicking on an item in the Navigator allows access to the item’s context menu. Select a widget in the Navigator to highlight it in a Workspace or double click a page to open it.

![Navigator](/files/-MIxukQwNWedWaHf0ONU)

Use the **Inspector** to view and edit information for the selected object or for the project.

![Inspector](/files/-MIxukQuE9k17pLQxiSD)

Use the **Actions Editor** to view and edit actions to execute when a event is fired.

![Actions Editor](/files/-MIxukPje0v_gPXCk3AC)

Use the **Code Editor** to add custom dynamic functionality to your projects with JavaScript and QML.

![Code Editor](/files/-MIxukPkyTuHlcwoAime)


# Create project

How-to create your first app with Flipabit.

When you create a project, you first choose a template for a common style of app, then modify the project as you like. Templates include essential project configuration and files that help you start creating your app quickly.

Launch Flipabit, select File > New, and in the "Create new project" window, click on a template icon.

![](/files/-MIxukQxvtrAElAfMe-B)

The main window for your project appears.


# Run on device

How-to run your app on device with Flipabit App.

In Workspace your project always look like on the device. With the Flipabit App you can interact with your projects on real devices.

Upload the project from Flipabit as follows:

1. Select File > Export > Export to mobile in the main menu
2. Click Create project.
3. Enter project title in the Name field and click Create project
4. Click Edit and select Project file to the right of the project title
5. Click Upload to upload the project to server

![](/files/-MIxukONy2FHtPxBN5wi)

Set up your device as follows:

1. Install and launch Flipabit App:
   * [Google Play](https://play.google.com/store/apps/details?id=dev.flipabit.companion)
   * App Store
     1. Install [TestFlight App](https://itunes.apple.com/us/app/testflight/id899247664?mt=8)
     2. Then install [Companion App](https://testflight.apple.com/join/ruyYHU5E)
2. Open My Projects and Log in
3. Press Open to the right of the project title

**Note:** to reload the list of your projects press the menu icon at the top left and when press Reload.

![](/files/-MIxyRGqlehUvUN9josD)


# Build

Different options for building your app, or prepare your app for the app store with Flipabit.


# Build for iOS

This guide will explore requesting development certificates and profiles, getting IPA file ready for submission to the Apple App Store using Flipabit.

## 1. Create An Apple Developer Account

You will need to create an [Apple Developer Account](https://developer.apple.com/support/compare-memberships/) if you do not already have one.

## 2. Create an App ID

2.1. Log into your [Apple Developer Account](https://developer.apple.com/account), navigate to Certificates, Identifiers, and Profiles

![](/files/-MIxukPqE7DMrBfGQLTP)

2.2. Сlick on App IDs in the left-side menu, enter Name and Bundle ID.

![](/files/-MIxukPoW0oyolmBSalU)

2.3. Click Continue, then click Register

## 3. Generate a Certificate Signing Request File

3.1. Open Keychain Access

3.2. Select Certificate Assistant › Request a Certificate From a Certificate Authority in the menu

![](/files/-MIxukPpNlXuKuxW-AOt)

3.3. Enter real Email Address and Common Name, leave the CA Email Address box blank, enable Saved to disk and click Continue

![](/files/-MIxukPrXsG9XOkACMrH)

3.4. Click Save, you'll get a `.certSigningRequest` file

![](/files/-MIxukPsRbinjs3HU843)

## 4. iOS App Certificate

4.1. Log into your [Apple Developer Account](https://developer.apple.com/account), navigate to Certificates, Identifiers, and Profiles

4.2. Click Development in the Certificates section in the left-side menu.

![](/files/-MIxukPtlEgFV4evi_4J)

4.3. Select the iOS App Development and click Continue

![](/files/-MIxukPuhY1ugatNwpNz)

4.4. Click Choose File... and select `.certSigningRequest` file you created from step 3.4 above, then click Continue

![](/files/-MIxukPvUp8Al-O54hZG)

4.5. Click Download, you'll get a `.cer` file

![](/files/-MIxukPwYtTDpiBKYk7m)

## 5. Convert the Certificate to a P12 File

5.1. Open Keychain Access, and drag your `.cer` file from STEP 4.6 into your login keychain.

![](/files/-MIxukPxyJStsn0TRbiS)

5.2. Right click on added certificate, and choose Export

![](/files/-MIxukPy_pil0HZXA5J0)

5.3. Select Personal Information Exchange (.p12) for File Format and click Save

![](/files/-MIxukPzvmZp1c046r7Z)

5.4. Enter Password

![](/files/-MIxukQ-JdlGRhn_W33T)

## 6. Create A Provisioning Profile

6.1. Log into your [Apple Developer Account](https://developer.apple.com/account), navigate to Certificates, Identifiers, and Profiles

6.2. Click Development in the Provisioning Profiles section in the left-side menu.

![](/files/-MIxukQ0kByElR8-0U6P)

6.3. Select iOS App Development and click Continue

![](/files/-MIxukQ1As02uYj0bVIn)

6.4. Select your app name from App ID list and click Continue

![](/files/-MIxukQ2bxD96BEwNbSs)

6.5. Select certificate name and click Continue

![](/files/-MIxukQ3zfXGIxBsybrx)

6.6. Select all devices and click Continue

![](/files/-MIxukQ4wAZKADYzNJ04)

6.7. Enter profile name and click Continue

![](/files/-MIxukQ5T4PuNKgUVSlw)

6.8. Click Download, you'll get a `.mobileprovision` file

![](/files/-MIxukQ68Jptq_RLWx9w)

## 7. Build IPA file from Flipabit

7.1. Launch Flipabit

7.2. Select File > Export > Export to mobile

![](/files/-MIxukQ7FQ1iNF7jhgzE)

7.3. [Create and upload your project](https://app.gitbook.com/intro/run-on-device.md) file if you don't already create it.

7.4. Click Edit and select Info

![](/files/-MIxukQ8y8jp1da1350Q)

7.5. Into Package Name field paste your Bundle ID from STEP 2.2.

![](/files/-MIxukQ9_jptgZUAarpU)

7.6. Click Choose file for Provisioning Profile and select your `.mobileprovision` file from STEP 6.8.

![](/files/-MIxukQADGJUXca90DoI)

7.7. Click Choose file for iOS Certificate and select your `.p12` file from STEP 5.3.

![](/files/-MIxukQB5nk5qFBofgey)

7.8. Into Certificate Password paste your password from STEP 5.4.

![](/files/-MIxukQCWn_MIjcFYhzM)

7.9. Click Update project

7.10. Click Build and select iOS

![](/files/-MIxukQDmi7YKgMgStdk)

7.11. When the building process is finished, you'll see a link

7.12. Click Download, you'll get an `.ipa` file

![](/files/-MIxukQEDUp7yvfaRfsK)


# Build for Android

This guide will explore getting APK file ready for submission to the Google Play Store using Flipabit.

1*.* Launch Flipabit

2*.* Select File > Export > Export to mobile

![](/files/-MIxukQ7FQ1iNF7jhgzE)

3*.* [Create and upload your project](https://app.gitbook.com/intro/run-on-device.md) file if you don't already create it.

4*.* Click Edit and select Info

![](/files/-MIxukQ8y8jp1da1350Q)

5*.* Enter your App ID, such as "com.whatever.YourApp" in Package Name field.

![](/files/-MIxukQ9_jptgZUAarpU)

6*.* Click Update project

7*.* Click Build and select Android

![](/files/-MIxukPlQtoD1BStZ9-b)

8*.* When the building process is finished, you'll see a link

9*.* Click Download, you'll get an `.apk` file

![](/files/-MIxukPmsGxdluCwe3N4)


# Build for Desktop

This guide will explore getting .exe or .app file for Windows and Mac distribution using Flipabit.

## Export to Windows

To export project to Windows:

1. Select File > Export > Export to Windows in the main menu
2. In the dialog box, specify the folder and filename to save the exported project and click Save
3. When the export is finished, the exported project will be saved in the specified folder:
   * For Windows users, the project will have the EXE extension. It is a self-extracting archive. When the file is run, the archive is extracted and the project launches.
   * For MacOS users, the project will have the ZIP extension. The archive contains the Run file that launches the project. The Resources folder contains all the files required to launch the project.

## Export to MacOS

To export project to MacOS:

1. Select File > Export > Export to Mac in the main menu
2. In the dialog box, specify the folder and filename to save the exported project and click Save
3. When the export is finished, the exported project will be saved in the specified folder:
   * For Windows users, the project will have the ZIP extension. This is an archive that contains the Resources folder and the Run.app folder (an executable file for MacOS).
   * For MacOS users, a folder with the project name will be created. The folder will contain the application with the APP extension and the Resources folder.


# Publish to App Stores

A guide to distributing your applications created with Flipabit to the public via the App Store and the Google Play.


# Submit to App Store

A guide to distributing your applications created with Flipabit to the public via the App Store.

## 0. Export a Native IPA file for Apple

If you haven't already, read our guide on [exporting your app for iOS](https://app.gitbook.com/intro/export/export-to-ios.md).

## 1. Creating an iTunes Connect App

1.1. [Log into iTunes connect](https://itunesconnect.apple.com/) from your browser

2.1. Log into your [Apple Developer Account](https://developer.apple.com/account), navigate to Certificates, Identifiers, and Profiles

1.2. Click My Apps

![](/files/-MIxukQfiuzd5_b32ei7)

1.3. Click the "+", click New App

![](/files/-MIxukQgsF80ZoVsmRVf)

1.4. Fill out the required information and click Create

![](/files/-MIxukQkzBrOMZzOig1n)

## 2. Upload IPA File

2.1 Open Application Loader.

![](/files/-MIxukQhQvzBPMEwDAKK)

2.2. Click Deliver Your App and then click Choose and select your IPA file

![](/files/-MIxukQiQsn3SKCLI7cX)

2.3. Click Next and then click Done

![](/files/-MIxukQjxv2t5u56Bk6r)

## 3. Prepare App For Submission

3.1. Select your app in [iTunes Connect](https://itunesconnect.apple.com/)

3.2. Select category for your app and click Save

![](/files/-MIxukQlUWA6C316zNuL)

3.3. Click Pricing and Availability in the left-side menu and select pricing information and click Save

![](/files/-MIxukQmQN4P1LBlhtdc)

3.4. Click Prepare for Submission in the left-side menu and upload screenshots of your app

![](/files/-MIxukQn2VmjpC6VsNPi)

3.5. Fill Name, Description, Keywords and Support URL fields.

![](/files/-MIxukQoOFjnbrHavPdQ)

3.6. Scroll to the General App Information section and fill in all the required information

![](/files/-MIxukQpv1h8XGHYfZLB)

3.7. Click on the Edit button by the Rating to set the rating information

![](/files/-MIxukQqZgX97nZsi6W6)

3.8. Click Save

## 4. Select Build

4.1. Select your app in [iTunes Connect](https://itunesconnect.apple.com/)

4.2. Click Prepare for Submission in the left-side

4.3. Click + button to the right of the Build

![](/files/-MIxukQrLKjitY7LV5Yo)

4.4. Select your build uploaded in STEP 2

![](/files/-MIxukQs_4l_oTXi6p4-)

4.5. Click Save and then click Submit for Review


# Submit to Google Play

A guide to distributing your applications created with Flipabit to the public via the Google Play.

## 0. Export a Native APK file for Android

If you haven't already, read our guide on [exporting your app for Android](https://app.gitbook.com/intro/export/export-to-android.md).

## 1. Creating a Google Play App

1.1. Log into [Google Developer Console](https://play.google.com/apps/publish/) from your browser

1.2. Click Create Application

![](/files/-MIxukQFaspa_bmBZQl4)

1.3. Select default language and enter title for your app, then click Create

![](/files/-MIxukQGrz_LvpOIahfD)

## 2. Create Your Store Listing

2.1. Click Store listing in the left-side menu

2.2. Fill out Product details form

![](/files/-MIxukQHLlf4u9e-mHNJ)

2.3. Scroll down to the Graphic Assets section, upload screenshots of your app, choose an app icon, feature graphic for your app.

![](/files/-MIxukQITol9AnYVhwCn)

2.4. Select the Application type and Category in the Categorization section, then enter your email in the Contact details section

![](/files/-MIxukQJDLKlMQJz0lcP)

2.5. Scroll down to the Privacy Policy section and provide a URL for the privacy policy of the App.

Your options to host your Privacy Policy for free are:

* Your own website
* [GitHub Pages](https://pages.github.com/)
* [Google Sites](https://sites.google.com)
* A [free blog](http://www.techradar.com/news/the-best-free-blogging-sites)

Privacy Policy templates:

* <https://gist.github.com/alphamu/c42f6c3fce530ca5e804e672fed70d78>
* <http://www.docracy.com/6016/mobile-privacy-policy>

![](/files/-MIxukQK-2ahyse7eeiP)

2.6. Scroll up and click Save Draft

![](/files/-MIxukQLyYFtih_dhas5)

## 3. Upload APK file

3.1. Click App releases in the left-side menu

3.2. Click Manage Production

![](/files/-MIxukQM6M0ET6Gxmnsw)

3.3. Click Create Release

![](/files/-MIxukQNc562aL-O7Mnj)

3.4. Click OPT-OUT

![](/files/-MJ0xf1fgmUO_BUZ7yf3)

3.5. Click Upload APK

![](/files/-MIxukQPp6l_YbcBk_P-)

3.6. Scroll down and enter the Release notes and click Save

![](/files/-MIxukQQWAKV8D3vSY6e)

## 4. Create Content Rating

4.1. Click Content rating in the left-side menu and then click Continue

![](/files/-MIxukQRdfbtOIbeyZYY)

4.2. Enter your email

![](/files/-MIxukQS808ICs1gILiU)

4.3. Select your app category

![](/files/-MIxukQTMOMJ2c_e-zgC)

4.4. Complete the questionnaire

![](/files/-MIxukQUZQOiYZIj6ZqL)

4.5. Click Save questionnaire and then click Calculate Rating

![](/files/-MIxukQVDscgVZGf5Q2R)

4.6. Click Apply Rating

![](/files/-MIxukQW0waHqGU50Wj9)

## 5. Pricing & distribution

5.1. Click Pricing & distribution in the left-side menu

5.2. Select Paid or Free

![](/files/-MIxukQXWOSW8VwJJ-N1)

5.3. Scroll down and select countries

![](/files/-MIxukQYDlcB5n1PrTNw)

5.4. Select Yes or No in the Contains ads section

![](/files/-MIxukQZJUajHU16z1Fk)

5.5. Enable Content guidelines and US export laws

![](/files/-MIxukQ_pTZwSHAX6rhA)

5.6. Scroll to the top of the page and click Save Draft

![](/files/-MIxukQa7zAvpnPJ7gaT)

## 6. Publish

6.1. Click App releases in the left-side menu

6.2. Click Edit Release in the Production section

![](/files/-MIxukQbT4vDuZ7u1Nd9)

6.3. Scroll down and click Review

![](/files/-MIxukQcJOXMV38vTw35)

6.4. Click Start rollout to production

![](/files/-MIxukQdnAqmU5YUadJh)

6.5. You'll see "Pending publication" label

![](/files/-MIxukQeon6OOh6zlOGC)


# Layers

A guide to work with layers and the ability to easiliy navigate are very important factors when working with layers. This section will show you how to select, move and organize layers.


# Select layer

<div align="left"><img src="/files/-MIxukOvPcvMZK8dBsU9" alt=""></div>

* Right click widget in Workspace
* Left click layer name in Navigator

**Note:** Hold `Ctr` or `Command` to select multiple widgets.

## Deselect layer

* Press `Esc` or `Command`+`Shift`+`A`
* Click on empty space in Workplace
* Select page or Project in Navigator

## Show bounding box

A rectangular border around a widget or a group, which allows to select an object with left click. It is useful when you have a transparent widget on a page.

To show or hide bounding box:

* Click <img src="/files/-MJ0yuNcytM8mbHTKdEP" alt="" data-size="line"> at the bottom side of Workplace.


# Change order, visibility and name

## Show or hide layer

<div align="left"><img src="/files/-MIxukOIqyi7f1uz69Gs" alt=""></div>

* Click eye icon <img src="/files/-MJ0yuNW9nizRoe3Iyzh" alt="" data-size="line"> near a layer name in Navigator to hide it. Click again to show.

## Change layer name

<div align="left"><img src="/files/-MIxukOW7GN_JdYFw531" alt=""></div>

* Double click a layer name in Navigator, type in the new name.&#x20;

## Change order

<div align="left"><img src="/files/-MIxukOShdFExmOU1KKB" alt=""></div>

1. Select layer
2. Do one of the following:
   * Drag layer up or down in Navigator
   * Click <img src="/files/-MJ0zyk2iLKMhAp7CBqu" alt="" data-size="line"> or <img src="/files/-MJ0zyk3YsYT1zjWZHdx" alt="" data-size="line"> at Navigator bottom
   * Select Edit > Turn back in Menu
   * Press `Alt`+`<` or `Alt`+`>`


# Copy and paste

<div align="left"><img src="/files/-MJ10LW2AYBFhGqqYraa" alt=""></div>

1. Select layer
2. To copy layer do one of the following:
   * Press `Ctrl`+`C`
   * Select Edit > Copy in Menu
   * Right click in Navigator and select Copy item
3. Select a layer after which you will paste the copied layer&#x20;
4. Do one of the following:
   * Press `Ctrl`+`V`
   * Select Edit > Paste in Menu
   * Right click and select Paste item

## Duplicate layer

<div align="left"><img src="/files/-MJ10QqIdNKKfHvMQVhY" alt=""></div>

To duplicate layer:

1. Select layer
2. Do one of the following:
   * Press `Ctrl`+`D`
   * Select Edit > Duplicate in Menu
   * Right click in Navigator and select Duplicate item


# Move layer

<div align="left"><img src="/files/-MIxukOROOqE4X-rMPM4" alt=""></div>

1. Select layer
2. Do one of the following:
   * Drag selected layer in Workspace
   * Enter x or y in Geometry Inspector
   * Move layer using arrow keys. Hold `Shift` to move layer by 10 pixels.


# Resize layer

<div align="left"><img src="/files/-MIxukOV4PbKL6Ylx77Q" alt=""></div>

1. Select layer
2. Do one of the following:
   * Click and drag handles around layer in Workspace. Hold `Shift` to constrain proportions. Hold Alt to resize from center.
   * Enter value in Width or Height field inGeometry Inspector
   * Hold `Ctrl` and Press arrows keys to resize from top-left corner. Hold `Shift` to resize by 10 pixels.

## Resize to fit page or maximum layer size

<div align="left"><img src="/files/-MIxukOTVrcelQVbUX5h" alt=""></div>

1. Select one or multiple layers
2. To fit width select Align > Resize to width or press `W`
3. To fit height select Align > Resize to height or press `E`


# Rotate layer

<div align="left"><img src="/files/-MIxukOU_nVFbRhzZX7f" alt=""></div>

1. Select layer
2. Do one of the following:
   * Move pointer outside of bounding box (pointer becomes curved, two-sided arrow <img src="/files/-MJ12RLw2BWFF7_-XIsm" alt="" data-size="line"> ) and drag. Hold `Shift` to constrain rotation to 15° increments
   * Enter X rotation, Y rotation or Z rotation in Rotation section in Geometry Inspector.


# Align layers

<div align="left"><img src="/files/-MIxukOOUwJfXjfZKgd9" alt=""></div>

## Align to page

1. Select single layer
2. Select required alignment in Align menu:
   * Left or Press `L`
   * Right or Press `R`
   * Top or Press `T`
   * Bottom or Press `B`
   * Center vertically or Press `V`
   * Center horizontally or Press `H`

## Align multiple widgets

1. Select layers
2. Select required alignment in Align

**Note:** To align multiple layers to page, press required key twice. For example, to align multiple layers to top of page, press `T` twice.


# Arrange layers

1. Select multiple widgets, group or page
2. Select required arrangement in Arrange:
   * Vertically or press `Alt`+`V`
   * Vertically by and select rows number
   * Horizontally or press `Alt`+`H`
   * Horizontally by and select columns number
   * Random or press `Alt`+`R`
   * Symmetric or press `Alt`+`S`

## Arrange with resize

<div align="left"><img src="/files/-MIxukOPnj9HTGmLjkSf" alt=""></div>

1. Select widgets
2. Select required resize in Arrange:
   * Vertically resize or press `Alt`+`Shift`+`V`
   * Horizontally resize or press `Alt`+`Shift`+`H`
   * Random resize or press `Alt`+`Shift`+`R`
   * Symmetric resize or press `Alt`+`Shift`+`S`

## Distribute

<div align="left"><img src="/files/-MIxukOQWDE5vWhul_53" alt=""></div>

1. Select widgets
2. Select Arrange > Distribute horizontally or Arrange > Distribute vertically


# Navigation layer

A guide to work with navigation layer that makes it very easy to add a navigation components to an app. This layer is called the Navigation.

Navigation layer is displayed on top of an app screen. This layer as a normal page with widgets, but with a transparent background through which the other pages shows.

<div align="left"><img src="/files/-MIxukOcolbu-CWyQjD_" alt=""></div>


# Display page title

Title provides context by letting people know what they’re looking at

## Page title

![](/files/-MIxukRLoLthcW4PjIxi)

## Add page title

<div align="left"><img src="/files/-MIxukO_u1NL6kiGmI0t" alt=""></div>

To add page title:

1. Select Navigation layer in Navigator
2. Select File > Import
3. Open Title.pmc file from components folder
4. Page Title widget will be added


# Display Tab bar

A tab bar provides the ability to quickly switch between different sections of an app.

## Tabs

A tab bar is a good way to flatten your information hierarchy and provide access to several peer information categories or modes at once.

<div align="left"><img src="/files/-MIxukRJ0Jvmds2xGL4o" alt=""></div>

## iOS tabs

<div align="left"><img src="/files/-MIxukOZ7Av07noWOnXq" alt=""></div>

To add iOS-like tabs to existing project:

1. Select Navigation layer in Navigator
2. Select File > Import
3. Open `TabsIOS.pmc` file from components folder
4. Tab Bar group will be added

To create new project with iOS-like tabs:

1. Select File > New
2. Open Templates tab
3. Select Tabbed project in iOS section

## Android tabs

To add Android-like tabs to existing project:

1. Select Navigation layer in Navigator
2. Select File > Import
3. Open `TabsAndroid.pmc` file from components folder
4. Tab Bar widget will be added

To create new project with Android-like tabs:

1. Select File > New
2. Open Templates tab
3. Select Tabbed project in Android section


# Display Table of contents

Some apps may need to provide a way to make setup or configuration choices. The others apps need to display table of contents.

## Menu

Usually the menu slides in from the left and contains the navigation destinations or settings controls for your app.

<div align="left"><img src="/files/-MIxukRHBAq0BMCR4lpr" alt=""></div>

## Table of contents

To add TOC menu:

1. Select Navigation layer in Navigator
2. Select File > Import
3. Open TOC.pmc file from components folder
4. TOC widget will be added

<div align="left"><img src="/files/-MIxukOa0qujo_rKdCt3" alt=""></div>

To customize TOC menu:

1. Select TOC widget
2. Open Font Inspector
3. Adjust font settings
4. Open Style Inspector
5. Adjust background

<div align="left"><img src="/files/-MIxukOb480at0KlWlJO" alt=""></div>


# Display Back button

The back button makes it easy to return to the previous or home location.

## Back button

![](/files/-MIxukREPxZDOIRf_xCR)

## Add back button

To add back button:

1. Select Navigation layer in Navigator
2. Select File > Import
3. Open `BackButton.pmc` file from components folder
4. Back Button widget will be added

## Add back button with title

<div align="left"><img src="/files/-MIxukOYcSNd4m7Akac7" alt=""></div>

To add back button:

1. Select Navigation layer in Navigator
2. Select File > Import
3. Open `BackButtonWithTitle.pmc` file from components folder
4. Back Button widget will be added


# Next/Prev buttons

Next and Previous buttons provides the ability to navigate through pages of app.

<div align="left"><img src="/files/-MIxukOdh0WbbctLGOsm" alt=""></div>

To add Next button:

1. Add Form widget
2. Select Insert > Action
3. Double click Event cell and select Click
4. Double click Target cell and select Project
5. Double click Action cell and select Actions > Next page

To add Previous button:

1. Add Form widget
2. Select Insert > Action
3. Double click Event cell and select Click
4. Double click Target cell and select Project
5. Double click Action cell and select Actions > Prev page


# Navigation actions

## Current page title

To get current page title:

1. Open Actions Editor
2. Select required action or add new
3. Open Argument panel
4. Select Property from Type list
5. Select Project from Object list
6. Select Property > Project > current page title from Property list

<div align="left"><img src="/files/-MIxukR4qnKvIn19crxe" alt=""></div>

## Current page number

To get current page number:

1. Open Actions Editor
2. Select required action or add new
3. Open Argument panel
4. Select Property from Type list
5. Select Project from Object list
6. Select Property > Project > current page number from Property list

<div align="left"><img src="/files/-MIxukR32_xSW74HWPiE" alt=""></div>

## Previous page title

To get previous page title:

1. Open Actions Editor
2. Select required action or add new
3. Open Argument panel
4. Select Property from Type list
5. Select Project from Object list
6. Select Property > Project > previous page title from Property list

<div align="left"><img src="/files/-MIxukRC6fZgoUUq_ZvW" alt=""></div>

## Previous page number

To get previous page number:

1. Open Actions Editor
2. Select required action or add new
3. Open Argument panel
4. Select Property from Type list
5. Select Project from Object list
6. Select Property > Project > previous page number from Property list

<div align="left"><img src="/files/-MIxukRBHVc6ZryKYq2Y" alt=""></div>

## Count pages

To get pages count:

1. Open Actions Editor
2. Select required action or add new
3. Open Argument panel
4. Select Property from Type list
5. Select Project from Object list
6. Select Property > Project > count pages from Property list

<div align="left"><img src="/files/-MIxukR2Bgg6ytw0wgim" alt=""></div>

## Go to specific page

<div align="left"><img src="/files/-MIxukR6pbEBDPkVbq-E" alt=""></div>

To go to specific page:

1. Open Actions Editor
2. Select required action or add new
3. Double click Target cell and select Project
4. Double click Action cell and select Actions > Go to page
5. Open Argument panel
6. Select required page from Value list

## Go to specific page number

<div align="left"><img src="/files/-MIxukR7cf1fViLmMrcq" alt=""></div>

To go to specific page number:

1. Open Actions Editor
2. Select required action or add new
3. Double click Target cell and select Project
4. Double click Action cell and select Actions > Go to page number
5. Open Argument panel
6. Select Const from Type list
7. Enter page number in Value field

## Go to next page

To go to next:

1. Open Actions Editor
2. Select required action or add new
3. Double click Target cell and select Project
4. Double click Action cell and select Actions > Next

<div align="left"><img src="/files/-MIxukR9ooumUMKooBHo" alt=""></div>

## Go to previous page

To go to prev:

1. Open Actions Editor
2. Select required action or add new
3. Double click Target cell and select Project
4. Double click Action cell and select Actions > Prev

<div align="left"><img src="/files/-MIxukRAfLQD3HNZOTDB" alt=""></div>

## Enter page event

To run action on page enter:

1. Open Actions Editor
2. Select required action or add new
3. Double click Source cell and select Project
4. Double click Event cell and select Enter page

<div align="left"><img src="/files/-MIxukR5h8-Ev-3P21vr" alt=""></div>

## Leave page event

To run action on page leave:

1. Open Actions Editor
2. Select required action or add new
3. Double click Source cell and select Project
4. Double click Event cell and select Leave page

<div align="left"><img src="/files/-MIxukR8ZIjyj5-rQtxc" alt=""></div>


# Pages

A guide to work with Pages that are used to construct your interface and display content to the user. Most apps contain multiple screens, which means they comprise multiple pages.


# Add or delete page

<div align="left"><img src="/files/-MIxukOeR-noFPS7iKC5" alt=""></div>

## To add page

Do one of the following:

* Select Insert > Add page;
* Right click in Navigator, select Add page;
* Click <img src="/files/-MJ0zyjsXzaUNgYbmffq" alt="" data-size="line"> on Navigator bar.

## To delete page

1. Select page in Navigator
2. Do one of the following:
   * Press `Delete`;
   * Select Edit > Delete;
   * Right click, select Delete;
   * Click <img src="/files/-MJ1HJ45pvw2kbOMAFS6" alt="" data-size="line"> on Navigator bar.


# Open page

<div align="left"><img src="/files/-MIxukOh92uq2QC0QODE" alt=""></div>

To open page:

1. Select page in Navigator
2. Do one of the following:
   * Double click page icon
   * Press `Ctrl`+`Return`
   * Right click, select Open page
   * Select Edit > Open page


# Page background and overlay

## Color fill

<div align="left"><img src="/files/-MIxukOfoWTfSzZmFRim" alt=""></div>

To fill page background with a solid color:

1. Select page in Navigator
2. Open Style Inspector
3. Click Color button in Background section and select color

## Image fill

<div align="left"><img src="/files/-MIxukOgO2qdHqHS2aDq" alt=""></div>

To insert custom image as a fill:

1. Select page in Navigator
2. Open Style Inspector
3. Click Image button in Background section and select image

To remove image click `—` button on the right

## Image overlay

1. Select page in Navigator
2. Open Style Inspector
3. Click Image button in Overlay section and select image

**Note:** overlay image is displayed above widgets.


# Widgets

Widget is a Layer with defined functionality that is basic building block for user interface components. There is a variety of widgets that make it easy to add interactive objects to your project.


# Image

Image or sequence of images user can swipe.

## Add image

<div align="left"><img src="/files/-MIxukPJPKH6ZqNIuHXF" alt=""></div>

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1Iy7xw0NdFJ0AXuYx" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Image
   * Click + on Toolbar
3. Select one or more image files

## Change image

<div align="left"><img src="/files/-MIxukPKLvql083-YVYq" alt=""></div>

1. Select Image widget
2. Open Widget Inspector
3. Double click image in table
4. Select image file

## Remove image

<div align="left"><img src="/files/-MIxukPNr_QBwS7dwFH5" alt=""></div>

1. Select Image widget
2. Open Widget Inspector
3. Select image in table
4. Press Del or click Remove

## Change images order

<div align="left"><img src="/files/-MIxukPMV2lF8nLPRrxL" alt=""></div>

1. Select Image widget
2. Open Widget Inspector
3. Drag image in table

## Customize image

<div align="left"><img src="/files/-MIxukPOlCrViHupnEEQ" alt=""></div>

1. Select Image widget
2. Open Widget Inspector
3. Select fill mode in Settings sector
4. Select gallery style from Style list

## Add labels

<div align="left"><img src="/files/-MIxukPLoOmYhPXffatk" alt=""></div>

1. Select Image widget
2. Open Widget Inspector
3. Enable Labels in Labels section
4. Double click Text cell beside image in table
5. Type text and press Enter
6. Customize labels:
   * Select Position from list (Top, Bottom or Center)
   * Click Background and select color
   * Open Font Inspector and set font settings

## Thumbnail display

<div align="left"><img src="/files/-MIxukPPo9eEdz_oezc8" alt=""></div>

1. Open Image widget
2. Open Widget Inspector
3. Select thumbnails mode from Thumbnails list:
   * None: hide thumbnails
   * Dots: show dots
   * Thumbnails: show thumbnails
4. To hide background disable Thumbnails background&#x20;


# Video

Movie file user can play

## Add video

<div align="left"><img src="/files/-MIxukPcMApxnscC3L4m" alt=""></div>

1. Select page in Navigator
2. Do one of the following:
   * Click <img src="/files/-MJ1JOyEzqQtMAtuerjs" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Video
   * Click + on Toolbar
3. Select video file

## Change video

<div align="left"><img src="/files/-MIxukPdKJfI1gBV9xwZ" alt=""></div>

1. Select Video widget
2. Open Widget Inspector
3. Click Select video
4. Select video file

## Playback panel

<div align="left"><img src="/files/-MIxukPe9Ruip5hHRx8W" alt=""></div>

1. Select Video widget
2. Open Widget Inspector
3. Select from Show playback list when to show playback panel:
   * Always: always show playback panel
   * Never: never show playback panel
   * Maximize: show playback panel when widget is maximized
4. Customize playback panel:
   * Enter panel height in Height field&#x20;
   * Select Background color\
     Enable Blurred to add blur effect (will work only with translucent background).&#x20;
   * Select Controls color
   * Select Slider color


# Text

Plain or formatted text

## Add Text widget

<div align="left"><img src="/files/-MIxukPbbr44sIROV1_W" alt=""></div>

1. Select page in Navigator
2. Do one of the following:
   * Click <img src="/files/-MJ1JedhFsEjWrIDeLsP" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Text&#x20;
   * Click + on Toolbar, select text file.
3. Open Widget Inspector
4. Paste or enter text into Text area

## Font settings

<div align="left"><img src="/files/-MIxukPaKZfZo91cDocL" alt=""></div>

1. Select Text widget in Navigator
2. Open Font Inspector
3. Set font settings

## Using HTML markup

<div align="left"><img src="/files/-MIxukSMF6l4XxHMXE9I" alt=""></div>

Text widgets are able to display styled text, specified using a subset of HTML 3.2 markup:

* `<b></b>` - bold
* `<strong></strong>` - bold
* `<i></i>` - italic
* `<br>` - new line
* `<p>` - paragraph
* `<u>` - underlined text
* `<font color="color_name" size="1-7"></font>`
* `<h1> to <h6>` - headers
* `<a href="">` - anchor
* `<img src="" align="top,middle,bottom" width="" height="">` - inline images
* `<ol type="">`, `<ul type="">` and `<li>` - ordered and unordered lists
* `<pre></pre>` - preformatted
* `&gt; &lt; &amp;`


# PDF

PDF document will be converted to Image widget

## Add PDF

<div align="left"><img src="/files/-MIxukPSt0Ecdxkh2up-" alt=""></div>

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1K-yzZ9BKrhcSUEq7" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > PDF
   * Click + on Toolbar
3. Select PDF file


# Web

Web browser user can navigate

## Add Web

<div align="left"><img src="/files/-MIxukPfqTOwe2yDR_MN" alt=""></div>

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1KAQWP7LsJjpPj-LP" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Web
3. Open Widget Inspector
4. Paste page url into Url field


# Diorama

An image with labels; user can pan and zoom.

<div align="left"><img src="/files/-MIxukPGOtc_z6oc-VI4" alt=""></div>

1. Select page in Navigator
2. Do one of the following:
   * Click <img src="/files/-MJ1KR7AihokcmzMraL8" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Diorama
3. Open Widget Inspector&#x20;
4. Click Add in Diorama section to add label&#x20;
5. Double click Text cell, enter text
6. Double click Image cell, select image from your Documents
7. Click Edit > Deselect to drag label in required place


# Audio

Audio file user can play

## Add audio

<div align="left"><img src="/files/-MIxukP7rMNQXBatS3vG" alt=""></div>

1. Select page in Navigator
2. Do one of the following:
   * Click <img src="/files/-MJ1Kb3o-giEjUFJ_lTu" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Audio
   * Click + on Toolbar
3. Select audio file

## Change audio

<div align="left"><img src="/files/-MIxukP8fvQ-TEQqZaFJ" alt=""></div>

1. Select Audio widget
2. Open Widget Inspector
3. Click Select audio
4. Select audio file

## Graphical equalizer

<div align="left"><img src="/files/-MIxukP930GK7ikovUHp" alt=""></div>

1. Select Audio widget
2. Open Widget Inspector
3. Enable Equalizer to show graphical equalizer
4. Customize equalizer:
   * Select color
   * Set bar width
   * Enable Dots to show dots instead of bars

## Playback panel

<div align="left"><img src="/files/-MIxukPA_V0JCo5Dj366" alt=""></div>

1. Select Audio widget
2. Open Widget Inspector
3. Select from Show playback list when to show playback panel:
   * Always: always show playback panel
   * Never: never show playback panel
   * Maximize: show playback panel when widget is maximized
4. Customize playback panel:
   * Enter panel height in Height field&#x20;
   * Select Background color\
     Enable Blurred to add blur effect (will work only with translucent background).&#x20;
   * Select Controls color
   * Select Slider color


# Animation

Sequence of images or animated gif user can play

## Add animation

<div align="left"><img src="/files/-MIxukP40uS4MwgA4LYR" alt=""></div>

To add animation:

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1L4B2LPJ0uAabh4D4" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Animation
3. Select video, multiple images or animated gif

**Note:** Video will convert to image sequence

## Change animation settings

<div align="left"><img src="/files/-MIxukP5tI2Cytt_dyR4" alt=""></div>

1. Select Animation widget
2. Open Widget Inspector
3. Select Fill mode
4. Select Frame rate to change playback speed\
   **Note:** not supported for Animated GIF files
5. Enable Autoplay to start playing when page is open
6. Enable Loop to loop playback

## Playback panel

<div align="left"><img src="/files/-MIxukP6f1RlT3PODIVo" alt=""></div>

1. Select Animation widget
2. Open Widget Inspector
3. Select from Show playback list when to show playback panel:
   * Always: always show playback panel
   * Never: never show playback panel
   * Maximize: show playback panel when widget is maximized
4. Customize playback panel:
   * Enter panel height in Height field&#x20;
   * Select Background color\
     Enable Blurred to add blur effect (will work only with translucent background).&#x20;
   * Select Controls color
   * Select Slider color


# Camera

Show camera's output

1. Select page in Navigator
2. Do one of the following:
   * Click <img src="/files/-MJ1LLrcz7-rkhx7X9Vy" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Camera.


# YouTube

YouTube video user can play

## Add YouTube video

<div align="left"><img src="/files/-MIxukPg5M5QetzCsm26" alt=""></div>

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1LX3c0qkeDcCdwwR3" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > YouTube
3. Open Widget Inspector
4. Paste the URL of the copied link to YouTube video in url

Supported YouTube URLs:

* Single video: <https://www.youtube.com/watch?v=FGK9ZUtpAo8>
* Playlist: <https://www.youtube.com/playlist?list=PLs0-AlxxQP_e1b-Xy1MwCnSRfCSjWjF2w>
* Channel: <https://www.youtube.com/user/ProMultitouch>

## Playback panel

<div align="left"><img src="/files/-MIxukPhu6gfUnBRf6mG" alt=""></div>

1. Select YouTube widget
2. Open Widget Inspector
3. Select from Show playback list when to show playback panel:
   * Always: always show playback panel
   * Never: never show playback panel
   * Maximize: show playback panel when widget is maximized
4. Customize playback panel:
   * Enter panel height in Height field&#x20;
   * Select Background color\
     Enable Blurred to add blur effect (will work only with translucent background).&#x20;
   * Select Controls color
   * Select Slider color


# Map

Online map user can navigate

## Add Google Maps

<div align="left"><img src="/files/-MIxukPQMNY67cnEiEWz" alt=""></div>

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1LkF8OR__953TqCEa" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Map
3. Open Widget Inspector
4. Paste your Google API key into Google api field

See how to get Google API key: <https://developers.google.com/maps/documentation/javascript/get-api-key>.

## Add custom map

<div align="left"><img src="/files/-MIxukPRNFYF-pDVmxgk" alt=""></div>

1. Select Map widget
2. Open Widget Inspector
3. Remove Google API key from Google api field
4. Paste Embed code into iFrame field


# Chart

Data charts and graphs

## Add chart

<div align="left"><img src="/files/-MIxukPDGuzV9ZCLh5Uh" alt=""></div>

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1Lypo9hDxCyU4kuE1" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Chart

## Change data

<div align="left"><img src="/files/-MIxukPFDBXu8kKlH1ws" alt=""></div>

1. Select chart
2. Open Databases Inspector
3. Click Edit data in Database section&#x20;
4. Open Data tab
5. Double click cell
6. Type value and press Enter

## Lines color

<div align="left"><img src="/files/-MIxukPEik6-bUV5gQ7_" alt=""></div>

1. Select chart
2. Open Widget Inspector
3. In Colors list select line
4. Click Selected color button
5. Select new color


# Calendar

Calendar with events user can navigate

## Add calendar

<div align="left"><img src="/files/-MIxukPBA_wkdNclWQzp" alt=""></div>

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1MFE5YhzJfnmho3Dj" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Calendar.

## Change data

<div align="left"><img src="/files/-MIxukPCY39-c3ZiIdQb" alt=""></div>

1. Select calendar
2. Open Databases Inspector
3. In Database section click SQL Designer
4. Select Data, enter changes


# Table

Displays data as list, flows or tables

## To add table widget

<div align="left"><img src="/files/-MIxukPTeFpe4II982OS" alt=""></div>

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1MTrIB6zZmSTc89Ke" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Table
3. Open Database Inspector
4. Do one of the following:&#x20;
   * Click Create to create new database
   * Click Open to select existing database

## Change database

<div align="left"><img src="/files/-MIxukPU08c43pghMZg6" alt=""></div>

To change database:

1. Select table widget
2. Open Database Inspector
3. Click Open
4. Select Database from Database list
5. Click Ok

## Select template

<div align="left"><img src="/files/-MIxukPZCepW7akvcOAS" alt=""></div>

To select template:

1. Select table widget
2. Open Widget Inspector
3. Select template in Templates section
4. For each Template field, select appropriate Table field and click Next

## Customize layout

To customize table layout:

1. Select table widget
2. Open Widget Inspector
3. Set new parameters in Table and Item sections

<div align="left"><img src="/files/-MIxukPXUaasWjoArVEX" alt=""></div>

<div align="left"><img src="/files/-MIxukPYsqkuRLiEGH63" alt=""></div>


# Form

Various form elements user can input

Form controls are the interactive components in your app's user interface. There is a wide variety of controls you can use in your project, such as buttons, text fields, sliders, checkboxes, lists, and many more. Each control has certain attributes that vary according to the selected input control type.

## Add form control

<div align="left"><img src="/files/-MIxukPH-vwHSigEK_3G" alt=""></div>

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1N-TcmDKb7afS0sMa" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Form
3. Open Widget Inspector
4. Select controls type from Type list

### Button

1. Select form widget
2. Select Button in&#x20;
3. Enter label text in Label field
4. Enable Checkable for two-states button that can be either checked or unchecked.
   * Enable or disable Checked to set initial state

### Image button

1. Click Image and select image file
2. Click Selected image and select image file for clicked or checked state
3. Change Image size to show text label. You can also select Image position.

### Text field

Single-line text input.

1. Enter initial text in Text field

### Text area

Multi-line text input.

1. Enter initial text in Text field

### Slider

Control that inputs a linear value.

1. Enter initial slider value in Index field
2. Set slider minimum and maximum values
3. Enter slider step size in Step field

### Listview

Listview is a view for presenting lists of data, especially long lists that require scrolling.

1. Enter list items in List field, each from new line
2. Enter initial selected index in Index field
3. Select vertical or horizontal orientation from Orientation list

### Switch

Control that provides a toggled value.

1. Enable or disable Checked to set initial state.

## Customize control style

<div align="left"><img src="/files/-MIxukPI0T8DSz85yT5c" alt=""></div>

1. Select Form
2. Open Widget Inspector
3. In Controls style section do one of the following:
   * Click Color to select new color (on the right is form color when checked);
   * Select border color (on the right - border color when checked) in border color field;
   * Select border size in border size field;
   * Select radius in border radius field;
   * Select color for checked text in selected font field;
   * Select button position in image position field, if ImageButton is selected;
   * Select button size in image size field, if ImageButton is selected;
   * Select slider color in slider color field (on the right - slider color when checked), if Slider is selected;
   * Select slider size in slider size field;
   * Select the number of visible items in visible items field, if Tumbler is selected.


# 3D Model

3D file user can manipulate


# Groups

A guide to work with Groups. Layers in your document can be grouped so they will appear as one layer. Like regular layers, groups can be moved, resized, rotated.


# Add group

## Group widgets:

<div align="left"><img src="/files/-MIxukOHX54Ik6jgq2P8" alt=""></div>

1. Select widgets in Navigator
2. Do one of the following:
   * Press Ctrl+G;
   * Right click, select Group selected items
   * Click Insert > Group selected items

## Add empty group:

<div align="left"><img src="/files/-MIxukOG1rb_eYJUsYyx" alt=""></div>

1. Select page in Navigator
2. Do one of the following:
   * Right click, select Add group
   * Click `tree/folder-plus` on Navigator bar
   * Click Insert > Add group

## Place widget into group

1. Select one or more widgets or groups
2. Drag selected layers into group in Navigator


# Move and resize group

Groups can be moved and resized like any layer. Child layers will be resized according to group size:

* [Move layer](https://app.gitbook.com/layers/move-layer.md)
* [Resize layer](https://app.gitbook.com/layers/resize-layer.md)

You can also lock width and height of child layer. This is only applicable for group resizing using Actions.

1. Select child layer
2. Open Geometry Inspector
3. Enable Fixed width or Fixed height


# Style

A guide to work with styles. How to change the color and opacity of a layer, set borders and margins, apply effects, etc.


# Opacity

You can adjust overall opacity of a widget:

<div align="left"><img src="/files/-MIxukP1PNUj3RAb76ef" alt=""></div>

To change opacity:

1. Select widget
2. Open Style Inspector
3. Set opacity in Opacity field in Style section

To hide part of widget you can use [Opacity mask](/style/opacity-mask).


# Borders

You can add borders to widgets. It can have various width, color, and radius.

<div align="left"><img src="/files/-MIxukOycxqaTskLe8ph" alt=""></div>

To add borders:

1. Select widget
2. Open Style Inspector
3. In the Border section customize border:
   * Set Border width\
     You can also set different border width for each side.
   * Click Color to select color
   * Set widget radius in Radius field


# Background

<div align="left"><img src="/files/-MIxukOwgCD0U3RsbpC6" alt=""></div>

## Color fill

To fill widget background with a solid color:

1. Select widget
2. Open Style Inspector
3. Click Background color in Background section

## Image fill

To insert custom image as a background:

1. Select widget
2. Open Style Inspector
3. Click Background image and select image file
4. Select image fill mode from the list

To remove image click — button on the right.


# Opacity mask

You can use opacity mask to hide part of widget. Mask is a grayscale image, so black areas are hidden, white areas are visible, and shades of gray areas appear in various levels of transparency.

<div align="left"><img src="/files/-MIxukP0iZavDWkdU4ui" alt=""></div>

To add opacity mask:

1. Select widget
2. Open Style Inspector
3. Click Mask image in Mask section and select image file
4. Select image fill mode from the list

To remove opacity mask image click — button on the right.


# Overlay

## Color overlay

You can replace widget colors with monochrome overlay.

<div align="left"><img src="/files/-MIxukP2YXc7IJufHSHg" alt=""></div>

To add color overlay:

1. Select widget
2. Open Style Inspector
3. Click Overlay color in Overlay section and select color

## To cancel color overlay

1. Click Overlay color in Overlay section
2. Select black color
3. Type 0 in Alpha channel field

## Image overlay

You can place image on top of widget. Blending modes determine how overlay image and widget are mixed into each other.

<div align="left"><img src="/files/-MIxukP3eXXW8pITuC6r" alt=""></div>

To add image overlay:

1. Select widget
2. Open Style Inspector
3. Click Overlay image and select image file
4. Select Blend mode


# Margins

Margins are used to generate space around widget's content. You can also set different margin for each side.

<div align="left"><img src="/files/-MIxukP-Z6JNXXaKaUa5" alt=""></div>

To add widget margins:

1. Select widget
2. Open Style Inspector
3. Set margin for each side in Margins section


# Blur

You can apply blur effect to widgets.

<div align="left"><img src="/files/-MIxukOxHmosD2vCdioJ" alt=""></div>

## Overall blur

1. Select widget
2. Open Style Inspector
3. Set blur in Blur size field

## Blur mask

Blur widget by alpha channel of image, so opaque areas are blurred, transparent areas are unblurred, and semi transparent areas appear in various levels of blur.

To add blur mask:

1. Select widget
2. Open Style Inspector
3. Click Blur mask and select image file


# Copy and paste style

You can quickly apply style from one layer to another. If you apply style to page, it will also apply to all children widgets.

<div align="left"><img src="/files/-MIxukOzF3GSgdnB5zGF" alt=""></div>

To copy and paste style:

1. Select layer in Navigator
2. To copy style, do one of the following:
   * Press `Ctrl+Shift+C`
   * Right click, select Copy style
   * Select Format > Copy style
3. Select another layer in Navigator
4. To paste style, do one of the following:
   * Press `Ctrl+Shift+V`
   * Right click, select Paste style
   * Select Format > Paste style

## Save and load styles


# Interactivity

A guide to adding interactivity to your app.


# Navigate between pages

To go to next page:

1. Drag right edge of page
2. Drag left edge of page to go to previous page

<div align="left"><img src="/files/-MIxukOiL6XuiXr9cPPU" alt=""></div>

To change turning area size:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Animation tab
4. Enter value in Turning area field in Interaction section


# Maximize widget

<div align="left"><img src="/files/-MIxukOLI261bhj40fxq" alt=""></div>

To allow user to maximize widget on click:

1. Select widget
2. Open Interaction Inspector
3. Enable Maximizable


# Drag widget

<div align="left"><img src="/files/-MIxukOKXzB_RNvK6zzN" alt=""></div>

To allow user to drag widget:

1. Select widget
2. Open Interaction Inspector
3. Disable Fixed checkbox
   * Enable Lock size to disable resizing
   * Enable Lock rotation to disable rotation
   * Enable Lock x to move along Y axis only&#x20;
   * Enable Lock y to move along X axis only


# Disable widget

<div align="left"><img src="/files/-MIxukOJ3l6_LEFWkJB-" alt=""></div>

To disallow user to interact with widget:

1. Select widget
2. Open Interaction Inspector
3. Disable Interactive


# Project

Overview of Project in Flipabit and explains what configurations are and how they relate to the app.


# Resolution

## Change project resolution

<div align="left"><img src="/files/-MIxukOpRWKWHPbLknwq" alt=""></div>

To edit project resolution:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings tab
4. Edit Width and Height

## Preview on different resolutions

<div align="left"><img src="/files/-MIxukOlt8IO1WdKyzRG" alt=""></div>

To preview on different resolution:

1. Click Device button on Bottom bar
2. Select required resolution in list

To stop preview:

1. Click Device button on Bottom bar
2. Select Default ratio in list


# Orientation

Project orientation depends on Width and Height value. If Height is larger than Width, project is in portrait orientation; if Width is larger than Height, project is in landscape orientation.

## Change orientation

To change project orientation:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings tab
4. Swap Width and Height values

## Auto orientation

To **lock** project orientation (ignore device orientation):

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings tab
4. Select Current from Orientation list&#x20;

<div align="left"><img src="/files/-MIxukRSbnVd8cm9IiLB" alt=""></div>

To **adapt** project orientation (redraw content in new orientation):

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings tab
4. Select Both from Orientation list

<div align="left"><img src="/files/-MIxukRQRmejXUnE_OmU" alt=""></div>


# Status Bar

Status bar is showing only on mobile devices.

<div align="left"><img src="/files/-MIxukOuLFXjnsJ-PAfQ" alt=""></div>

## Enable status bar

To enable Status bar:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings Tab
4. Enable Statusbar

## Status bar background color

To change Status bar background color:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings Tab
4. Click Background in Status bar section

## Status bar font color

To change Status bar font color:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings Tab
4. Enable Dark to set black font color or disable it to set white font color.

**Note:** not supported on Android 5 and earlier.


# Settings

## Asynchronous loading

Loads the widgets and assets asynchronously in the background. This allows you to show page immediately, even if the widgets still loading.

Synchronously block page render and waits for all widgets and their assets to be completely loaded.

To enable asynchronous loading:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings tab
4. Enable Asynchronous

<div align="left"><img src="/files/-MIxukOqHvESy2ixkYTM" alt=""></div>

## Loading on demand

Disable Load on demand to preload next and previous page.

To enable loading on demand:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings tab
4. Enable Load on demand

<div align="left"><img src="/files/-MIxukOrSM0pKEcqiv1D" alt=""></div>

## Mouse trail (Desktops only)

<div align="left"><img src="/files/-MIxukOmgaFvn1VeqKMf" alt=""></div>

To show mouse or touch trail:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings tab
4. Enable Show trail in Mouse trail section
5. Adjust Size and Color
6. Enable Random for random color for each touch (will ignore Color value)


# Publish settings

## Multiple resolution support

Adapt content to multiple screen sizes.

<div align="left"><img src="/files/-MIxukSK5yaVkIS5fOX-" alt=""></div>

<div align="left"><img src="/files/-MIxukOktPywMxfSDvJL" alt=""></div>

To set layout for different screen sizes:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Publish tab
4. Select Fill mode
5. Select Vertical and Horizontal align
6. Set Scale fonts

## Customize window (Desktops only)

Window type list describes what part of the screen the window occupies or should occupy.

<div align="left"><img src="/files/-MIxukOoeVCR2YWjzLog" alt=""></div>

To change window type:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Publish tab
4. Select type from Window type list:
   * **Fullscreen:** Application window occupies one entire screen, is not resizable, and there is no titlebar.&#x20;
   * **Maximized:** Application window occupies one entire screen, and the titlebar is still visible. In this state it is possible for the user to move and resize the window manually.&#x20;
   * **Fixed:** Application window occupies part of the screen equal to project size and the titlebar is still visible.

## Show or hide cursor (Desktops only)

To show cursor in standalone mode:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Settings tab
4. Enable Cursor

## Add splash screen (Desktops only)

A splash screen appears while a application is launching.

<div align="left"><img src="/files/-MIxukOtcJqpNrRcmXoG" alt=""></div>

To add splash screen image:

1. Select Project in Navigator
2. Open Project Inspector
3. Open Publish tab
4. Click splash
5. Select image

**Note:** image will be resized to fit the 512x512 px.


# Animation

A guide to adding animations to your app. Flipabit provides a very rich and diverse framework for supporting animations. This overview introduces how to create custom animations.


# Page animation

<div align="left"><img src="/files/-MIxukRMj5BU1ZwGwZkL" alt=""></div>

To change page animation type:

1. Select Project in Navigator
2. Open Animation tab in Project inspector
3. Select animation type in Page animation list

## Transition time

<div align="left"><img src="/files/-MIxukRNUqlu91lYKi9l" alt=""></div>

1. Select Project in Navigator
2. Open Animation tab in Project inspector
3. Enter transition time in Duration field (in milliseconds)

## Animate navigation layer

<div align="left"><img src="/files/-MIxukROhnYObRIsUFQe" alt=""></div>

You can enable or disable animation of Navigation page elements:

1. Select Project in Navigator
2. Open Animation tab in Project inspector
3. Enable Animate navigation in Page animation section

## Shadow

You can enable shadow effect for Flip and Scale animation:

1. Select Project in Navigator
2. Open Animation tab in Project inspector
3. Enable Shadow in Page animation section


# Maximize animation

<div align="left"><img src="/files/-MIxukOXxM20ZR3D5u04" alt=""></div>

1. Select Project in Navigator
2. Open Animation tab in Project inspector
3. Select animation type in Maximize animation list in Default animation section

## Duration

1. Select Project in Navigator
2. Open Animation tab in Project inspector
3. Enter time (in milliseconds) in Duration field in Default animation section


# Position animation

## X or Y animation

<div align="left"><img src="/files/-MIxukOA-gTJz1w_gCa6" alt=""></div>

1. Select widget
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Set X (or Set Y)
5. Enter value for X (or Y) argument (from 0 to 1)

## X and Y animation

<div align="left"><img src="/files/-MIxukO8QjUkzuyi78PJ" alt=""></div>

1. Select widget
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Set position
5. Enter value for X and Y arguments

## Texture animation

To animate texture only:

1. Select widget
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Set texture X (or Set texture Y)
5. Enter value for X (or Y) argument (from 0 to 1)


# Size animation

## Width or Height animation

<div align="left"><img src="/files/-MIxukO67svWkQa-gnSR" alt=""></div>

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Set Width (or Set Height)
5. Enter value for Width (or Height) argument

## Width and Height animation

<div align="left"><img src="/files/-MIxukO4jjDjOlxh_-Fx" alt=""></div>

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Set size
5. Enter value for Width and Height arguments

## Scale animation

<div align="left"><img src="/files/-MIxukO3Fwfh2IoCRFay" alt=""></div>

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Set scale
5. Enter value for Scale argument

**Note:** Scale changes texture size, not widget.


# Size and position animation

## Size and position animation

<div align="left"><img src="/files/-MIxukO5ImP1oufmPiK_" alt=""></div>

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Set size and position
5. Enter value for lt and rb arguments:
   * Enter distance from left or top edge in Value field for lt argument
   * Enter distance from right or bottom edge in Value field for rb argument

To restore resized widget to its previous size:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Set size and position cancel

## Maximize

<div align="left"><img src="/files/-MIxukNyJU6S5Lv2rmvm" alt=""></div>

To maximize widget to fullscreen:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Maximize

## Minimize (already maximized)

<div align="left"><img src="/files/-MIxukO-FlHcmSRQrIQ7" alt=""></div>

To restore maximized widget to its previous size:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Minimize

## Toggle maximize

<div align="left"><img src="/files/-MIxukOBQ9cRHktC13h4" alt=""></div>

This action maximize widget if it's minimized and minimize if it's maximized.

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell on highlighted row in Actions Editor
4. Select Actions > Animation > Toggle maximize


# Rotation animation

<div align="left"><img src="/files/-MIxukO2Uq8AVGlahtmJ" alt=""></div>

To add rotation animation:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell of highlighted row in Actions Editor
4. Select Actions > Animation > Rotate (or Rotate X, or Rotate Y)
5. Enter value for Angle argument


# Opacity animation

<div align="left"><img src="/files/-MIxukO03RzkXGQh371o" alt=""></div>

To add opacity animation:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell of highlighted row in Actions Editor
4. Select Actions > Animation > Set opacity
5. Enter value for Opacity argument (from 0 to 1)


# Color animation

## Background color animation

<div align="left"><img src="/files/-MIxukNxysUjev6HOa50" alt=""></div>

To add background color animation:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell of highlighted row in Actions Editor
4. Select Actions > Animation > Set color
5. Select Color

## Overlay color animation

<div align="left"><img src="/files/-MIxukO13jj6C0htpi1L" alt=""></div>

To add overlay color animation:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell of highlighted row in Actions Editor
4. Select Actions > Animation > Set overlay color
5. Select Color


# Blur animation

<div align="left"><img src="/files/-MIxukNwWJHMB9G_HJrE" alt=""></div>

To add blur animation:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell of highlighted row in Actions Editor
4. Select Actions > Animation > Set blur
5. Enter value for Blur argument (from 0 to 99)


# Actions

Action Editor is a visual programming tool that offers the development of complex actions and scripts without the need to write a code, along with processing of such events as click, double click, etc


# Actions Editor Overview

Action Editor is a visual programming tool that offers the development of complex actions and scripts without the need to write a code, along with processing of such events as click, double click, page open and close, changes to widget properties. You can also start and stop media, control navigation, hide and show items, animate widget position, size and appearance, and simply change any properties of projects, pages or widgets available in Inspector.

Any changes caused by such actions will be only kept until the end of the session and will not be saved when the project is closed. When working in Editor, any actions may be canceled by a click beyond the workspace. To suspend any actions in Editor, click Stop action under the Script Editor launch button.

The Action Editor interface comprises Table, Arguments Bar, Animation Bar, and Repeat Bar. With this interface, any actions, triggered by events in other items, may be created for various items. In Arguments Bar, values for actions and properties may be specified, such as the page to navigate to or the color to fill the widget background. Animation Bar allows settings the speed and animation type for animated actions, such as widget movement speed. To configure the action sequence, the Delay field is used to enter the time (in milliseconds) after which an action is performed. In Repeat Bar, the interval and number of repeats for any specified action may be set.

## Actions Editor Interface

<div align="left"><img src="/files/-MIxukNlkQF1zfAJsFP_" alt=""></div>

## Action Table

Action Table contains the list of added actions.

The **Source** column indicates the item whose event triggers an action (in another or the same item).

The **Event** column indicates the event that triggers an action.

The **Target** column indicates the item for which the action is triggered.

In the **Action** column, actions are selected.

To change the cell value, double-click the cell. In the drop-down menu, select the item, event, and action.

<div align="left"><img src="/files/-MJ6UGEohkXZ6ToqJ8Ow" alt=""></div>

## Argument Panel

After the action has been selected, the value for such action may be set in Arguments Bar. Certain actions do not take values, e.g., go to the next page. Other actions take multiple values simultaneously, e.g., in order to set a position, x and y values must be entered.

### Const value

By default, the argument type is a **Const**, i.e. the value entered in the field.

<div align="left"><img src="/files/-MJ6UQrgyWbfRKLpxz3M" alt=""></div>

### Property value

To pass other item’s property as a value, specify **Property** as the argument type. A list of items whose properties can be used appears on the right. Select the property in the list below.

<div align="left"><img src="/files/-MJ6UUSd59ShpodWCrhS" alt=""></div>

### Script value

To use a condition or a mathematical operation, select **Script** as the argument type. In the text field, enter the expression whose value will be the argument for the action.

<div align="left"><img src="/files/-MJ6U_6aqJWuJsbuXMi3" alt=""></div>

## Animation Panel

If the action is animatable, you may select the animation type and duration in Animation panel.

<div align="left"><img src="/files/-MJ6UdglVY8PAfc_mHm0" alt=""></div>

## Delay

To delay an action, use the Delay field. Enter the time in milliseconds. When the event occurs, the action will be executed only after the set time.

## Repeat Panel

To repeat the action multiple times, enter the number of repeats in Repeat panel. In the Interval field, specify the time after which the action will be repeated.

<div align="left"><img src="/files/-MJ6UhyFaVNtC6WsgVmg" alt=""></div>


# Add action

<div align="left"><img src="/files/-MIxukNoJ2zpM3RlV_n8" alt=""></div>

To add action:

1. Select item in Project tree
2. Select Insert > Action. The added action will be highlighted in Actions Editor.
3. Select Source and Event:
   * Double click Source cell to select source object
   * Double click Event cell to select event
4. Select Target and Action:
   * Double click Target cell to select target object
   * Double click Action cell to select action
5. Set action argument on Argument panel
6. Set Delay if necessary (in milliseconds)

## Duplicate action

<div align="left"><img src="/files/-MIxukNt0__SomNl0Pe2" alt=""></div>

To duplicate action:

1. Select action in Actions Editor
2. Press Ctrl+D or click Duplicate action <img src="/files/-MJ6VDq-ha3NXETCqiVr" alt="" data-size="line"> on Actions Editor toolbar

## Remove action

<div align="left"><img src="/files/-MIxukNsMhrU_8NkC5L-" alt=""></div>

To remove action:

1. Select action in Actions Editor
2. Press Del or click Remove action <img src="/files/-MJ6VN1mj9sh-jzRs6x1" alt="" data-size="line"> on Actions Editor toolbar


# Suspend actions

<div align="left"><img src="/files/-MIxukNvJsaZfS4ZJzYk" alt=""></div>

To temporary suspend actions:

1. Check Suspend actions button <img src="/files/-MJ0yuN_SBljIlfdGgxJ" alt="" data-size="line"> on Toolbar or press Ctrl+Alt+E


# Arguments

## Constant

<div align="left"><img src="/files/-MIxukOCaN8mPlXiFpdv" alt=""></div>

To add constant as argument:

1. Select action in Actions Editor
2. Select `Const` in Type list
3. Enter value for argument

## Property value

<div align="left"><img src="/files/-MIxukOD9LsHUZHbqEbr" alt=""></div>

To add object property as argument:

1. Select action in Actions Editor
2. Select `Property` in Type list
3. Select item in Object list
4. Select property in Property list

## JavaScript value

<div align="left"><img src="/files/-MIxukOF0ja5C3knX-gD" alt=""></div>

To add JavaScript expression as argument:

1. Select action in Actions Editor
2. Select `Script code` in Type list
3. Paste code in Code field


# Delay action

<div align="left"><img src="/files/-MIxukNrebQt2E4ShbPh" alt=""></div>

To delay execution of action:

1. Select action in Actions Editor
2. Double click the Delay cell and enter value (in milliseconds)


# Animation settings

<div align="left"><img src="/files/-MIxukNq20TZ2CiLLz4-" alt=""></div>

## Animation type

1. Select action in Actions Editor
2. Open Animation panel
3. Select animation in Type list

## Animation duration

1. Select action in Actions Editor
2. Open Animation panel
3. Enter value in Duration field (in milliseconds)

## Default animation

[How to change default animation](/animation/maximize-animation).


# Repeat action

<div align="left"><img src="/files/-MIxukNuaRuZysfs_ORQ" alt=""></div>

## Repeat count

To repeat action more than once:

1. Select action in Actions Editor
2. Open Repeat panel
3. Enter value in `Count` field

## Interval

To set repeat interval:

1. Select action in Actions Editor
2. Open Repeat panel
3. Enter value in `Interval` field (in milliseconds)


# Data & backend


# Airtable

Airtable is a cross between a spreadsheet and a database.

It's simpler than Firebase, but has some convenient features like support for media files, making it simpler to manage content than Google Sheets.

Airtable allows you to automate tasks based on your data. For example, you can perform actions based on various triggers like adding a new entry or changing an entry.

However, it does have one major drawback. Its API is limited to 5 requests per second, seriously limiting Airtable for general use.

To connect Airtable to Flipabit you need an API key.

1. Log in to your Airtable account

![](/files/0mEF1wVAjhLSvYsLv5v8)

2\. Click ‘Generate API Key’ if the key hasn’t been generated already

![](/files/wF5nnwUWYe0ngEiddM6V)

3\. In Airtable, open the table that you plan to import into Flipabit. Click ‘Help’ in the upper right corner, then click ‘API Documentation’.&#x20;

![](/files/lleuNgxNLTFOT630xQdP)

4\. In the page that opens, enable "show API key". From the menu on the left, click ‘Authentication’. Copy the URL from the right side in the ‘EXAMPLE USING QUERY PARAMETER’ section.

![](/files/doiHZAqgv6f154xFCfQx)

5\. In the Database inspector, click Create and select Airtable.

![](/files/nekYHmd4otSmTjoZ9ky7)

6\. Paste the URL into the Url text box in Flipabit. The URL contains the name of the first Airtable spreadsheet by default. You can replace it with the name of the table you need. Click ‘Download’ and wait until the import is finished.

![](/files/EYAZ0BmGiKekfK8wzwpN)

7\. To verify the imported data, go into the Database inspector, select the table, and click ‘Edit Data’.

![](/files/BOO01NJZijNKHux7fyGL)


# Google Sheets

Google Sheets is widely used for collaborating on spreadsheets across geographical locations. Multiple users can modify a Google Sheets document in real time.

If you have a simple application that doesn’t require complex back end development, you can use a Google spreadsheet to store your data. You can easily read and record data to the spreadsheet directly from the app or through a browser, and each change is immediately reflected in your app.

1. In the Database inspector, click Create, and select Google Sheets

![](/files/wlUqAitMwMDzMXro66Hw)

2\. Copy your spreadsheet’s URL and click ‘Download’

![](/files/yrpK7RrYHJJLKXiQqAoh)

3\. If this is your first time doing this, you will need to log in and allow Flipabit to make changes to your tables.

![](/files/ckT7hzXLL5APWg0boCm5)

4\. Select one or more tabs to import.

![](/files/y8ZfeysSPdaq2TUjHZ2j)

5\. Specify a column name with an identifier. An identifier is a unique row value. Numeric identifiers are the easiest option. The identifier is required for making changes or deleting rows. When adding a new row, Flipabit automatically calculates the identifier based on the auto increment.

![](/files/aLjeNlWZWoPerpHC8GaR)

6\. To verify the imported data, go into the Database inspector, select the table, and click ‘Edit Data’.

![](/files/9OpZEpK7Ad3te2bWEdqE)


# Networking

A guide to work with network requests and responses. Using rest api with Flipabit.

The XMLHttpRequest object allows the user to register a response handle function and a url. A request can be send using one of the http verbs (get, post, put, delete, ...) to make the request. When the response arrive the handle function is called. The handle function is called several times. Every-time the request state has changed (for example headers have arrived or request is done).

Here a short example:

```
function request() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
            print('HEADERS_RECEIVED');
        } else if(xhr.readyState === XMLHttpRequest.DONE) {
            print('DONE');
        }
    }
    xhr.open("GET", "http://example.com");
    xhr.send();
}
```

Read more:

* [MDN web docs - Using XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
* [QML Book - HTTP Requests](https://qmlbook.github.io/ch11/index.html#http-requests)
* [QML Book - Rest Api](https://qmlbook.github.io/ch11/index.html#http-requests)

## Examples

### Zapier

Using [Zapier ](https://zapier.com)Webhooks. Download the [zapier.pma](https://s3-us-west-2.amazonaws.com/flipabit/examples/zapier.pma) example.

1\. Create new ZAP <https://zapier.com/apps/email/integrations/webhook/62/turn-webhooks-into-sent-emails>

2\. Add following fields

<div align="left"><img src="/files/-MIxukSO-sYBdi1WowIz" alt=""></div>

3\. Edit Template

<div align="left"><img src="/files/-MIxukSNoBydHjkORjDd" alt=""></div>

4\. Turn on your ZAP

<div align="left"><img src="/files/-MIxukSPV2JrA1oGC9f3" alt=""></div>

5.Paste Webhook URL into code

<div align="left"><img src="/files/-MIxukSQybWxr6NcdIoJ" alt=""></div>

The code:

```
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

    if(xhr.readyState === XMLHttpRequest.DONE) {
        console.log("Status code is: " + xhr.status + " (" + xhr.statusText + ")")
        if (xhr.status == 200) {
            console.log("responseText: ")
            console.log(xhr.responseText.toString())            
            var json = JSON.parse(xhr.responseText.toString())
            console.log("json.status: ")
            console.log(json.status)
        }
    }
}

xhr.open("POST", "https://hooks.zapier.com/hooks/catch/YYYYYY/ZZZZZZ/");

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data =  "email="+encodeURIComponent("email@example.org") + 
            "&text="+encodeURIComponent("Message body text") + 
            "&subject="+encodeURIComponent("Email subject")

xhr.send(data)
```

### Mailgun

Send email with [mailgun](https://www.mailgun.com/). Download the [mailgun.pma](https://s3-us-west-2.amazonaws.com/flipabit/examples/mailgun.pma) example.

1\. Open domain info in mailgun dashboard

<div align="left"><img src="/files/-MIxukR0arvotSSMlxL_" alt=""></div>

2\. Use the following code to send email. Replace it with your **Domain** and **API Key**:

```
function request() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {        

        if(xhr.readyState === XMLHttpRequest.DONE) {
            console.log("Status code is: " + xhr.status + " (" + xhr.statusText + ")")

            if (xhr.status == 200) {
                console.log("responseText: ")
                console.log(xhr.responseText.toString())

                var json = JSON.parse(xhr.responseText.toString())
                console.log("json.message: ")
                console.log(json.message)
            }            
        }
    }

    xhr.open("POST", "https://api.mailgun.net/v3/sandboxXXXXXXXXXXXXXXXXXXXXXXXXXXXX.mailgun.org/messages");

    xhr.setRequestHeader('Authorization', "Basic " + Qt.btoa("api:key-YYYYYYYYYYYYYYYYYYYYYYYYY"));
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    var data =  "from="+encodeURIComponent("email@example.org") + 
                "&to="+encodeURIComponent("another@example.org") + 
                "&subject="+encodeURIComponent("Subject message") + 
                "&text="+encodeURIComponent("Message body text")

    xhr.send(data)
}
```

<div align="left"><img src="/files/-MIxukR1Eawmlbo8hnaH" alt=""></div>


# Tutorials

Guided tutorials to develop practical experience and build working apps. Start a Flipabit for iOS, Android, Windows or Mac.

## How to Build an iPhone Weather App 🌦

In this video series, we’ll be teaching you how to build a weather app with absolutely no coding in sight. ➡️ Creating a weather app that closely resembles the original iPhone app, you’ll learn how to make a fully functional system that includes all of the essential functions ✅

Despite its apparent simplicity, this app uses a variety of purposes that will involve you working with a database, formatting the output of text and images, receiving and processing REST API queries and much more!

{% embed url="<https://www.youtube.com/playlist?list=PLs0-AlxxQP_dtYkgojr_MpjHqSckUFy2d>" %}

## iOS Tutorial: How to Create and Install Your First App 📲

Take a look at our iOS tutorial and learn how to create and install your first app on iPhone! ➡️ This 7 minute video covers all of the important steps you must take in order to deploy your app. With a step-by-step video tutorial, this video teaches you how to create and then install your Ad-hoc iOS app on an iPhone without code! 📲 ➡️ From registering the new app ID and creating an Ad Hoc certificate, to generating the iOS provisioning profile as well as building and installing your first app, this is the ultimate app development tutorial you need right now.

{% embed url="<https://www.youtube.com/watch?v=dDGoce8E9Ew>" %}

## Push Notifications in iOS App using Firebase

Video shows you how to create and send Push Notifications in your iOS app. In this tutorial you are using Test App created here <https://youtu.be/dDGoce8E9Ew>

{% embed url="<https://www.youtube.com/watch?v=BJm0rI8iv_s>" %}

## How to publish Flipabit app to the iOS App Store

{% embed url="<https://www.youtube.com/watch?v=LTZfqvE9pEA>" %}

## How to Import Data from Google Sheet into Flipabit

{% embed url="<https://www.youtube.com/watch?v=RNw4KHbFykE>" %}

## How to Integrate Google AdMob in your App

{% embed url="<https://www.youtube.com/watch?v=CBoStibH-KQ>" %}

## How to Setup Firebase SMS Authentication

{% embed url="<https://www.youtube.com/watch?v=0riHEPrbN9U>" %}


# API

This section serves as a reference showing all of the properties of all objects available for use with Flipabit. Each description also links to the related Inspector panel.


# Project

| Property                | Function                                                                                                                                                                                                                                             | Type                                                                                                                                                                                                                                                         |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Current page title      | <p>Gets current page title<br><br><strong>Actions editor:</strong><br><code>Property > Project > Current page title</code><br><strong>Code:</strong><br><code>document.currentPageTitle</code></p>                                                   | `string`                                                                                                                                                                                                                                                     |
| Current page number     | <p>Gets current page number<br><br><strong>Actions editor:</strong><br><code>Property > Project > Current page number</code><br><strong>Code:</strong><br><code>document.currentPageNumber</code></p>                                                | `int`                                                                                                                                                                                                                                                        |
| Previous page title     | <p>Gets previous page title<br><br><strong>Actions editor:</strong><br><code>Property > Project > Previous page title</code><br><strong>Code:</strong><br><code>document.prevPageTitle</code></p>                                                    | `string`                                                                                                                                                                                                                                                     |
| Previous page number    | <p>Gets previous page number<br><br><strong>Actions editor:</strong><br><code>Property > Project > Previous page number</code><br><strong>Code:</strong><br><code>document.prevPageNumber</code></p>                                                 | `int`                                                                                                                                                                                                                                                        |
| Count pages             | <p>Gets count of pages<br><br><strong>Actions editor:</strong><br><code>Property > Project > Count pages</code><br><strong>Code:</strong><br><code>document.countPages</code></p>                                                                    | `int`                                                                                                                                                                                                                                                        |
| Is page changing        | <p>Gets true if page animation is in progress<br><br><strong>Actions editor:</strong><br><code>Property > Project > Is page changing</code><br><strong>Code:</strong><br><code>document.pageChanging</code></p>                                      | `bool`                                                                                                                                                                                                                                                       |
| Maximized title         | <p>Gets maximized widget title<br><br><strong>Actions editor:</strong><br><code>Property > Project > Maximized title</code><br><strong>Code:</strong><br><code>document.maximizedTitle</code></p>                                                    | `string`                                                                                                                                                                                                                                                     |
| Inactivity time         | <p>Gets inactivity time in seconds<br><br><strong>Actions editor:</strong><br><code>Property > Project > Inactivity time</code><br><strong>Code:</strong><br><code>document.inactivity</code></p>                                                    | `int`                                                                                                                                                                                                                                                        |
| Timestamp               | <p>Gets timestamp (number of seconds since 1970-01-01T00:00:00 Universal Coordinated Time).<br><br><strong>Actions editor:</strong><br><code>Property > Project > Timestamp</code><br><strong>Code:</strong><br><code>document.timeNumber</code></p> | `int`                                                                                                                                                                                                                                                        |
| Time string             | <p>Gets formatted time HH:MM:SS<br><br><strong>Actions editor:</strong><br><code>Property > Project > Time string</code><br><strong>Code:</strong><br><code>document.timeString</code></p>                                                           | `string`                                                                                                                                                                                                                                                     |
| Date time               | <p>Gets formatted datetime YYYY-MM-DD HH:MM:SS<br><br><strong>Actions editor:</strong><br><code>Property > Project > Date time</code><br><strong>Code:</strong><br><code>document.dateTime</code></p>                                                | `string`                                                                                                                                                                                                                                                     |
| Day                     | <p>Gets current day (1 to 31)<br><br><strong>Actions editor:</strong><br><code>Property > Project > Day</code><br><strong>Code:</strong><br><code>document.currentDay</code></p>                                                                     | `int`                                                                                                                                                                                                                                                        |
| Day of week             | <p>Gets current day of the week (1 = Monday to 7 = Sunday)<br><br><strong>Actions editor:</strong><br><code>Property > Project > Day of week</code><br><strong>Code:</strong><br><code>document.currentDayOfWeek</code></p>                          | `int`                                                                                                                                                                                                                                                        |
| Month                   | <p>Gets current month (1 to 12)<br><br><strong>Actions editor:</strong><br><code>Property > Project > Month</code><br><strong>Code:</strong><br><code>document.currentMonth</code></p>                                                               | `int`                                                                                                                                                                                                                                                        |
| Year                    | <p>Gets current year<br><br><strong>Actions editor:</strong><br><code>Property > Project > Year</code><br><strong>Code:</strong><br><code>document.currentYear</code></p>                                                                            | `int`                                                                                                                                                                                                                                                        |
| Have maximized item     | <p>Gets true if there is maximized widget<br><br><strong>Actions editor:</strong><br><code>Property > Project > Have maximized item</code><br><strong>Code:</strong><br><code>document.haveExpandedItem</code></p>                                   | `bool`                                                                                                                                                                                                                                                       |
| Pressed key             | <p>Gets last pressed key<br><br><strong>Actions editor:</strong><br><code>Property > Project > Pressed key</code><br><strong>Code:</strong><br><code>document.pressedKey</code></p>                                                                  | `int`                                                                                                                                                                                                                                                        |
| Released key            | <p>Gets last released key<br><br><strong>Actions editor:</strong><br><code>Property > Project > Released key</code><br><strong>Code:</strong><br><code>document.releasedKey</code></p>                                                               | `int`                                                                                                                                                                                                                                                        |
| Hold key                | <p>Gets last hold key<br><br><strong>Actions editor:</strong><br><code>Property > Project > Hold key</code><br><strong>Code:</strong><br><code>document.holdKey</code></p>                                                                           | `int`                                                                                                                                                                                                                                                        |
| Pressed key text        | <p>Gets last pressed key text<br><br><strong>Actions editor:</strong><br><code>Property > Project > Pressed key text</code><br><strong>Code:</strong><br><code>document.pressedKeyText</code></p>                                                    | `string`                                                                                                                                                                                                                                                     |
| Mouse x                 | <p>Gets mouse x position<br><br><strong>Actions editor:</strong><br><code>Property > Project > Mouse x</code><br><strong>Code:</strong><br><code>document.mouseX</code></p>                                                                          | `double`                                                                                                                                                                                                                                                     |
| Mouse y                 | <p>Gets mouse y position<br><br><strong>Actions editor:</strong><br><code>Property > Project > Mouse y</code><br><strong>Code:</strong><br><code>document.mouseY</code></p>                                                                          | `double`                                                                                                                                                                                                                                                     |
| Is online               | <p>Check if the internet connection is up<br><br><strong>Actions editor:</strong><br><code>Property > Project > Is online</code><br><strong>Code:</strong><br><code>document.isOnline</code></p>                                                     | `bool`                                                                                                                                                                                                                                                       |
| Os                      | <p>Gets name of the operating system<br><br><strong>Actions editor:</strong><br><code>Property > Project > Os</code><br><strong>Code:</strong><br><code>document.os</code></p>                                                                       | <p><code>string</code><br><br><strong>Values:</strong><br><code>android</code><br><code>ios</code><br><code>tvos</code><br><code>linux</code><br><code>osx</code><br><code>qnx</code><br><code>unix</code><br><code>windows</code><br><code>winrt</code></p> |
| Tablet                  | <p>Gets true if device is tablet or false if device is phone<br><br><strong>Actions editor:</strong><br><code>Property > Project > Tablet</code><br><strong>Code:</strong><br><code>document.tablet</code></p>                                       | `bool`                                                                                                                                                                                                                                                       |
| Landscape               | <p>Gets true if project orientation is Landscape<br><br><strong>Actions editor:</strong><br><code>Property > Project > Landscape</code><br><strong>Code:</strong><br><code>document.isLandscape</code></p>                                           | `bool`                                                                                                                                                                                                                                                       |
| Screen landscape        | <p>Gets true if screen orientation is Landscape<br><br><strong>Actions editor:</strong><br><code>Property > Project > Screen landscape</code><br><strong>Code:</strong><br><code>document.isScreenLandscape</code></p>                               | `bool`                                                                                                                                                                                                                                                       |
| RecordActive            | <p>Not documented<br><br><strong>Actions editor:</strong><br><code>Property > Project > RecordActive</code><br><strong>Code:</strong><br><code>document.recordActive</code></p>                                                                      | `bool`                                                                                                                                                                                                                                                       |
| Incoming content        | <p>Not documented<br><br><strong>Actions editor:</strong><br><code>Property > Project > Incoming content</code><br><strong>Code:</strong><br><code>document.incomingContent</code></p>                                                               | `string`                                                                                                                                                                                                                                                     |
| Push notification title | <p>Not documented<br><br><strong>Actions editor:</strong><br><code>Property > Project > Push notification title</code><br><strong>Code:</strong><br><code>document.pushNotificationTitle</code></p>                                                  | `string`                                                                                                                                                                                                                                                     |
| Push notification body  | <p>Not documented<br><br><strong>Actions editor:</strong><br><code>Property > Project > Push notification body</code><br><strong>Code:</strong><br><code>document.pushNotificationBody</code></p>                                                    | `string`                                                                                                                                                                                                                                                     |
| Locale                  | <p>Gets locale (en\_US, de\_DE, etc.)<br><br><strong>Actions editor:</strong><br><code>Property > Project > Locale</code><br><strong>Code:</strong><br><code>document.userLocale</code></p>                                                          | `string`                                                                                                                                                                                                                                                     |
| Device id               | <p>Gets device id<br><br><strong>Actions editor:</strong><br><code>Property > Project > Device id</code><br><strong>Code:</strong><br><code>document.deviceId</code></p>                                                                             | `string`                                                                                                                                                                                                                                                     |

## Settings

<div align="left"><img src="/files/-MIxukRwaWc6lrsh9Q9j" alt=""></div>

| Property         | Function                                                                                                                                                                                                                             | Type                                                                                                                             |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| Width            | Screen width                                                                                                                                                                                                                         | `int`                                                                                                                            |
| Height           | Screen height                                                                                                                                                                                                                        | `int`                                                                                                                            |
| Orientation      | <p>Screen orientation<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Orientation</code><br><strong>Code:</strong><br><code>document.allowOrientation</code></p>                                    | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Both</code><br><code>Landscape</code><br><code>Portrait</code></p> |
| Blur             | <p>Blur effect when flipping pages or maximizing widgets<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Blur</code><br><strong>Code:</strong><br><code>document.blurEnabled</code></p>             | `bool`                                                                                                                           |
| Cursor           | <p>Display cursor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Cursor</code><br><strong>Code:</strong><br><code>document.showCursor</code></p>                                                   | `bool`                                                                                                                           |
| Asynchronous     | Enable asynchronous loading                                                                                                                                                                                                          | `bool`                                                                                                                           |
| Load on demand   | Enable loading on demand                                                                                                                                                                                                             | `bool`                                                                                                                           |
| Page image cache | Enable page image cache                                                                                                                                                                                                              | `bool`                                                                                                                           |
| Screensaver      | <p>Interval for automatic page change when idle<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Screensaver</code><br><strong>Code:</strong><br><code>document.screensaverActivationTime</code></p> | `int`                                                                                                                            |
| Volume           | <p>Holds the audio volume from 0 (silence) to 100 (full volume)<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Volume</code><br><strong>Code:</strong><br><code>document.volume</code></p>         | `int`                                                                                                                            |

### Status bar

<div align="left"><img src="/files/-MIxukS-VDkhgTvLLkgl" alt=""></div>

| Property   | Function                                                                                                                                                                                                                      | Type    |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| Statusbar  | <p>Display status bar<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Status bar > Statusbar</code><br><strong>Code:</strong><br><code>document.settings.statusBarVisibility</code></p>      | `bool`  |
| Dark       | <p>Enable dark text of status bar<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Status bar > Dark</code><br><strong>Code:</strong><br><code>document.settings.statusBarDarkText</code></p> | `bool`  |
| Background | <p>Status bar background color<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Status bar > Background</code><br><strong>Code:</strong><br><code>document.settings.statusBarColor</code></p> | `color` |

### Mouse trail

<div align="left"><img src="/files/-MIxukRyckqkkiTr7bqI" alt=""></div>

| Property   | Function                                                                                                                                                                                                                                                    | Type    |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| Show trail | <p>Display trails from touches or gestures (only for Desktop apps)<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Mouse trail > Show trail</code><br><strong>Code:</strong><br><code>document.particlesVisible</code></p> | `bool`  |
| Color      | <p>Trail color<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Mouse trail > Color</code><br><strong>Code:</strong><br><code>document.particlesColor</code></p>                                                            | `color` |
| Random     | <p>Enable random trail color<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Mouse trail > Random</code><br><strong>Code:</strong><br><code>document.particlesRandomColor</code></p>                                       | `bool`  |
| Size       | <p>Trail size in pixels<br><br><strong>Actions editor:</strong><br><code>Property > Project > Settings > Mouse trail > Size</code><br><strong>Code:</strong><br><code>document.particlesSize</code></p>                                                     | `int`   |

## Animation

### Interaction

<div align="left"><img src="/files/-MIxukRrjmk1L54mp3zb" alt=""></div>

| Property     | Function                                                                                                                                                                                                                                                 | Type                                                                                                                        |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Drag area    | <p>Drag area size: margins only or all widget area.<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Interaction > Drag area</code><br><strong>Code:</strong><br><code>document.settings.floatingBlocks</code></p>      | <p><code>enum</code><br><br><strong>Values:</strong><br><code>1 - Margins only</code><br><code>2 - Entire widget</code></p> |
| Turning area | <p>Size of screen edges that allow turning the pages<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Interaction > Turning area</code><br><strong>Code:</strong><br><code>document.settings.turningAreaSize</code></p> | `double`                                                                                                                    |

### Default animation

<div align="left"><img src="/files/-MIxukRsSIzAhylOKDLk" alt=""></div>

| Property           | Function                                                                                                                                                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Maximize animation | <p>Maximize animation style<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Maximize > Maximize animation</code><br><strong>Code:</strong><br><code>document.settings.blockResizeAnimation</code></p>         | <p><code>enum</code><br><br><strong>Values:</strong><br><code>QEasingCurve::Linear</code><br><code>QEasingCurve::InQuad</code><br><code>QEasingCurve::OutQuad</code><br><code>QEasingCurve::InOutQuad</code><br><code>QEasingCurve::OutInQuad</code><br><code>QEasingCurve::InCubic</code><br><code>QEasingCurve::OutCubic</code><br><code>QEasingCurve::InOutCubic</code><br><code>QEasingCurve::OutInCubic</code><br><code>QEasingCurve::InQuart</code><br><code>QEasingCurve::OutQuart</code><br><code>QEasingCurve::InOutQuart</code><br><code>QEasingCurve::OutInQuart</code><br><code>QEasingCurve::InQuint</code><br><code>QEasingCurve::OutQuint</code><br><code>QEasingCurve::InOutQuint</code><br><code>QEasingCurve::OutInQuint</code><br><code>QEasingCurve::InSine</code><br><code>QEasingCurve::OutSine</code><br><code>QEasingCurve::InOutSine</code><br><code>QEasingCurve::OutInSine</code><br><code>QEasingCurve::InExpo</code><br><code>QEasingCurve::OutExpo</code><br><code>QEasingCurve::InOutExpo</code><br><code>QEasingCurve::OutInExpo</code><br><code>QEasingCurve::InCirc</code><br><code>QEasingCurve::OutCirc</code><br><code>QEasingCurve::InOutCirc</code><br><code>QEasingCurve::OutInCirc</code><br><code>QEasingCurve::InElastic</code><br><code>QEasingCurve::OutElastic</code><br><code>QEasingCurve::InOutElastic</code><br><code>QEasingCurve::OutInElastic</code><br><code>QEasingCurve::InBack</code><br><code>QEasingCurve::OutBack</code><br><code>QEasingCurve::InOutBack</code><br><code>QEasingCurve::OutInBack</code><br><code>QEasingCurve::InBounce</code><br><code>QEasingCurve::OutBounce</code><br><code>QEasingCurve::InOutBounce</code><br><code>QEasingCurve::OutInBounce</code></p> |
| Duration           | <p>Maximize animation duration in milliseconds<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Maximize > Duration</code><br><strong>Code:</strong><br><code>document.settings.blockResizeDuration</code></p> | `int`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |

### Page animation

<div align="left"><img src="/files/-MIxukRtveZBekJHgYf9" alt=""></div>

| Property           | Function                                                                                                                                                                                                                          | Type                                                                                                                                                                                                                                                                                                                                                    |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Page animation     | <p>Page animation style<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Page > Page animation</code><br><strong>Code:</strong><br><code>document.settings.pageChangerType</code></p>            | <p><code>enum</code><br><br><strong>Values:</strong><br><code>0 - Flip</code><br><code>2 - Swipe</code><br><code>3 - Transition</code><br><code>4 - Scale</code><br><code>5 - Card</code></p>                                                                                                                                                           |
| Duration           | <p>Page animation duration<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Page > Duration</code><br><strong>Code:</strong><br><code>document.settings.pageChangingDuration</code></p>          | `int`                                                                                                                                                                                                                                                                                                                                                   |
| Shadow             | <p>Display shadow<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Page > Shadow</code><br><strong>Code:</strong><br><code>document.settings.pageChangerShadow</code></p>                        | `bool`                                                                                                                                                                                                                                                                                                                                                  |
| Animate navigation | <p>Animate navigation layer<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Page > Animate navigation</code><br><strong>Code:</strong><br><code>document.settings.navigationAnimated</code></p> | `bool`                                                                                                                                                                                                                                                                                                                                                  |
| Direction          | <p>Animation direction<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Page > Direction</code><br><strong>Code:</strong><br><code>document.settings.pageChangerSwipeDirection</code></p>        | <p><code>enum</code><br><br><strong>Values:</strong><br><code>SwipeLeftToRight</code><br><code>SwipeTopToBottom</code></p>                                                                                                                                                                                                                              |
| Transition         | <p>Transition style<br><br><strong>Actions editor:</strong><br><code>Property > Project > Animation > Page > Transition</code><br><strong>Code:</strong><br><code>document.settings.pageChangerVideoMaskType</code></p>           | <p><code>enum</code><br><br><strong>Values:</strong><br><code>VideoMaskArrows</code><br><code>VideoMaskBurn</code><br><code>VideoMaskCards</code><br><code>VideoMaskCircles</code><br><code>VideoMaskDrip</code><br><code>VideoMaskDynamic</code><br><code>VideoMaskShatter</code><br><code>VideoMaskSpiral</code><br><code>VideoMaskStripes</code></p> |

## Publish

<div align="left"><img src="/files/-MIxukRus6mvine531KY" alt=""></div>

| Property              | Function                                                                                                                                                                                                                                                   | Type                                                                                                                                                  |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| Fill mode             | <p>Defines what happens when the device screen resolution has a different size.<br><br><strong>Actions editor:</strong><br><code>Property > Project > Publish > Fill mode</code><br><strong>Code:</strong><br><code>document.ratioFillMode</code></p>      | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>Fit</code><br><code>Pad</code></p>                              |
| Vertical              | <p>Vertical alignment<br><br><strong>Actions editor:</strong><br><code>Property > Project > Publish > Vertical</code><br><strong>Code:</strong><br><code>document.ratioAnchorsVertical</code></p>                                                          | <p><code>int</code><br><br><strong>Values:</strong><br><code>Qt::AlignTop</code><br><code>Qt::AlignBottom</code><br><code>Qt::AlignVCenter</code></p> |
| Horizontal            | <p>Horizontal alignment<br><br><strong>Actions editor:</strong><br><code>Property > Project > Publish > Horizontal</code><br><strong>Code:</strong><br><code>document.ratioAnchorsHorizontal</code></p>                                                    | <p><code>int</code><br><br><strong>Values:</strong><br><code>Qt::AlignLeft</code><br><code>Qt::AlignRight</code><br><code>Qt::AlignHCenter</code></p> |
| Fullscreen maximize   | <p>Maximize widgets to fullscreen regardless of the fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Project > Publish > Fullscreen maximize</code><br><strong>Code:</strong><br><code>document.ratioExpanded</code></p>              | `bool`                                                                                                                                                |
| Fullscreen background | <p>Fit page background image to fullscreen regardless of the fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Project > Publish > Fullscreen background</code><br><strong>Code:</strong><br><code>document.ratioBackground</code></p> | `bool`                                                                                                                                                |
| Scale fonts           | <p>Scale fonts<br><br><strong>Actions editor:</strong><br><code>Property > Project > Publish > Scale fonts</code><br><strong>Code:</strong><br><code>document.ratioFont</code></p>                                                                         | `bool`                                                                                                                                                |
| Window type           | Sets window type of exported project. Possible values are: Fullscreen, Maximized or Fixed sized                                                                                                                                                            | `int`                                                                                                                                                 |
| Force project size    | Enable fullscreen on multiple monitors                                                                                                                                                                                                                     | `bool`                                                                                                                                                |
| Window title          | Sets window title of exported project                                                                                                                                                                                                                      | `string`                                                                                                                                              |
| Start page            | Sets start page of exported project                                                                                                                                                                                                                        | `int`                                                                                                                                                 |
| Google analytics      | Sets Google Analytics Id (GA\_TRACKING\_ID)                                                                                                                                                                                                                | `string`                                                                                                                                              |
| Rotate maximized item | <p>Enable to allow rotation of maximized item<br><br><strong>Actions editor:</strong><br><code>Property > Project > Publish > Rotate maximized item</code><br><strong>Code:</strong><br><code>document.rotateMaximized</code></p>                          | `bool`                                                                                                                                                |
| Video renderer        | Sets video renderer (for Windows only)                                                                                                                                                                                                                     | `string`                                                                                                                                              |

## Sensors

<div align="left"><img src="/files/-MIxukRv_FDxyKblXdMf" alt=""></div>

### Accelerometer

| Property       | Function                                                                                                                                                                                                                        | Type     |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| AccelerometerX | <p>Gets acceleration on the X axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Accelerometer > AccelerometerX</code><br><strong>Code:</strong><br><code>document.accelerometerX</code></p>  | `double` |
| AccelerometerY | <p>Gets acceleration on the Y axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Accelerometer > AccelerometerY</code><br><strong>Code:</strong><br><code>document.accelerometerY</code></p>  | `double` |
| AccelerometerZ | <p>Gets acceleration on the Z axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Accelerometer > AccelerometerZ</code><br><strong>Code:</strong><br><code>document.accelerometerZ</code></p>  | `double` |
| Accelerometer  | <p>Enable accelerometer sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Accelerometer > Accelerometer</code><br><strong>Code:</strong><br><code>document.accelerometerEnabled</code></p> | `bool`   |

### Ambient

| Property            | Function                                                                                                                                                                                                                                                      | Type     |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Ambient light       | <p>Gets ambient light level<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Ambient > Ambient light</code><br><strong>Code:</strong><br><code>document.ambientLightSensorLevel</code></p>                                     | `int`    |
| Ambient temperature | <p>Gets ambient temperature in degree Celsius<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Ambient > Ambient temperature</code><br><strong>Code:</strong><br><code>document.ambientTemperatureSensorTemperature</code></p> | `double` |
| Light (amb)         | <p>Enable ambient light sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Ambient > Light (amb)</code><br><strong>Code:</strong><br><code>document.ambientLightSensorEnabled</code></p>                                  | `bool`   |
| Temperature (amb)   | <p>Enable ambient temperature sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Ambient > Temperature (amb)</code><br><strong>Code:</strong><br><code>document.ambientTemperatureSensorEnabled</code></p>                | `bool`   |

### Compass

| Property        | Function                                                                                                                                                                                                             | Type     |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Compass azimuth | <p>Gets azimuth of the device<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Compass > Compass azimuth</code><br><strong>Code:</strong><br><code>document.compassAzimuth</code></p> | `double` |
| Compass         | <p>Enable compass sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Compass > Compass</code><br><strong>Code:</strong><br><code>document.compassEnabled</code></p>              | `bool`   |

### Gyroscope

| Property    | Function                                                                                                                                                                                                                    | Type     |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Gyroscope x | <p>Gets angular velocity around the x axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Gyroscope > Gyroscope x</code><br><strong>Code:</strong><br><code>document.gyroscopeX</code></p> | `double` |
| Gyroscope y | <p>Gets angular velocity around the y axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Gyroscope > Gyroscope y</code><br><strong>Code:</strong><br><code>document.gyroscopeY</code></p> | `double` |
| Gyroscope z | <p>Gets angular velocity around the z axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Gyroscope > Gyroscope z</code><br><strong>Code:</strong><br><code>document.gyroscopeZ</code></p> | `double` |
| Gyroscope   | <p>Enable gyroscope sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Gyroscope > Gyroscope</code><br><strong>Code:</strong><br><code>document.gyroscopeEnabled</code></p>             | `bool`   |

### Light

| Property          | Function                                                                                                                                                                                                           | Type     |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| Light illuminance | <p>Gets light level<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Light > Light illuminance</code><br><strong>Code:</strong><br><code>document.lightSensorIlluminance</code></p> | `double` |
| Light             | <p>Enable light sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Light > Light</code><br><strong>Code:</strong><br><code>document.lightSensorEnabled</code></p>              | `bool`   |

### Magnetometer

| Property       | Function                                                                                                                                                                                                                                  | Type     |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Magnetometer x | <p>Gets raw magnetic flux density on the X axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Magnetometer > Magnetometer x</code><br><strong>Code:</strong><br><code>document.magnetometerX</code></p> | `double` |
| Magnetometer y | <p>Gets raw magnetic flux density on the Y axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Magnetometer > Magnetometer y</code><br><strong>Code:</strong><br><code>document.magnetometerY</code></p> | `double` |
| Magnetometer z | <p>Gets raw magnetic flux density on the Z axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Magnetometer > Magnetometer z</code><br><strong>Code:</strong><br><code>document.magnetometerZ</code></p> | `double` |
| Magnetometer   | <p>Enable magnetometer sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Magnetometer > Magnetometer</code><br><strong>Code:</strong><br><code>document.magnetometerEnabled</code></p>               | `bool`   |

### Orientation

| Property          | Function                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Type   |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ |
| Orientation value | <p>Gets orientation of the device<br>0 - The orientation is unknown.<br>1 - The Top edge of the device is pointing up.<br>2 - The Top edge of the device is pointing down.<br>3 - The Left edge of the device is pointing up.<br>4 - The Right edge of the device is pointing up.<br>5 - The Face of the device is pointing up.<br>6 - The Face of the device is pointing down.<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Orientation > Orientation value</code><br><strong>Code:</strong><br><code>document.orientationSensorOrientation</code></p> | `int`  |
| Orientation       | <p>Enable orientation sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Orientation > Orientation</code><br><strong>Code:</strong><br><code>document.orientationSensorEnabled</code></p>                                                                                                                                                                                                                                                                                                                                                              | `bool` |

### Pressure

| Property             | Function                                                                                                                                                                                                                                                               | Type     |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Pressure value       | <p>Gets atmospheric pressure value in Pascals<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Pressure > Pressure value</code><br><strong>Code:</strong><br><code>document.pressureSensorPressure</code></p>                           | `double` |
| Pressure temperature | <p>Gets pressure sensor's temperature value in degrees Celsius<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Pressure > Pressure temperature</code><br><strong>Code:</strong><br><code>document.pressureSensorTemperature</code></p> | `double` |
| Pressure             | <p>Enable pressure sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Pressure > Pressure</code><br><strong>Code:</strong><br><code>document.pressureSensorEnabled</code></p>                                                      | `bool`   |

### Proximity

| Property        | Function                                                                                                                                                                                                                                    | Type   |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| Proximity value | <p>Gets value indicating if something is near<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Proximity > Proximity value</code><br><strong>Code:</strong><br><code>document.proximitySensorNear</code></p> | `bool` |
| Proximity       | <p>Enable proximity sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Proximity > Proximity</code><br><strong>Code:</strong><br><code>document.proximitySensorEnabled</code></p>                       | `bool` |

### Rotation

| Property   | Function                                                                                                                                                                                                               | Type     |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Rotation x | <p>Gets rotation around the x axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Rotation > Rotation x</code><br><strong>Code:</strong><br><code>document.rotationSensorX</code></p> | `double` |
| Rotation y | <p>Gets rotation around the y axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Rotation > Rotation y</code><br><strong>Code:</strong><br><code>document.rotationSensorY</code></p> | `double` |
| Rotation z | <p>Gets rotation around the z axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Rotation > Rotation z</code><br><strong>Code:</strong><br><code>document.rotationSensorZ</code></p> | `double` |
| Rotation   | <p>Enable rotation sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Rotation > Rotation</code><br><strong>Code:</strong><br><code>document.rotationSensorEnabled</code></p>      | `bool`   |

### Tilt

| Property        | Function                                                                                                                                                                                                                      | Type     |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Tilt rotation x | <p>Gets amount of tilt on the X axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Tilt > Tilt rotation x</code><br><strong>Code:</strong><br><code>document.tiltSensorXRotation</code></p> | `double` |
| Tilt rotation y | <p>Gets amount of tilt on the Y axis<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Tilt > Tilt rotation y</code><br><strong>Code:</strong><br><code>document.tiltSensorYRotation</code></p> | `double` |
| Tilt            | <p>Enable tilt sensor<br><br><strong>Actions editor:</strong><br><code>Property > Project > Sensors > Tilt > Tilt</code><br><strong>Code:</strong><br><code>document.tiltSensorEnabled</code></p>                             | `bool`   |

## Actions

| Property                     | Function                                                                                                                                                                                                                                                                     |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Go to page                   | <p>Open page by id<br><br><strong>Actions editor:</strong><br><code>Actions > Go to page</code><br><strong>Code:</strong><br><code>document.script.actionShowObjectById(int id)</code></p>                                                                                   |
| Go to page number            | <p>Open page by number<br><br><strong>Actions editor:</strong><br><code>Actions > Go to page number</code><br><strong>Code:</strong><br><code>document.script.actionShowObjectByNum(int num)</code></p>                                                                      |
| Next page                    | <p>Open next page<br><br><strong>Actions editor:</strong><br><code>Actions > Next page</code><br><strong>Code:</strong><br><code>document.script.actionTurnForward()</code></p>                                                                                              |
| Prev page                    | <p>Open prev page<br><br><strong>Actions editor:</strong><br><code>Actions > Prev page</code><br><strong>Code:</strong><br><code>document.script.actionTurnBackward()</code></p>                                                                                             |
| Execute                      | <p>Execute custom script<br><br><strong>Actions editor:</strong><br><code>Actions > Execute</code><br><strong>Code:</strong><br><code>document.script.actionExecute(QString code)</code></p>                                                                                 |
| Quit                         | <p>Close application<br><br><strong>Actions editor:</strong><br><code>Actions > Quit</code><br><strong>Code:</strong><br><code>document.script.actionQuit()</code></p>                                                                                                       |
| Rotate                       | <p>Rotate the screen by 180 degree<br><br><strong>Actions editor:</strong><br><code>Actions > Rotate</code><br><strong>Code:</strong><br><code>document.script.actionRotate()</code></p>                                                                                     |
| Print                        | <p>Print current page on default printer<br><br><strong>Actions editor:</strong><br><code>Actions > Print</code><br><strong>Code:</strong><br><code>document.script.actionPrint()</code></p>                                                                                 |
| Minimize all                 | <p>Minimize all maximized items<br><br><strong>Actions editor:</strong><br><code>Actions > Minimize all</code><br><strong>Code:</strong><br><code>document.script.actionShrinkAll()</code></p>                                                                               |
| Stop all media               | <p>Stop playing all media<br><br><strong>Actions editor:</strong><br><code>Actions > Stop all media</code><br><strong>Code:</strong><br><code>document.script.actionStopAll()</code></p>                                                                                     |
| Save as image                | <p>Save current page as image to default Documents folder<br><br><strong>Actions editor:</strong><br><code>Actions > Save as image</code><br><strong>Code:</strong><br><code>document.script.actionSaveAsImage(QString fileName)</code></p>                                  |
| Save text to file            | <p>Save text to the file created in Documents folder<br><br><strong>Actions editor:</strong><br><code>Actions > Save text to file</code><br><strong>Code:</strong><br><code>document.script.actionSaveToFile(QString fileName, QString text, bool overwrite)</code></p>      |
| Backward                     | <p><strong>Actions editor:</strong><br><code>Actions > Backward</code><br><strong>Code:</strong><br><code>document.script.actionBackward()</code></p>                                                                                                                        |
| Forward                      | <p><strong>Actions editor:</strong><br><code>Actions > Forward</code><br><strong>Code:</strong><br><code>document.script.actionForward()</code></p>                                                                                                                          |
| Open Url                     | <p>If the specified URL scheme is handled by another app, OS launches that app and passes the URL to it.<br><br><strong>Actions editor:</strong><br><code>Actions > Open Url</code><br><strong>Code:</strong><br><code>document.script.actionOpenUrl(QString url)</code></p> |
| Unload unused pages          | <p>Unload pages, keep in memory only current page<br><br><strong>Actions editor:</strong><br><code>Actions > Unload unused pages</code><br><strong>Code:</strong><br><code>document.script.actionUnloadUnusedPages()</code></p>                                              |
| Open camera picker           | <p><strong>Actions editor:</strong><br><code>Actions > Open camera picker</code><br><strong>Code:</strong><br><code>document.script.actionOpenCameraPicker()</code></p>                                                                                                      |
| Open photo picker            | <p><strong>Actions editor:</strong><br><code>Actions > Open photo picker</code><br><strong>Code:</strong><br><code>document.script.actionOpenPhotoPicker()</code></p>                                                                                                        |
| Download url                 | <p><strong>Actions editor:</strong><br><code>Actions > Download url</code><br><strong>Code:</strong><br><code>document.script.actionDownload(QString url)</code></p>                                                                                                         |
| Remove downloads             | <p>Remove downloaded file by name, empty filename to remove all files<br><br><strong>Actions editor:</strong><br><code>Actions > Remove downloads</code><br><strong>Code:</strong><br><code>document.script.actionRemoveDownloads(QString filename)</code></p>               |
| Abort all downloads          | <p><strong>Actions editor:</strong><br><code>Actions > Abort all downloads</code><br><strong>Code:</strong><br><code>document.script.actionAbortDownloads()</code></p>                                                                                                       |
| Get downloaded file by index | <p>Get downloaded file by index<br><br><strong>Actions editor:</strong><br><code>Actions > Get downloaded file by index</code><br><strong>Code:</strong><br><code>document.script.actionGetDownloadedFileByIndex(int index)</code></p>                                       |
| Get downloaded file by name  | <p>Get downloaded file by name<br><br><strong>Actions editor:</strong><br><code>Actions > Get downloaded file by name</code><br><strong>Code:</strong><br><code>document.script.actionGetDownloadedFileByName(QString filename)</code></p>                                   |

## Events

| Property            | Function                                                                                                                                                                                                             |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Changed             | <p>Event when any property is changed<br><br><strong>Actions editor:</strong><br><code>Event > Changed</code><br><strong>Code:</strong><br><code>document.script.eventChanged()</code></p>                           |
| Enter page          | <p>Event when any page was opened<br><br><strong>Actions editor:</strong><br><code>Event > Enter page</code><br><strong>Code:</strong><br><code>document.script.eventEnteredPage()</code></p>                        |
| Leave page          | <p>Event when leave any page<br><br><strong>Actions editor:</strong><br><code>Event > Leave page</code><br><strong>Code:</strong><br><code>document.script.eventLeavedPage()</code></p>                              |
| Open project        | <p>Event when project is opened<br><br><strong>Actions editor:</strong><br><code>Event > Open project</code><br><strong>Code:</strong><br><code>document.script.eventOpenedProject()</code></p>                      |
| Project orientation | <p>Event when project orientation changed<br><br><strong>Actions editor:</strong><br><code>Event > Project orientation</code><br><strong>Code:</strong><br><code>document.script.eventOrientation()</code></p>       |
| Screen orientation  | <p>Event when device orientation changed<br><br><strong>Actions editor:</strong><br><code>Event > Screen orientation</code><br><strong>Code:</strong><br><code>document.script.eventScreenOrientation()</code></p>   |
| Maximized item      | <p>Event when any item is maximized<br><br><strong>Actions editor:</strong><br><code>Event > Maximized item</code><br><strong>Code:</strong><br><code>document.script.eventExpandItem()</code></p>                   |
| Minimized item      | <p>Event when any item is minimized<br><br><strong>Actions editor:</strong><br><code>Event > Minimized item</code><br><strong>Code:</strong><br><code>document.script.eventShrinkItem()</code></p>                   |
| Stop all media      | <p><strong>Actions editor:</strong><br><code>Event > Stop all media</code><br><strong>Code:</strong><br><code>document.script.eventStopAll()</code></p>                                                              |
| Key pressed         | <p>Event when key is pressed<br><br><strong>Actions editor:</strong><br><code>Event > Key pressed</code><br><strong>Code:</strong><br><code>document.script.eventKeyPressed()</code></p>                             |
| Key released        | <p>Event when key is released<br><br><strong>Actions editor:</strong><br><code>Event > Key released</code><br><strong>Code:</strong><br><code>document.script.eventKeyReleased()</code></p>                          |
| Key hold            | <p>Event when key is hold<br><br><strong>Actions editor:</strong><br><code>Event > Key hold</code><br><strong>Code:</strong><br><code>document.script.eventKeyHold()</code></p>                                      |
| Back pressed        | <p>Event when back is pressed on Android device<br><br><strong>Actions editor:</strong><br><code>Event > Back pressed</code><br><strong>Code:</strong><br><code>document.script.eventAndroidBackPressed()</code></p> |
| Pressed             | <p>Event when mouse is pressed on page or widget<br><br><strong>Actions editor:</strong><br><code>Event > Pressed</code><br><strong>Code:</strong><br><code>document.script.eventPressed()</code></p>                |
| Clicked             | <p>Event when mouse is released on page or widget<br><br><strong>Actions editor:</strong><br><code>Event > Clicked</code><br><strong>Code:</strong><br><code>document.script.eventClicked()</code></p>               |
| Mouse moved         | <p>Event when mouse is moved on page or widget<br><br><strong>Actions editor:</strong><br><code>Event > Mouse moved</code><br><strong>Code:</strong><br><code>document.script.eventMouseMoved()</code></p>           |
| Online status       | <p>Event when network connection is changed<br><br><strong>Actions editor:</strong><br><code>Event > Online status</code><br><strong>Code:</strong><br><code>document.script.eventOnlineStatus()</code></p>          |
| Mouse over          | <p>Event when mouse over page or widget<br><br><strong>Actions editor:</strong><br><code>Event > Mouse over</code><br><strong>Code:</strong><br><code>document.script.eventMouseOver()</code></p>                    |
| Minimized item end  | <p>Event when any item is minimized end<br><br><strong>Actions editor:</strong><br><code>Event > Minimized item end</code><br><strong>Code:</strong><br><code>document.script.eventShrinkItemEnd()</code></p>        |
| Maximized item end  | <p>Event when any item is maximized end<br><br><strong>Actions editor:</strong><br><code>Event > Maximized item end</code><br><strong>Code:</strong><br><code>document.script.eventExpandItemEnd()</code></p>        |
| Swipe left          | <p>Event when swipe left<br><br><strong>Actions editor:</strong><br><code>Event > Swipe left</code><br><strong>Code:</strong><br><code>document.script.eventSwipeLeft()</code></p>                                   |
| Swipe right         | <p>Event when swipe right<br><br><strong>Actions editor:</strong><br><code>Event > Swipe right</code><br><strong>Code:</strong><br><code>document.script.eventSwipeRight()</code></p>                                |
| Swipe up            | <p>Event when swipe up<br><br><strong>Actions editor:</strong><br><code>Event > Swipe up</code><br><strong>Code:</strong><br><code>document.script.eventSwipeUp()</code></p>                                         |
| Swipe down          | <p>Event when swipe down<br><br><strong>Actions editor:</strong><br><code>Event > Swipe down</code><br><strong>Code:</strong><br><code>document.script.eventSwipeDown()</code></p>                                   |
| Incoming content    | <p>Event when received content or file from other app<br><br><strong>Actions editor:</strong><br><code>Event > Incoming content</code><br><strong>Code:</strong><br><code>document.script.eventIncoming()</code></p> |
| Share finished      | <p>Event when file sharing finished<br><br><strong>Actions editor:</strong><br><code>Event > Share finished</code><br><strong>Code:</strong><br><code>document.script.eventShareFileFinished()</code></p>            |
| Picker closed       | <p>Event when camera or photo picker closed<br><br><strong>Actions editor:</strong><br><code>Event > Picker closed</code><br><strong>Code:</strong><br><code>document.script.eventPickerClosed()</code></p>          |
| Push Notification   | <p>Event when push notification is received<br><br><strong>Actions editor:</strong><br><code>Event > Push Notification</code><br><strong>Code:</strong><br><code>document.script.eventPushNotification()</code></p>  |
| Download finished   | <p><strong>Actions editor:</strong><br><code>Event > Download finished</code><br><strong>Code:</strong><br><code>document.script.eventDownloadFinished()</code></p>                                                  |
| Download error      | <p><strong>Actions editor:</strong><br><code>Event > Download error</code><br><strong>Code:</strong><br><code>document.script.eventDownloadError()</code></p>                                                        |
| Download progress   | <p><strong>Actions editor:</strong><br><code>Event > Download progress</code><br><strong>Code:</strong><br><code>document.script.eventDownloadProgress()</code></p>                                                  |


# Page

To access the property from outside:

```
document.childByName("Page 1").PROPERTY_NAME
```

To access the property from the page:

```
page.PROPERTY_NAME
```

For example, to change page background color on click the button:

```
import QtQuick 2.5

Item {
    Connections {
        target: document.childByName("Button 1").scriptAdaptor
        onEventItemClicked: {
            document.childByName("Page 1").style.blockBackgroundColor = "#ff0000"
        }
    }
}
```

## Interaction

<div align="left"><img src="/files/-MIxukRl8GzDTsLlm5ZO" alt=""></div>

| Property            | Function                                                                                                                                                                                                                          | Type   |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| Static              | <p>Sets static page<br><br><strong>Actions editor:</strong><br><code>Property > Page > Interaction > Static</code><br><strong>Code:</strong><br><code>page.isStatic</code></p>                                                    | `bool` |
| Have maximized item | <p>Gets true if there is maximized widget on page<br><br><strong>Actions editor:</strong><br><code>Property > Page > Interaction > Have maximized item</code><br><strong>Code:</strong><br><code>page.haveExpandedItem</code></p> | `bool` |

## Style

### Background

<div align="left"><img src="/files/-MIxukRpedLCGkIdAzJ0" alt=""></div>

| Property             | Function                                                                                                                                                                                                                              | Type                                                                                                                                                                                                                                                           |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Background color     | <p>Sets page background color<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Background > Background color</code><br><strong>Code:</strong><br><code>page.style.pageBackgroundColor</code></p>            | `color`                                                                                                                                                                                                                                                        |
| Background image     | <p>Sets page background image<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Background > Background image</code><br><strong>Code:</strong><br><code>page.style.pageBackgroundMedia</code></p>            | `string`                                                                                                                                                                                                                                                       |
| Background fill mode | <p>Sets page background fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Background > Background fill mode</code><br><strong>Code:</strong><br><code>page.style.pageBackgroundFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Overlay

<div align="left"><img src="/files/-MIxukRqA9_DJhWDtG6t" alt=""></div>

| Property          | Function                                                                                                                                                                                                                  | Type                                                                                                                                                                                                                                                           |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Overlay image     | <p>Sets page overlay image<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Overlay > Overlay image</code><br><strong>Code:</strong><br><code>page.style.pageOverlayMedia</code></p>            | `string`                                                                                                                                                                                                                                                       |
| Overlay fill mode | <p>Sets page overlay fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Page > Style > Overlay > Overlay fill mode</code><br><strong>Code:</strong><br><code>page.style.pageOverlayFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Icon

<div align="left"><img src="/files/-MIxukRo65A6ZSJ8mWnu" alt=""></div>

| Property | Function       | Type     |
| -------- | -------------- | -------- |
| Icon     | Not documented | `string` |

## Actions

| Property      | Function                                                                                                                                                                                                                                |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enter         | <p>Manually fire Enter event<br><br><strong>Actions editor:</strong><br><code>Actions > Enter</code><br><strong>Code:</strong><br><code>page.script.actionEntered()</code></p>                                                          |
| Press         | <p>Manually fire Press event<br><br><strong>Actions editor:</strong><br><code>Actions > Press</code><br><strong>Code:</strong><br><code>page.script.actionItemPressed()</code></p>                                                      |
| Click         | <p>Manually fire Click event<br><br><strong>Actions editor:</strong><br><code>Actions > Click</code><br><strong>Code:</strong><br><code>page.script.actionItemClicked()</code></p>                                                      |
| Double click  | <p>Manually fire Double click event<br><br><strong>Actions editor:</strong><br><code>Actions > Double click</code><br><strong>Code:</strong><br><code>page.script.actionItemDoublePressed()</code></p>                                  |
| Execute       | <p>Execute custom script<br><br><strong>Actions editor:</strong><br><code>Actions > Execute</code><br><strong>Code:</strong><br><code>page.script.actionExecute(QString code)</code></p>                                                |
| Minimize all  | <p>Minimize all maximized items<br><br><strong>Actions editor:</strong><br><code>Actions > Minimize all</code><br><strong>Code:</strong><br><code>page.script.actionShrinkAll()</code></p>                                              |
| Save as image | <p>Save current page as image to default Documents folder<br><br><strong>Actions editor:</strong><br><code>Actions > Save as image</code><br><strong>Code:</strong><br><code>page.script.actionSaveAsImage(QString fileName)</code></p> |
| Unload page   | <p>Unload page<br><br><strong>Actions editor:</strong><br><code>Actions > Unload page</code><br><strong>Code:</strong><br><code>page.script.actionUnloadPage()</code></p>                                                               |

## Events

| Property       | Function                                                                                                                                                                                                            |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Changed        | <p>Event when any property is changed<br><br><strong>Actions editor:</strong><br><code>Event > Changed</code><br><strong>Code:</strong><br><code>page.script.eventChanged()</code></p>                              |
| Enter          | <p>Event when the page was opened<br><br><strong>Actions editor:</strong><br><code>Event > Enter</code><br><strong>Code:</strong><br><code>page.script.eventEntered()</code></p>                                    |
| Leave          | <p>Event when leave the page<br><br><strong>Actions editor:</strong><br><code>Event > Leave</code><br><strong>Code:</strong><br><code>page.script.eventLeaved()</code></p>                                          |
| Before enter   | <p>Event before open page<br><br><strong>Actions editor:</strong><br><code>Event > Before enter</code><br><strong>Code:</strong><br><code>page.script.eventBeforeEnter()</code></p>                                 |
| Press          | <p>Event when mouse is pressed on the page or widget on the page<br><br><strong>Actions editor:</strong><br><code>Event > Press</code><br><strong>Code:</strong><br><code>page.script.eventItemPressed()</code></p> |
| Click          | <p>Event when mouse is released<br><br><strong>Actions editor:</strong><br><code>Event > Click</code><br><strong>Code:</strong><br><code>page.script.eventItemClicked()</code></p>                                  |
| Double click   | <p>Event when double clicked on the page<br><br><strong>Actions editor:</strong><br><code>Event > Double click</code><br><strong>Code:</strong><br><code>page.script.eventItemDoublePressed()</code></p>            |
| Maximized item | <p>Event when page item is maximized<br><br><strong>Actions editor:</strong><br><code>Event > Maximized item</code><br><strong>Code:</strong><br><code>page.script.eventExpandItem()</code></p>                     |
| Minimized item | <p>Event when page item is minimized<br><br><strong>Actions editor:</strong><br><code>Event > Minimized item</code><br><strong>Code:</strong><br><code>page.script.eventShrinkItem()</code></p>                     |
| Mouse over     | <p>Event when mouse over page<br><br><strong>Actions editor:</strong><br><code>Event > Mouse over</code><br><strong>Code:</strong><br><code>page.script.eventMouseOver()</code></p>                                 |
| Loaded         | <p>Event when page loaded<br><br><strong>Actions editor:</strong><br><code>Event > Loaded</code><br><strong>Code:</strong><br><code>page.script.eventLoaded()</code></p>                                            |
| Swipe left     | <p>Event when swipe left<br><br><strong>Actions editor:</strong><br><code>Event > Swipe left</code><br><strong>Code:</strong><br><code>page.script.eventSwipeLeft()</code></p>                                      |
| Swipe right    | <p>Event when swipe right<br><br><strong>Actions editor:</strong><br><code>Event > Swipe right</code><br><strong>Code:</strong><br><code>page.script.eventSwipeRight()</code></p>                                   |
| Swipe up       | <p>Event when swipe up<br><br><strong>Actions editor:</strong><br><code>Event > Swipe up</code><br><strong>Code:</strong><br><code>page.script.eventSwipeUp()</code></p>                                            |
| Swipe down     | <p>Event when swipe down<br><br><strong>Actions editor:</strong><br><code>Event > Swipe down</code><br><strong>Code:</strong><br><code>page.script.eventSwipeDown()</code></p>                                      |


# Group

| Property  | Function                                                                                                                                                                        | Type     |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Title     | <p>Item title<br><br><strong>Actions editor:</strong><br><code>Property > Title</code><br><strong>Code:</strong><br><code>widget.title</code></p>                               | `string` |
| Visible   | <p>Sets item visibility<br><br><strong>Actions editor:</strong><br><code>Property > Visible</code><br><strong>Code:</strong><br><code>widget.visible</code></p>                 | `bool`   |
| Maximized | <p>Gets true if widget is maximized<br><br><strong>Actions editor:</strong><br><code>Property > Maximized</code><br><strong>Code:</strong><br><code>widget.increased</code></p> | `bool`   |

## Geometry

<div align="left"><img src="/files/-MIxukRix5ioRXUjbHie" alt=""></div>

| Property            | Function                                                                                                                                                                                                            | Type     |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| X                   | <p>Sets x position relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > X</code><br><strong>Code:</strong><br><code>widget.x</code></p>                                      | `double` |
| Y                   | <p>Sets y position relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Y</code><br><strong>Code:</strong><br><code>widget.y</code></p>                                      | `double` |
| Width               | <p>Sets width relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Width</code><br><strong>Code:</strong><br><code>widget.width</code></p>                                   | `double` |
| Height              | <p>Sets height relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Height</code><br><strong>Code:</strong><br><code>widget.height</code></p>                                | `double` |
| Fixed width         | <p>Enable to fix width<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Fixed width</code><br><strong>Code:</strong><br><code>widget.fixedWidth</code></p>                                    | `bool`   |
| Fixed height        | <p>Enable to fix height<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Fixed height</code><br><strong>Code:</strong><br><code>widget.fixedHeight</code></p>                                 | `bool`   |
| Align left          | <p>Enable to left align<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Align left</code><br><strong>Code:</strong><br><code>widget.anchorLeft</code></p>                                    | `bool`   |
| Align right         | <p>Enable to right align<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Align right</code><br><strong>Code:</strong><br><code>widget.anchorRight</code></p>                                 | `bool`   |
| Align top           | <p>Enable to top align<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Align top</code><br><strong>Code:</strong><br><code>widget.anchorTop</code></p>                                       | `bool`   |
| Align bottom        | <p>Enable to bottom align<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Align bottom</code><br><strong>Code:</strong><br><code>widget.anchorBottom</code></p>                              | `bool`   |
| Margin left         | <p>Sets left margin relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Margin left</code><br><strong>Code:</strong><br><code>widget.marginLeft</code></p>                  | `double` |
| Margin right        | <p>Sets right margin relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Margin right</code><br><strong>Code:</strong><br><code>widget.marginRight</code></p>               | `double` |
| Margin top          | <p>Sets top margin relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Margin top</code><br><strong>Code:</strong><br><code>widget.marginTop</code></p>                     | `double` |
| Margin bottom       | <p>Sets bottom margin relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Margin bottom</code><br><strong>Code:</strong><br><code>widget.marginBottom</code></p>            | `double` |
| Vertically center   | <p>Enable to vertically center item<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Vertically center</code><br><strong>Code:</strong><br><code>widget.anchorVerticalCenter</code></p>       | `bool`   |
| Horizontally center | <p>Enable to horizontally center item<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Horizontally center</code><br><strong>Code:</strong><br><code>widget.anchorHorizontalCenter</code></p> | `bool`   |
| Scale               | <p>Sets scale factor<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scale</code><br><strong>Code:</strong><br><code>widget.scale</code></p>                                                 | `double` |
| ZOrder              | <p>Sets stacking order. By default is 0.<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > ZOrder</code><br><strong>Code:</strong><br><code>widget.zOrder</code></p>                           | `int`    |
| TextureX            | <p>Sets texture x offset<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > TextureX</code><br><strong>Code:</strong><br><code>widget.textureX</code></p>                                       | `double` |
| TextureY            | <p>Sets texture y offset<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > TextureY</code><br><strong>Code:</strong><br><code>widget.textureY</code></p>                                       | `double` |

## Rotation

<div align="left"><img src="/files/-MIxukRjiv5JVeYbvLd1" alt=""></div>

| Property     | Function                                                                                                                                                                                                     | Type     |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| X rotation   | <p>Sets rotation in degrees about the x<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > X rotation</code><br><strong>Code:</strong><br><code>widget.rotationX</code></p>   | `double` |
| Y rotation   | <p>Sets rotation in degrees about the y<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > Y rotation</code><br><strong>Code:</strong><br><code>widget.rotationY</code></p>   | `double` |
| Z rotation   | <p>Sets rotation in degrees about the z<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > Z rotation</code><br><strong>Code:</strong><br><code>widget.rotationZ</code></p>   | `double` |
| X offset     | <p>Sets origin point offset for x<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > X offset</code><br><strong>Code:</strong><br><code>widget.rotationXOriginX</code></p>    | `double` |
| Y offset     | <p>Sets origin point offset for y<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > Y offset</code><br><strong>Code:</strong><br><code>widget.rotationYOriginX</code></p>    | `double` |
| Origin point | <p>Sets origin point of the rotation<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > Origin point</code><br><strong>Code:</strong><br><code>widget.rotationSnap</code></p> | `flags`  |

## Scroll

<div align="left"><img src="/files/-MIxukRkfvrmglQ0QNd6" alt=""></div>

| Property            | Function                                                                                                                                                                                                                                    | Type     |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Cache               | <p>Determines whether widgets are retained outside the visible area of the view<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scroll > Cache</code><br><strong>Code:</strong><br><code>.scrollCacheSize</code></p> | `int`    |
| Clip                | <p>Enable clipping<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scroll > Clip</code><br><strong>Code:</strong><br><code>.clip</code></p>                                                                          | `bool`   |
| Dynamic loading     | <p>Disable to load all widgets at once<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scroll > Dynamic loading</code><br><strong>Code:</strong><br><code>.loadOnlyVisibleBlocks</code></p>                          | `bool`   |
| Unload widgets      | <p>Disable to prevent unloading already loaded widgets<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scroll > Unload widgets</code><br><strong>Code:</strong><br><code>.unloadLoaded</code></p>                    | `bool`   |
| Load on scroll stop | <p>Enable to load widgets only on scroll stop<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scroll > Load on scroll stop</code><br><strong>Code:</strong><br><code>.loadOnScrollStop</code></p>                    | `bool`   |
| Content x           | <p>Gets content x position from 0 to 1<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scroll > Content x</code><br><strong>Code:</strong><br><code>.contentX</code></p>                                             | `double` |
| Content y           | <p>Gets content y position from 0 to 1<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scroll > Content y</code><br><strong>Code:</strong><br><code>.contentY</code></p>                                             | `double` |
| Disable scroll      | <p>Disable group scroll<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scroll > Disable scroll</code><br><strong>Code:</strong><br><code>.disableScroll</code></p>                                                  | `bool`   |

## Style

<div align="left"><img src="/files/-MIxukS1oVyUI8r0d9Ym" alt=""></div>

| Property | Function                                                                                                                                                                             | Type     |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| Opacity  | <p>Sets widget opacity<br><br><strong>Actions editor:</strong><br><code>Property > Style > Opacity</code><br><strong>Code:</strong><br><code>widget.style.pageItemOpacity</code></p> | `double` |

### Border

<div align="left"><img src="/files/-MIxukS4SgT7q3Ixdk_P" alt=""></div>

| Property            | Function                                                                                                                                                                                                                   | Type     |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Border color        | <p>Sets widget border color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Border color</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderColor</code></p>                | `color`  |
| Border width        | <p>Sets widget border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderWidth</code></p>                | `int`    |
| Border radius       | <p>Sets widget border radius<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Border radius</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderRadius</code></p>             | `double` |
| Left border width   | <p>Sets widget left border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Left border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderLeft</code></p>       | `int`    |
| Top border width    | <p>Sets widget top border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Top border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderTop</code></p>          | `int`    |
| Right border width  | <p>Sets widget right border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Right border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderRight</code></p>    | `int`    |
| Bottom border width | <p>Sets widget bottom border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Bottom border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderBottom</code></p> | `int`    |

### Background

<div align="left"><img src="/files/-MIxukS2sTDD2FPXuy3c" alt=""></div>

| Property                   | Function                                                                                                                                                                                                                                     | Type                                                                                                                                                                                                                                                           |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Background color           | <p>Sets widget background color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Background > Background color</code><br><strong>Code:</strong><br><code>widget.style.pageItemBackgroundColor</code></p>                  | `color`                                                                                                                                                                                                                                                        |
| Background image           | <p>Sets widget background image<br><br><strong>Actions editor:</strong><br><code>Property > Style > Background > Background image</code><br><strong>Code:</strong><br><code>widget.style.pageItemBackgroundMedia</code></p>                  | `string`                                                                                                                                                                                                                                                       |
| Background image fill mode | <p>Sets widget background fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Background > Background image fill mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemBackgroundFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Mask

<div align="left"><img src="/files/-MIxukS8yWV_gdIbBwMk" alt=""></div>

| Property       | Function                                                                                                                                                                                                       | Type                                                                                                                                                                                                                                                           |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Mask image     | <p>Sets widget mask image<br><br><strong>Actions editor:</strong><br><code>Property > Style > Mask > Mask image</code><br><strong>Code:</strong><br><code>widget.style.pageItemMaskMedia</code></p>            | `string`                                                                                                                                                                                                                                                       |
| Mask fill mode | <p>Sets widget mask fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Mask > Mask fill mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemMaskFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Shadow

<div align="left"><img src="/files/-MIxukS6oVweet1gnN7c" alt=""></div>

| Property                 | Function                                                                                                                                                                                                                                        | Type     |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Shadow radius            | <p>Sets shadow radius<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow radius</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowRadius</code></p>                                 | `int`    |
| Shadow samples           | <p>Sets shadow samples<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow samples</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowSamples</code></p>                              | `int`    |
| Shadow color             | <p>Sets shadow color<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow color</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowColor</code></p>                                    | `color`  |
| Shadow horizontal offset | <p>Sets shadow horizontal offset<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow horizontal offset</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowHorizontalOffset</code></p> | `double` |
| Shadow vertical offset   | <p>Sets shadow vertical offset<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow vertical offset</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowVerticalOffset</code></p>       | `double` |

### Overlay

<div align="left"><img src="/files/-MIxukS9DO-gkrW-MKtH" alt=""></div>

| Property          | Function                                                                                                                                                                                                                          | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Overlay color     | <p>Sets widget overlay color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Overlay color</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayColor</code></p>                   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Overlay image     | <p>Sets widget overlay image<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Overlay image</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayMedia</code></p>                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| Blend mode        | <p>Sets overlay blend mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Blend mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayBlendMode</code></p>                    | <p><code>string</code><br><br><strong>Values:</strong><br><code>normal</code><br><code>addition</code><br><code>average</code><br><code>color</code><br><code>colorBurn</code><br><code>colorDodge</code><br><code>darken</code><br><code>darkerColor</code><br><code>difference</code><br><code>divide</code><br><code>exclusion</code><br><code>hardLight</code><br><code>hue</code><br><code>lighten</code><br><code>lighterColor</code><br><code>lightness</code><br><code>multiply</code><br><code>negation</code><br><code>saturation</code><br><code>screen</code><br><code>subtract</code><br><code>softLight</code></p> |
| Cached            | <p>Enable overlay caching to improve the performance<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Cached</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayCached</code></p> | `bool`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| Overlay fill mode | <p>Sets widget overlay fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Overlay fill mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayFillMode</code></p>        | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p>                                                                                                                                                                                                                                                                                                                                                                   |

### Margins

<div align="left"><img src="/files/-MIxukS7HSMrw3S1oWGe" alt=""></div>

| Property      | Function                                                                                                                                                                                                        | Type     |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Margin left   | <p>Sets widget margin left<br><br><strong>Actions editor:</strong><br><code>Property > Style > Margins > Margin left</code><br><strong>Code:</strong><br><code>widget.style.pageItemMarginLeft</code></p>       | `double` |
| Margin right  | <p>Sets widget margin right<br><br><strong>Actions editor:</strong><br><code>Property > Style > Margins > Margin right</code><br><strong>Code:</strong><br><code>widget.style.pageItemMarginRight</code></p>    | `double` |
| Margin top    | <p>Sets widget margin top<br><br><strong>Actions editor:</strong><br><code>Property > Style > Margins > Margin top</code><br><strong>Code:</strong><br><code>widget.style.pageItemMarginTop</code></p>          | `double` |
| Margin bottom | <p>Sets widget margin bottom<br><br><strong>Actions editor:</strong><br><code>Property > Style > Margins > Margin bottom</code><br><strong>Code:</strong><br><code>widget.style.pageItemMarginBottom</code></p> | `double` |

### Blur

<div align="left"><img src="/files/-MIxukS3kiZ5-WqgLZC9" alt=""></div>

| Property            | Function                                                                                                                                                                                                                   | Type                                                                                                                                                                                                                                                           |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Blur mask           | <p>Sets widget blur mask image<br><br><strong>Actions editor:</strong><br><code>Property > Style > Blur > Blur mask</code><br><strong>Code:</strong><br><code>widget.style.pageItemEffectMedia</code></p>                  | `string`                                                                                                                                                                                                                                                       |
| Blur size           | <p>Sets widget blur strength<br><br><strong>Actions editor:</strong><br><code>Property > Style > Blur > Blur size</code><br><strong>Code:</strong><br><code>widget.style.pageItemEffectStrength</code></p>                 | `int`                                                                                                                                                                                                                                                          |
| Blur mask fill mode | <p>Sets widget blur mask fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Blur > Blur mask fill mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemEffectFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Scrollbar

<div align="left"><img src="/files/-MIxukSBg9LoDcBw0phB" alt=""></div>

| Property         | Function                                                                                                                                                                                                                              | Type     |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Enable scrollbar | <p>Enable to show scrollbar<br><br><strong>Actions editor:</strong><br><code>Property > Style > Scrollbar > Enable scrollbar</code><br><strong>Code:</strong><br><code>widget.style.blockGroupShowScrollBar</code></p>                | `bool`   |
| Size             | <p>Sets scrollbar size relative to page size<br><br><strong>Actions editor:</strong><br><code>Property > Style > Scrollbar > Size</code><br><strong>Code:</strong><br><code>widget.style.blockGroupScrollSize</code></p>              | `double` |
| Radius           | <p>Sets scrollbar radius<br><br><strong>Actions editor:</strong><br><code>Property > Style > Scrollbar > Radius</code><br><strong>Code:</strong><br><code>widget.style.blockGroupScrollRadius</code></p>                              | `double` |
| Background color | <p>Sets scrollbar background color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Scrollbar > Background color</code><br><strong>Code:</strong><br><code>widget.style.blockGroupScrollBackgroundColor</code></p> | `color`  |
| Color            | <p>Sets scrollbar color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Scrollbar > Color</code><br><strong>Code:</strong><br><code>widget.style.blockGroupScrollColor</code></p>                                 | `color`  |

## Actions

| Property                     | Function                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Scroll to widget             | <p>Scroll to required widget<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Scroll to widget</code><br><strong>Code:</strong><br><code>.script.actionScrollToWidget(int widgetNum)</code></p>                                                                                                                                                                                                                                                                                         |
| Scroll to position           | <p>Scroll to custom position<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Scroll to position</code><br><strong>Code:</strong><br><code>.script.actionScrollToPos(double xPos, double yPos)</code></p>                                                                                                                                                                                                                                                                               |
| Scroll to top                | <p>Scroll to top<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Scroll to top</code><br><strong>Code:</strong><br><code>.script.actionScrollToTop()</code></p>                                                                                                                                                                                                                                                                                                                        |
| Scroll to bottom             | <p>Scroll to bottom<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Scroll to bottom</code><br><strong>Code:</strong><br><code>.script.actionScrollToBottom()</code></p>                                                                                                                                                                                                                                                                                                               |
| Scroll to left               | <p>Scroll to left<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Scroll to left</code><br><strong>Code:</strong><br><code>.script.actionScrollToLeft()</code></p>                                                                                                                                                                                                                                                                                                                     |
| Scroll to right              | <p>Scroll to right<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Scroll to right</code><br><strong>Code:</strong><br><code>.script.actionScrollToRight()</code></p>                                                                                                                                                                                                                                                                                                                  |
| Disable vertical scroll      | <p><strong>Actions editor:</strong><br><code>Actions > Common > Disable vertical scroll</code><br><strong>Code:</strong><br><code>.script.actionDisableVScroll()</code></p>                                                                                                                                                                                                                                                                                                                                |
| Disable horizontal scroll    | <p><strong>Actions editor:</strong><br><code>Actions > Common > Disable horizontal scroll</code><br><strong>Code:</strong><br><code>.script.actionDisableHScroll()</code></p>                                                                                                                                                                                                                                                                                                                              |
| Enable vertical scroll       | <p><strong>Actions editor:</strong><br><code>Actions > Common > Enable vertical scroll</code><br><strong>Code:</strong><br><code>.script.actionEnableVScroll()</code></p>                                                                                                                                                                                                                                                                                                                                  |
| Enable horizontal scroll     | <p><strong>Actions editor:</strong><br><code>Actions > Common > Enable horizontal scroll</code><br><strong>Code:</strong><br><code>.script.actionEnableHScroll()</code></p>                                                                                                                                                                                                                                                                                                                                |
| Set position                 | <p>Set item x and y position, 0 is top-left side of parent, 1 is bottom-right side of parent<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set position</code><br><strong>Code:</strong><br><code>widget.script.actionSetPosition(double newX, double newY)</code><br><code>widget.script.actionSetPositionWithAnimation(double newX, double newY, int animationType, int animationDuration)</code></p>                                                                           |
| Set size                     | <p>Set item width and height, 1 to fill parent width or height<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set size</code><br><strong>Code:</strong><br><code>widget.script.actionSetSize(double newWidth, double newHeight)</code><br><code>widget.script.actionSetSizeWithAnimation(double newWidth, double newHeight, int animationType, int animationDuration)</code></p>                                                                                                   |
| Set size and position        | <p>Set item size and position, where lt is distance from parent top-left to item top-left, rb is distance from parent bottom-right to item bottom-right<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set size and position</code><br><strong>Code:</strong><br><code>widget.script.actionSetSizeAndPosition(double lt, double rb)</code><br><code>widget.script.actionSetSizeAndPositionWithAnimation(double lt, double rb, int animationType, int animationDuration)</code></p> |
| Set size and position cancel | <p>Reset item size and position<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set size and position cancel</code><br><strong>Code:</strong><br><code>widget.script.actionSetSizeAndPositionCancel()</code><br><code>widget.script.actionSetSizeAndPositionCancelWithAnimation(int animationType, int animationDuration)</code></p>                                                                                                                                                |
| Bring to front               | <p>Bring item to front of all items<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Bring to front</code><br><strong>Code:</strong><br><code>widget.script.actionBringToFront()</code></p>                                                                                                                                                                                                                                                                                             |
| Send to back                 | <p>Send item to back of all items<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Send to back</code><br><strong>Code:</strong><br><code>widget.script.actionSendToBack()</code></p>                                                                                                                                                                                                                                                                                                   |
| Maximize                     | <p>Maximize item<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Maximize</code><br><strong>Code:</strong><br><code>widget.script.actionExpand()</code><br><code>widget.script.actionExpandWithAnimation(int animationType, int animationDuration)</code></p>                                                                                                                                                                                                                       |
| Minimize                     | <p>Minimize item<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Minimize</code><br><strong>Code:</strong><br><code>widget.script.actionShrink()</code><br><code>widget.script.actionShrinkWithAnimation(int animationType, int animationDuration)</code></p>                                                                                                                                                                                                                       |
| Toggle maximize              | <p>Minimize maximizing or maximize minimizing<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Toggle maximize</code><br><strong>Code:</strong><br><code>widget.script.actionToggleExpand()</code><br><code>widget.script.actionToggleExpandWithAnimation(int animationType, int animationDuration)</code></p>                                                                                                                                                                       |
| Save as image                | <p>Save the item as image to default Documents folder<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Save as image</code><br><strong>Code:</strong><br><code>widget.script.actionSaveAsImage(QString fileName)</code></p>                                                                                                                                                                                                                                                             |
| Set scale                    | <p>Set bitmap scale, scale = 1 is default<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set scale</code><br><strong>Code:</strong><br><code>widget.script.actionSetScale(double newScale)</code><br><code>widget.script.actionSetScaleWithAnimation(double newScale, int animationType, int animationDuration)</code></p>                                                                                                                                                         |
| Show                         | <p>Show the item<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Show</code><br><strong>Code:</strong><br><code>widget.script.actionShow()</code></p>                                                                                                                                                                                                                                                                                                                                  |
| Hide                         | <p>Hide the item<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Hide</code><br><strong>Code:</strong><br><code>widget.script.actionHide()</code></p>                                                                                                                                                                                                                                                                                                                                  |
| Toggle visibility            | <p>Toggle item visibility<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Toggle visibility</code><br><strong>Code:</strong><br><code>widget.script.actionToggleVisible()</code></p>                                                                                                                                                                                                                                                                                                   |
| Disable                      | <p>Disable user interaction with the widget content<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Disable</code><br><strong>Code:</strong><br><code>widget.script.actionDisable()</code></p>                                                                                                                                                                                                                                                                                         |
| Enable                       | <p>Enable user interaction with the widget content<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Enable</code><br><strong>Code:</strong><br><code>widget.script.actionEnable()</code></p>                                                                                                                                                                                                                                                                                            |
| Set interactive              | <p>Set item interactive to true or false<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Set interactive</code><br><strong>Code:</strong><br><code>widget.script.actionSetInteractive(bool newInteractive)</code></p>                                                                                                                                                                                                                                                                  |
| Disable input                | <p>Disable input actions like Press, Click, Double Click<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Disable input</code><br><strong>Code:</strong><br><code>widget.script.actionDisableInput()</code></p>                                                                                                                                                                                                                                                                         |
| Enable input                 | <p>Enable input actions like Press, Click, Double Click<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Enable input</code><br><strong>Code:</strong><br><code>widget.script.actionEnableInput()</code></p>                                                                                                                                                                                                                                                                            |
| Set visibility               | <p>Set item visibility to true or false<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Set visibility</code><br><strong>Code:</strong><br><code>widget.script.actionSetVisible(bool newVisible)</code></p>                                                                                                                                                                                                                                                                            |
| Press                        | <p>Manually fire Press event<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Press</code><br><strong>Code:</strong><br><code>widget.script.actionItemPressed()</code></p>                                                                                                                                                                                                                                                                                                              |
| Click                        | <p>Manually fire Click event<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Click</code><br><strong>Code:</strong><br><code>widget.script.actionItemClicked()</code></p>                                                                                                                                                                                                                                                                                                              |
| Double click                 | <p>Manually fire Double click event<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Double click</code><br><strong>Code:</strong><br><code>widget.script.actionItemDoublePressed()</code></p>                                                                                                                                                                                                                                                                                          |
| Set opacity                  | <p>Set item opacity from 0 to 1<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set opacity</code><br><strong>Code:</strong><br><code>widget.script.actionSetOpacity(double newOpacity)</code><br><code>widget.script.actionSetOpacityWithAnimation(double newOpacity, int animationType, int animationDuration)</code></p>                                                                                                                                                         |
| Set color                    | <p>Set item background color using hex color<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set color</code><br><strong>Code:</strong><br><code>widget.script.actionSetColor(color newColor)</code><br><code>widget.script.actionSetColorWithAnimation(color newColor, int animationType, int animationDuration)</code></p>                                                                                                                                                        |
| Set overlay color            | <p>Set item overlay color using hex color<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set overlay color</code><br><strong>Code:</strong><br><code>widget.script.actionSetOverlayColor(color newColor)</code><br><code>widget.script.actionSetOverlayColorWithAnimation(color newColor, int animationType, int animationDuration)</code></p>                                                                                                                                     |
| Set blur                     | <p>Set item blur strength, 0 is no blur<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set blur</code><br><strong>Code:</strong><br><code>widget.script.actionSetBlur(int newBlur)</code><br><code>widget.script.actionSetBlurWithAnimation(int newBlur, int animationType, int animationDuration)</code></p>                                                                                                                                                                      |
| Set X                        | <p>Set item x position, 0 is left side of parent, 1 is right side of parent<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set X</code><br><strong>Code:</strong><br><code>widget.script.actionSetX(double newX)</code><br><code>widget.script.actionSetXWithAnimation(double newX, int animationType, int animationDuration)</code></p>                                                                                                                                           |
| Set Y                        | <p>Set item y position, 0 is top side of parent, 1 is bottom side of parent<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set Y</code><br><strong>Code:</strong><br><code>widget.script.actionSetY(double newY)</code><br><code>widget.script.actionSetYWithAnimation(double newY, int animationType, int animationDuration)</code></p>                                                                                                                                           |
| Set Width                    | <p>Set item width, 1 to fill parent width<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set Width</code><br><strong>Code:</strong><br><code>widget.script.actionSetWidth(double newW)</code><br><code>widget.script.actionSetWidthWithAnimation(double newW, int animationType, int animationDuration)</code></p>                                                                                                                                                                 |
| Set Height                   | <p>Set item height, 1 to fill parent height<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set Height</code><br><strong>Code:</strong><br><code>widget.script.actionSetHeight(double newH)</code><br><code>widget.script.actionSetHeightWithAnimation(double newH, int animationType, int animationDuration)</code></p>                                                                                                                                                            |
| Rotate                       | <p>Rotate item to newAngle degree, 0 is default<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Rotate</code><br><strong>Code:</strong><br><code>widget.script.actionRotate(double newAngle)</code><br><code>widget.script.actionRotateWithAnimation(double newAngle, int animationType, int animationDuration)</code></p>                                                                                                                                                          |
| Rotate X                     | <p>Rotate item about the x to newAngle degree, 0 is default<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Rotate X</code><br><strong>Code:</strong><br><code>widget.script.actionRotateX(double newAngle)</code><br><code>widget.script.actionRotateXWithAnimation(double newAngle, int animationType, int animationDuration)</code></p>                                                                                                                                          |
| Rotate Y                     | <p>Rotate item about the y to newAngle degree, 0 is default<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Rotate Y</code><br><strong>Code:</strong><br><code>widget.script.actionRotateY(double newAngle)</code><br><code>widget.script.actionRotateYWithAnimation(double newAngle, int animationType, int animationDuration)</code></p>                                                                                                                                          |
| Set texture x                | <p>Sets texture x offset<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set texture x</code><br><strong>Code:</strong><br><code>widget.script.actionSetTextureX(double newX)</code><br><code>widget.script.actionSetTextureXWithAnimation(double newX, int animationType, int animationDuration)</code></p>                                                                                                                                                                        |
| Set texture y                | <p>Sets texture y offset<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set texture y</code><br><strong>Code:</strong><br><code>widget.script.actionSetTextureY(double newY)</code><br><code>widget.script.actionSetTextureYWithAnimation(double newY, int animationType, int animationDuration)</code></p>                                                                                                                                                                        |

## Events

| Property           | Function                                                                                                                                                                                                            |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Changed            | <p>Event when any property is changed<br><br><strong>Actions editor:</strong><br><code>Event > Changed</code><br><strong>Code:</strong><br><code>.script.eventChanged()</code></p>                                  |
| Scroll             | <p>Event when content is scrolled<br><br><strong>Actions editor:</strong><br><code>Event > Scroll</code><br><strong>Code:</strong><br><code>.script.eventScroll()</code></p>                                        |
| Scroll stop        | <p>Event when scroll is finished<br><br><strong>Actions editor:</strong><br><code>Event > Scroll stop</code><br><strong>Code:</strong><br><code>.script.eventScrollStop()</code></p>                                |
| Scroll down        | <p>Event when content is scrolled down<br><br><strong>Actions editor:</strong><br><code>Event > Scroll down</code><br><strong>Code:</strong><br><code>.script.eventScrollDown()</code></p>                          |
| Scroll up          | <p>Event when content is scrolled up<br><br><strong>Actions editor:</strong><br><code>Event > Scroll up</code><br><strong>Code:</strong><br><code>.script.eventScrollUp()</code></p>                                |
| Scroll left        | <p>Event when content is scrolled left<br><br><strong>Actions editor:</strong><br><code>Event > Scroll left</code><br><strong>Code:</strong><br><code>.script.eventScrollLeft()</code></p>                          |
| Scroll right       | <p>Event when content is scrolled right<br><br><strong>Actions editor:</strong><br><code>Event > Scroll right</code><br><strong>Code:</strong><br><code>.script.eventScrollRight()</code></p>                       |
| Content size       | <p>Event when content size is changed<br><br><strong>Actions editor:</strong><br><code>Event > Content size</code><br><strong>Code:</strong><br><code>.script.eventScrollContentSize()</code></p>                   |
| Toggled maximizing | <p>Event when the item is maximized or minimized<br><br><strong>Actions editor:</strong><br><code>Event > Toggled maximizing</code><br><strong>Code:</strong><br><code>widget.script.eventToggleExpand()</code></p> |
| Maximized          | <p>Event when item is maximized<br><br><strong>Actions editor:</strong><br><code>Event > Maximized</code><br><strong>Code:</strong><br><code>widget.script.eventExpand()</code></p>                                 |
| Minimized          | <p>Event when item is minimized<br><br><strong>Actions editor:</strong><br><code>Event > Minimized</code><br><strong>Code:</strong><br><code>widget.script.eventShrink()</code></p>                                 |
| Hide               | <p>Event when item is hidden<br><br><strong>Actions editor:</strong><br><code>Event > Hide</code><br><strong>Code:</strong><br><code>widget.script.eventHided()</code></p>                                          |
| Show               | <p>Event when item is shown<br><br><strong>Actions editor:</strong><br><code>Event > Show</code><br><strong>Code:</strong><br><code>widget.script.eventShowed()</code></p>                                          |
| Toggle visibility  | <p>Event when visibility is toggled<br><br><strong>Actions editor:</strong><br><code>Event > Toggle visibility</code><br><strong>Code:</strong><br><code>widget.script.eventToggleVisible()</code></p>              |
| Press              | <p>Event when mouse/touch is pressed<br><br><strong>Actions editor:</strong><br><code>Event > Press</code><br><strong>Code:</strong><br><code>widget.script.eventItemPressed()</code></p>                           |
| Click              | <p>Event when mouse/touch is released<br><br><strong>Actions editor:</strong><br><code>Event > Click</code><br><strong>Code:</strong><br><code>widget.script.eventItemClicked()</code></p>                          |
| Double click       | <p>Event when double clicked<br><br><strong>Actions editor:</strong><br><code>Event > Double click</code><br><strong>Code:</strong><br><code>widget.script.eventItemDoublePressed()</code></p>                      |
| Mouse over         | <p>Event when mouse over widget<br><br><strong>Actions editor:</strong><br><code>Event > Mouse over</code><br><strong>Code:</strong><br><code>widget.script.eventMouseOver()</code></p>                             |
| Mouse out          | <p>Event when mouse out widget<br><br><strong>Actions editor:</strong><br><code>Event > Mouse out</code><br><strong>Code:</strong><br><code>widget.script.eventMouseOut()</code></p>                                |
| Loaded             | <p>Event when item loaded<br><br><strong>Actions editor:</strong><br><code>Event > Loaded</code><br><strong>Code:</strong><br><code>widget.script.eventLoaded()</code></p>                                          |
| Swipe left         | <p>Event when swipe left<br><br><strong>Actions editor:</strong><br><code>Event > Swipe left</code><br><strong>Code:</strong><br><code>widget.script.eventSwipeLeft()</code></p>                                    |
| Swipe right        | <p>Event when swipe right<br><br><strong>Actions editor:</strong><br><code>Event > Swipe right</code><br><strong>Code:</strong><br><code>widget.script.eventSwipeRight()</code></p>                                 |
| Swipe up           | <p>Event when swipe up<br><br><strong>Actions editor:</strong><br><code>Event > Swipe up</code><br><strong>Code:</strong><br><code>widget.script.eventSwipeUp()</code></p>                                          |
| Swipe down         | <p>Event when swipe down<br><br><strong>Actions editor:</strong><br><code>Event > Swipe down</code><br><strong>Code:</strong><br><code>widget.script.eventSwipeDown()</code></p>                                    |


# Widget

To access the property from outside:

```
document.childByName("Widget name").PROPERTY_NAME
```

To access the property from the current item:

```
widget.PROPERTY_NAME
```

| Property  | Function                                                                                                                                                                        | Type     |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Title     | <p>Item title<br><br><strong>Actions editor:</strong><br><code>Property > Title</code><br><strong>Code:</strong><br><code>widget.title</code></p>                               | `string` |
| Visible   | <p>Sets item visibility<br><br><strong>Actions editor:</strong><br><code>Property > Visible</code><br><strong>Code:</strong><br><code>widget.visible</code></p>                 | `bool`   |
| Maximized | <p>Gets true if widget is maximized<br><br><strong>Actions editor:</strong><br><code>Property > Maximized</code><br><strong>Code:</strong><br><code>widget.increased</code></p> | `bool`   |

## Geometry

<div align="left"><img src="/files/-MIxukRix5ioRXUjbHie" alt=""></div>

| Property            | Function                                                                                                                                                                                                            | Type     |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| X                   | <p>Sets x position relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > X</code><br><strong>Code:</strong><br><code>widget.x</code></p>                                      | `double` |
| Y                   | <p>Sets y position relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Y</code><br><strong>Code:</strong><br><code>widget.y</code></p>                                      | `double` |
| Width               | <p>Sets width relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Width</code><br><strong>Code:</strong><br><code>widget.width</code></p>                                   | `double` |
| Height              | <p>Sets height relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Height</code><br><strong>Code:</strong><br><code>widget.height</code></p>                                | `double` |
| Fixed width         | <p>Enable to fix width<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Fixed width</code><br><strong>Code:</strong><br><code>widget.fixedWidth</code></p>                                    | `bool`   |
| Fixed height        | <p>Enable to fix height<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Fixed height</code><br><strong>Code:</strong><br><code>widget.fixedHeight</code></p>                                 | `bool`   |
| Align left          | <p>Enable to left align<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Align left</code><br><strong>Code:</strong><br><code>widget.anchorLeft</code></p>                                    | `bool`   |
| Align right         | <p>Enable to right align<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Align right</code><br><strong>Code:</strong><br><code>widget.anchorRight</code></p>                                 | `bool`   |
| Align top           | <p>Enable to top align<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Align top</code><br><strong>Code:</strong><br><code>widget.anchorTop</code></p>                                       | `bool`   |
| Align bottom        | <p>Enable to bottom align<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Align bottom</code><br><strong>Code:</strong><br><code>widget.anchorBottom</code></p>                              | `bool`   |
| Margin left         | <p>Sets left margin relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Margin left</code><br><strong>Code:</strong><br><code>widget.marginLeft</code></p>                  | `double` |
| Margin right        | <p>Sets right margin relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Margin right</code><br><strong>Code:</strong><br><code>widget.marginRight</code></p>               | `double` |
| Margin top          | <p>Sets top margin relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Margin top</code><br><strong>Code:</strong><br><code>widget.marginTop</code></p>                     | `double` |
| Margin bottom       | <p>Sets bottom margin relative to the page<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Margin bottom</code><br><strong>Code:</strong><br><code>widget.marginBottom</code></p>            | `double` |
| Vertically center   | <p>Enable to vertically center item<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Vertically center</code><br><strong>Code:</strong><br><code>widget.anchorVerticalCenter</code></p>       | `bool`   |
| Horizontally center | <p>Enable to horizontally center item<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Horizontally center</code><br><strong>Code:</strong><br><code>widget.anchorHorizontalCenter</code></p> | `bool`   |
| Scale               | <p>Sets scale factor<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Scale</code><br><strong>Code:</strong><br><code>widget.scale</code></p>                                                 | `double` |
| ZOrder              | <p>Sets stacking order. By default is 0.<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > ZOrder</code><br><strong>Code:</strong><br><code>widget.zOrder</code></p>                           | `int`    |
| TextureX            | <p>Sets texture x offset<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > TextureX</code><br><strong>Code:</strong><br><code>widget.textureX</code></p>                                       | `double` |
| TextureY            | <p>Sets texture y offset<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > TextureY</code><br><strong>Code:</strong><br><code>widget.textureY</code></p>                                       | `double` |

## Rotation

<div align="left"><img src="/files/-MIxukRjiv5JVeYbvLd1" alt=""></div>

| Property     | Function                                                                                                                                                                                                     | Type     |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| X rotation   | <p>Sets rotation in degrees about the x<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > X rotation</code><br><strong>Code:</strong><br><code>widget.rotationX</code></p>   | `double` |
| Y rotation   | <p>Sets rotation in degrees about the y<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > Y rotation</code><br><strong>Code:</strong><br><code>widget.rotationY</code></p>   | `double` |
| Z rotation   | <p>Sets rotation in degrees about the z<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > Z rotation</code><br><strong>Code:</strong><br><code>widget.rotationZ</code></p>   | `double` |
| X offset     | <p>Sets origin point offset for x<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > X offset</code><br><strong>Code:</strong><br><code>widget.rotationXOriginX</code></p>    | `double` |
| Y offset     | <p>Sets origin point offset for y<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > Y offset</code><br><strong>Code:</strong><br><code>widget.rotationYOriginX</code></p>    | `double` |
| Origin point | <p>Sets origin point of the rotation<br><br><strong>Actions editor:</strong><br><code>Property > Geometry > Rotation > Origin point</code><br><strong>Code:</strong><br><code>widget.rotationSnap</code></p> | `flags`  |

## Style

<div align="left"><img src="/files/-MIxukS1oVyUI8r0d9Ym" alt=""></div>

| Property | Function                                                                                                                                                                             | Type     |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| Opacity  | <p>Sets widget opacity<br><br><strong>Actions editor:</strong><br><code>Property > Style > Opacity</code><br><strong>Code:</strong><br><code>widget.style.pageItemOpacity</code></p> | `double` |

### Border

<div align="left"><img src="/files/-MIxukS4SgT7q3Ixdk_P" alt=""></div>

| Property            | Function                                                                                                                                                                                                                   | Type     |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Border color        | <p>Sets widget border color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Border color</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderColor</code></p>                | `color`  |
| Border width        | <p>Sets widget border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderWidth</code></p>                | `int`    |
| Border radius       | <p>Sets widget border radius<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Border radius</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderRadius</code></p>             | `double` |
| Left border width   | <p>Sets widget left border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Left border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderLeft</code></p>       | `int`    |
| Top border width    | <p>Sets widget top border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Top border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderTop</code></p>          | `int`    |
| Right border width  | <p>Sets widget right border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Right border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderRight</code></p>    | `int`    |
| Bottom border width | <p>Sets widget bottom border width<br><br><strong>Actions editor:</strong><br><code>Property > Style > Border > Bottom border width</code><br><strong>Code:</strong><br><code>widget.style.pageItemBorderBottom</code></p> | `int`    |

### Background

<div align="left"><img src="/files/-MIxukS2sTDD2FPXuy3c" alt=""></div>

| Property                   | Function                                                                                                                                                                                                                                     | Type                                                                                                                                                                                                                                                           |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Background color           | <p>Sets widget background color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Background > Background color</code><br><strong>Code:</strong><br><code>widget.style.pageItemBackgroundColor</code></p>                  | `color`                                                                                                                                                                                                                                                        |
| Background image           | <p>Sets widget background image<br><br><strong>Actions editor:</strong><br><code>Property > Style > Background > Background image</code><br><strong>Code:</strong><br><code>widget.style.pageItemBackgroundMedia</code></p>                  | `string`                                                                                                                                                                                                                                                       |
| Background image fill mode | <p>Sets widget background fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Background > Background image fill mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemBackgroundFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Mask

<div align="left"><img src="/files/-MIxukS8yWV_gdIbBwMk" alt=""></div>

| Property       | Function                                                                                                                                                                                                       | Type                                                                                                                                                                                                                                                           |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Mask image     | <p>Sets widget mask image<br><br><strong>Actions editor:</strong><br><code>Property > Style > Mask > Mask image</code><br><strong>Code:</strong><br><code>widget.style.pageItemMaskMedia</code></p>            | `string`                                                                                                                                                                                                                                                       |
| Mask fill mode | <p>Sets widget mask fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Mask > Mask fill mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemMaskFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Shadow

<div align="left"><img src="/files/-MIxukS6oVweet1gnN7c" alt=""></div>

| Property                 | Function                                                                                                                                                                                                                                        | Type     |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Shadow radius            | <p>Sets shadow radius<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow radius</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowRadius</code></p>                                 | `int`    |
| Shadow samples           | <p>Sets shadow samples<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow samples</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowSamples</code></p>                              | `int`    |
| Shadow color             | <p>Sets shadow color<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow color</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowColor</code></p>                                    | `color`  |
| Shadow horizontal offset | <p>Sets shadow horizontal offset<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow horizontal offset</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowHorizontalOffset</code></p> | `double` |
| Shadow vertical offset   | <p>Sets shadow vertical offset<br><br><strong>Actions editor:</strong><br><code>Property > Style > DropShadow > Shadow vertical offset</code><br><strong>Code:</strong><br><code>widget.style.pageItemDropShadowVerticalOffset</code></p>       | `double` |

### Overlay

<div align="left"><img src="/files/-MIxukS9DO-gkrW-MKtH" alt=""></div>

| Property          | Function                                                                                                                                                                                                                          | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Overlay color     | <p>Sets widget overlay color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Overlay color</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayColor</code></p>                   | `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Overlay image     | <p>Sets widget overlay image<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Overlay image</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayMedia</code></p>                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| Blend mode        | <p>Sets overlay blend mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Blend mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayBlendMode</code></p>                    | <p><code>string</code><br><br><strong>Values:</strong><br><code>normal</code><br><code>addition</code><br><code>average</code><br><code>color</code><br><code>colorBurn</code><br><code>colorDodge</code><br><code>darken</code><br><code>darkerColor</code><br><code>difference</code><br><code>divide</code><br><code>exclusion</code><br><code>hardLight</code><br><code>hue</code><br><code>lighten</code><br><code>lighterColor</code><br><code>lightness</code><br><code>multiply</code><br><code>negation</code><br><code>saturation</code><br><code>screen</code><br><code>subtract</code><br><code>softLight</code></p> |
| Cached            | <p>Enable overlay caching to improve the performance<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Cached</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayCached</code></p> | `bool`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| Overlay fill mode | <p>Sets widget overlay fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Overlay > Overlay fill mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemOverlayFillMode</code></p>        | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p>                                                                                                                                                                                                                                                                                                                                                                   |

### Margins

<div align="left"><img src="/files/-MIxukS7HSMrw3S1oWGe" alt=""></div>

| Property      | Function                                                                                                                                                                                                        | Type     |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Margin left   | <p>Sets widget margin left<br><br><strong>Actions editor:</strong><br><code>Property > Style > Margins > Margin left</code><br><strong>Code:</strong><br><code>widget.style.pageItemMarginLeft</code></p>       | `double` |
| Margin right  | <p>Sets widget margin right<br><br><strong>Actions editor:</strong><br><code>Property > Style > Margins > Margin right</code><br><strong>Code:</strong><br><code>widget.style.pageItemMarginRight</code></p>    | `double` |
| Margin top    | <p>Sets widget margin top<br><br><strong>Actions editor:</strong><br><code>Property > Style > Margins > Margin top</code><br><strong>Code:</strong><br><code>widget.style.pageItemMarginTop</code></p>          | `double` |
| Margin bottom | <p>Sets widget margin bottom<br><br><strong>Actions editor:</strong><br><code>Property > Style > Margins > Margin bottom</code><br><strong>Code:</strong><br><code>widget.style.pageItemMarginBottom</code></p> | `double` |

### Blur

<div align="left"><img src="/files/-MIxukS3kiZ5-WqgLZC9" alt=""></div>

| Property            | Function                                                                                                                                                                                                                   | Type                                                                                                                                                                                                                                                           |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Blur mask           | <p>Sets widget blur mask image<br><br><strong>Actions editor:</strong><br><code>Property > Style > Blur > Blur mask</code><br><strong>Code:</strong><br><code>widget.style.pageItemEffectMedia</code></p>                  | `string`                                                                                                                                                                                                                                                       |
| Blur size           | <p>Sets widget blur strength<br><br><strong>Actions editor:</strong><br><code>Property > Style > Blur > Blur size</code><br><strong>Code:</strong><br><code>widget.style.pageItemEffectStrength</code></p>                 | `int`                                                                                                                                                                                                                                                          |
| Blur mask fill mode | <p>Sets widget blur mask fill mode<br><br><strong>Actions editor:</strong><br><code>Property > Style > Blur > Blur mask fill mode</code><br><strong>Code:</strong><br><code>widget.style.pageItemEffectFillMode</code></p> | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Stretch</code><br><code>PreserveAspectFit</code><br><code>PreserveAspectCrop</code><br><code>Tile</code><br><code>TileVertically</code><br><code>TileHorizontally</code><br><code>Pad</code></p> |

### Playback

`Property-Style-Playback`

| Property            | Function                                                                                                                                                                                                                                  | Type                                                                                                                           |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| Show playback       | <p>Determines when to display playback bar<br><br><strong>Actions editor:</strong><br><code>Property > Style > Playback > Show playback</code><br><strong>Code:</strong><br><code>widget.style.pageItemControls</code></p>                | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Maximize</code><br><code>Always</code><br><code>Never</code></p> |
| Playback background | <p>Sets playback bar background color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Playback > Playback background</code><br><strong>Code:</strong><br><code>widget.style.pageItemToolbarBackgroundColor</code></p> | `color`                                                                                                                        |
| Controls color      | <p>Sets playback controls color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Playback > Controls color</code><br><strong>Code:</strong><br><code>widget.style.pageItemToolbarButtonColor</code></p>                | `color`                                                                                                                        |
| Height              | <p>Sets playback bar height<br><br><strong>Actions editor:</strong><br><code>Property > Style > Playback > Height</code><br><strong>Code:</strong><br><code>widget.style.pageItemToolbarHeight</code></p>                                 | `double`                                                                                                                       |
| Slider color        | <p>Sets playback bar slider color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Playback > Slider color</code><br><strong>Code:</strong><br><code>widget.style.pageItemToolbarSliderColor</code></p>                | `color`                                                                                                                        |
| Blurred             | <p>Enable playback bar background blurring<br><br><strong>Actions editor:</strong><br><code>Property > Style > Playback > Blurred</code><br><strong>Code:</strong><br><code>widget.style.pageItemToolbarBlurred</code></p>                | `bool`                                                                                                                         |

### Controls

<div align="left"><img src="/files/-MIxukS5cvnmH-CMb5Ea" alt=""></div>

| Property                  | Function                                                                                                                                                                                                                                        | Type                                                                                                                                                                               |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Color                     | <p>Sets element color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Color</code><br><strong>Code:</strong><br><code>widget.style.controlColor</code></p>                                                       | `color`                                                                                                                                                                            |
| Selected color            | <p>Sets selected state color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Selected color</code><br><strong>Code:</strong><br><code>widget.style.controlSelectedColor</code></p>                               | `color`                                                                                                                                                                            |
| Border color              | <p>Sets border color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Border color</code><br><strong>Code:</strong><br><code>widget.style.controlBorderColor</code></p>                                           | `color`                                                                                                                                                                            |
| Selected border color     | <p>Sets selected state border color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Selected border color</code><br><strong>Code:</strong><br><code>widget.style.controlBorderSelectedColor</code></p>           | `color`                                                                                                                                                                            |
| Border size               | <p>Sets border size<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Border size</code><br><strong>Code:</strong><br><code>widget.style.controlBorderSize</code></p>                                              | `int`                                                                                                                                                                              |
| Border radius             | <p>Sets border radius<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Border radius</code><br><strong>Code:</strong><br><code>widget.style.controlRadius</code></p>                                              | `int`                                                                                                                                                                              |
| Selected font             | <p>Sets selected state font color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Selected font</code><br><strong>Code:</strong><br><code>widget.style.controlSelectedFontColor</code></p>                       | `color`                                                                                                                                                                            |
| Image position            | <p>Sets image position relative to the text label<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Image position</code><br><strong>Code:</strong><br><code>widget.style.controlButtonImagePlace</code></p>       | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Qt::AlignTop</code><br><code>Qt::AlignLeft</code><br><code>Qt::AlignRight</code><br><code>Qt::AlignBottom</code></p> |
| Image size                | <p>Sets image size relative to the text label<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Image size</code><br><strong>Code:</strong><br><code>widget.style.controlButtonImageSize</code></p>                | `double`                                                                                                                                                                           |
| Image padding             | <p>Sets image padding<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Image padding</code><br><strong>Code:</strong><br><code>widget.style.controlButtonImagePadding</code></p>                                  | `double`                                                                                                                                                                           |
| Slider color              | <p>Slider (or switch) thumb color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Slider color</code><br><strong>Code:</strong><br><code>widget.style.controlSliderColor</code></p>                              | `color`                                                                                                                                                                            |
| Selected slider color     | <p>Sets selected state slider color<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Selected slider color</code><br><strong>Code:</strong><br><code>widget.style.controlSliderSelectedColor</code></p>           | `color`                                                                                                                                                                            |
| Slider size               | <p>Sets slider (or switch) track size relative to the thumb size<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Slider size</code><br><strong>Code:</strong><br><code>widget.style.controlSliderSize</code></p> | `double`                                                                                                                                                                           |
| Visible items             | <p>Sets number of visible items in the tumbler<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Visible items</code><br><strong>Code:</strong><br><code>widget.style.controlTumblerVisible</code></p>             | `int`                                                                                                                                                                              |
| Over color                | <p>Sets element color on mouse entered<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Over color</code><br><strong>Code:</strong><br><code>widget.style.controlOverColor</code></p>                             | `color`                                                                                                                                                                            |
| Over border color         | <p>Sets element border color on mouse entered<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Over border color</code><br><strong>Code:</strong><br><code>widget.style.controlOverBorderColor</code></p>         | `color`                                                                                                                                                                            |
| Over font color           | <p>Sets element font color on mouse entered<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Over font color</code><br><strong>Code:</strong><br><code>widget.style.controlOverFontColor</code></p>               | `color`                                                                                                                                                                            |
| Over slider color         | <p>Sets element slider color on mouse entered<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Over slider color</code><br><strong>Code:</strong><br><code>widget.style.controlOverSliderColor</code></p>         | `color`                                                                                                                                                                            |
| Over control colorize     | <p>Sets over element colorize<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Over control colorize</code><br><strong>Code:</strong><br><code>widget.style.controlOverColorize</code></p>                        | `color`                                                                                                                                                                            |
| Control colorize          | <p>Sets element colorize<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Control colorize</code><br><strong>Code:</strong><br><code>widget.style.controlColorize</code></p>                                      | `color`                                                                                                                                                                            |
| Selected control colorize | <p>Sets selected element colorize<br><br><strong>Actions editor:</strong><br><code>Property > Style > Controls > Selected control colorize</code><br><strong>Code:</strong><br><code>widget.style.controlColorizeSelected</code></p>            | `color`                                                                                                                                                                            |

## Interaction

<div align="left"><img src="/files/-MIxukRl8GzDTsLlm5ZO" alt=""></div>

| Property               | Function                                                                                                                                                                                                          | Type   |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| Maximizable            | <p>Enable maximizing to page on press<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Maximizable</code><br><strong>Code:</strong><br><code>widget.maximizable</code></p>               | `bool` |
| Interactive            | <p>Enable user interaction with the widget content<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Interactive</code><br><strong>Code:</strong><br><code>widget.interactive</code></p>  | `bool` |
| Input                  | <p>Enable input actions like Press, Click, Double Click<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Input</code><br><strong>Code:</strong><br><code>widget.action</code></p>        | `bool` |
| Fixed                  | <p>Disable free widget dragging<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Fixed</code><br><strong>Code:</strong><br><code>widget.fixed</code></p>                                 | `bool` |
| Lock size              | <p>Enable to lock widget size while dragging<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Lock size</code><br><strong>Code:</strong><br><code>widget.lockSize</code></p>             | `bool` |
| Lock rotation          | <p>Enable to lock widget rotation while dragging<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Lock rotation</code><br><strong>Code:</strong><br><code>widget.lockRotation</code></p> | `bool` |
| Lock x                 | <p>Enable to lock x position while dragging<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Lock x</code><br><strong>Code:</strong><br><code>widget.lockX</code></p>                    | `bool` |
| Lock y                 | <p>Enable to lock y position while dragging<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Lock y</code><br><strong>Code:</strong><br><code>widget.lockY</code></p>                    | `bool` |
| Static                 | <p>Disable dynamically load and unload widget<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Static</code><br><strong>Code:</strong><br><code>widget.static</code></p>                 | `bool` |
| Connected table index  | <p>Not documented<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Connected table index</code><br><strong>Code:</strong><br><code>widget.connectedTableIndex</code></p>                 | `int`  |
| Connected table row id | <p>Not documented<br><br><strong>Actions editor:</strong><br><code>Property > Interaction > Connected table row id</code><br><strong>Code:</strong><br><code>widget.connectedTableRowId</code></p>                | `int`  |

## Font

<div align="left"><img src="/files/-MIxukRcVpY6_frh_SG1" alt=""></div>

| Property         | Function                                                                                                                                                                                                                                                    | Type                                                                                                                                                                                                                                                                       |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Family           | <p>Font family name<br><br><strong>Actions editor:</strong><br><code>Property > Font > Family</code><br><strong>Code:</strong><br><code>widget.style.font.family</code></p>                                                                                 | `string`                                                                                                                                                                                                                                                                   |
| Size             | <p>Font size<br><br><strong>Actions editor:</strong><br><code>Property > Font > Size</code><br><strong>Code:</strong><br><code>widget.style.font.size</code></p>                                                                                            | `int`                                                                                                                                                                                                                                                                      |
| Color            | <p>Font color<br><br><strong>Actions editor:</strong><br><code>Property > Font > Color</code><br><strong>Code:</strong><br><code>widget.style.font.color</code></p>                                                                                         | `color`                                                                                                                                                                                                                                                                    |
| Underline        | <p>Sets text underline<br><br><strong>Actions editor:</strong><br><code>Property > Font > Underline</code><br><strong>Code:</strong><br><code>widget.style.font.underline</code></p>                                                                        | `bool`                                                                                                                                                                                                                                                                     |
| Italic           | <p>Sets text italic<br><br><strong>Actions editor:</strong><br><code>Property > Font > Italic</code><br><strong>Code:</strong><br><code>widget.style.font.italic</code></p>                                                                                 | `bool`                                                                                                                                                                                                                                                                     |
| Weight           | <p>Sets font weight<br><br><strong>Actions editor:</strong><br><code>Property > Font > Weight</code><br><strong>Code:</strong><br><code>widget.style.font.weight</code></p>                                                                                 | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Thin</code><br><code>ExtraLight</code><br><code>Light</code><br><code>Normal</code><br><code>Medium</code><br><code>DemiBold</code><br><code>Bold</code><br><code>ExtraBold</code><br><code>Black</code></p> |
| Capitalization   | <p>Sets capitalization for text<br><br><strong>Actions editor:</strong><br><code>Property > Font > Capitalization</code><br><strong>Code:</strong><br><code>widget.style.font.capitalization</code></p>                                                     | <p><code>enum</code><br><br><strong>Values:</strong><br><code>MixedCase</code><br><code>AllUppercase</code><br><code>AllLowercase</code><br><code>SmallCaps</code><br><code>Capitalize</code></p>                                                                          |
| Letterspacing    | <p>Spacing between individual letters<br><br><strong>Actions editor:</strong><br><code>Property > Font > Letterspacing</code><br><strong>Code:</strong><br><code>widget.style.font.letterspacing</code></p>                                                 | `double`                                                                                                                                                                                                                                                                   |
| Horizontal       | <p>Horizontal alignment of text<br><br><strong>Actions editor:</strong><br><code>Property > Font > Horizontal</code><br><strong>Code:</strong><br><code>widget.style.font.horizontalAlignment</code></p>                                                    | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Qt::AlignLeft</code><br><code>Qt::AlignRight</code><br><code>Qt::AlignHCenter</code><br><code>Qt::AlignJustify</code></p>                                                                                    |
| Vertical         | <p>Vertical alignment of text<br><br><strong>Actions editor:</strong><br><code>Property > Font > Vertical</code><br><strong>Code:</strong><br><code>widget.style.font.verticalAlignment</code></p>                                                          | <p><code>enum</code><br><br><strong>Values:</strong><br><code>Qt::AlignTop</code><br><code>Qt::AlignBottom</code><br><code>Qt::AlignVCenter</code></p>                                                                                                                     |
| Wrap             | <p>Wrap text to the widget's width<br><br><strong>Actions editor:</strong><br><code>Property > Font > Wrap</code><br><strong>Code:</strong><br><code>widget.style.font.wrapMode</code></p>                                                                  | <p><code>enum</code><br><br><strong>Values:</strong><br><code>NoWrap</code><br><code>WordWrap</code><br><code>WrapAnywhere</code></p>                                                                                                                                      |
| Line height mode | <p>Determines how the line height is specified, proportional to the line or fixed<br><br><strong>Actions editor:</strong><br><code>Property > Font > Line height mode</code><br><strong>Code:</strong><br><code>widget.style.font.lineHeightMode</code></p> | <p><code>int</code><br><br><strong>Values:</strong><br><code>0 - Proportional height</code><br><code>1 - Fixed height</code></p>                                                                                                                                           |
| Line height      | <p>Sets line height<br><br><strong>Actions editor:</strong><br><code>Property > Font > Line height</code><br><strong>Code:</strong><br><code>widget.style.font.lineHeight</code></p>                                                                        | `int`                                                                                                                                                                                                                                                                      |

## Database

| Property            | Function                                                                                                                                                                                             | Type     |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| Database            | <p>Database file name<br><br><strong>Actions editor:</strong><br><code>Property > Database > Database</code><br><strong>Code:</strong><br><code>widget.database</code></p>                           | `string` |
| Field index         | <p>Current field index<br><br><strong>Actions editor:</strong><br><code>Property > Database > Field index</code><br><strong>Code:</strong><br><code>widget.dbFieldNum</code></p>                     | `int`    |
| Field name          | <p>Current field name<br><br><strong>Actions editor:</strong><br><code>Property > Database > Field name</code><br><strong>Code:</strong><br><code>widget.dbFieldName</code></p>                      | `string` |
| Rows count          | <p>Number of rows in table<br><br><strong>Actions editor:</strong><br><code>Property > Database > Rows count</code><br><strong>Code:</strong><br><code>widget.dbRowCount</code></p>                  | `int`    |
| Selected rows count | <p>Number of selected rows<br><br><strong>Actions editor:</strong><br><code>Property > Database > Selected rows count</code><br><strong>Code:</strong><br><code>widget.dbSelectedRowCount</code></p> | `int`    |
| Last row index      | <p>Index of last row<br><br><strong>Actions editor:</strong><br><code>Property > Database > Last row index</code><br><strong>Code:</strong><br><code>widget.dbRowLast</code></p>                     | `int`    |
| Row id              | <p>Current row id<br><br><strong>Actions editor:</strong><br><code>Property > Database > Row id</code><br><strong>Code:</strong><br><code>widget.dbRowId</code></p>                                  | `string` |
| Sql query           | <p>Sql query<br><br><strong>Actions editor:</strong><br><code>Property > Database > Sql query</code><br><strong>Code:</strong><br><code>widget.sqlQuery</code></p>                                   | `string` |
| Parse query id      | <p>Parse query id<br><br><strong>Actions editor:</strong><br><code>Property > Database > Parse query id</code><br><strong>Code:</strong><br><code>widget.parseQueryId</code></p>                     | `string` |

## Actions

| Property                             | Function                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show controls                        | <p>Show playback panel<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Show controls</code><br><strong>Code:</strong><br><code>widget.script.actionShowControls()</code></p>                                                                                                                                                                                                                                                                                                           |
| Hide controls                        | <p>Hide playback panel<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Hide controls</code><br><strong>Code:</strong><br><code>widget.script.actionHideControls()</code></p>                                                                                                                                                                                                                                                                                                           |
| Execute                              | <p>Execute custom script<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Execute</code><br><strong>Code:</strong><br><code>widget.script.actionExecute(QString code)</code></p>                                                                                                                                                                                                                                                                                                        |
| Set db value by field num            | <p>Add or modify row by field num. Use row index -1 to add new row, 0 to change last added row<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Set db value by field num</code><br><strong>Code:</strong><br><code>widget.script.actionSetValue(int row, int col, QString value)</code></p>                                                                                                                                                                                            |
| Set db value by field name           | <p>Add or modify row by field name. Use row index -1 to add new row, 0 to change last added row<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Set db value by field name</code><br><strong>Code:</strong><br><code>widget.script.actionSetValueByName(int row, QString fieldName, QString value)</code></p>                                                                                                                                                                          |
| Set db value by field name from JSON | <p>Add or modify row by field name from a json object. Empty <code>row id</code> will add new row. Example: <code>{"field1":"field1 value","field2":"field2 value"}</code><br><br><strong>Actions editor:</strong><br><code>Actions > Common > Set db value by field name from JSON</code><br><strong>Code:</strong><br><code>widget.script.actionCommitData(QString rowId, QString dataJson)</code></p>                                                                                                   |
| Set db value by field num from JSON  | <p>Add or modify row by field num from a json object. Empty <code>row id</code> will add new row. Example: <code>{"1":"field1 value","2":"field2 value"}</code><br><br><strong>Actions editor:</strong><br><code>Actions > Common > Set db value by field num from JSON</code><br><strong>Code:</strong><br><code>widget.script.actionCommitDataByNum(QString rowId, QString dataJson)</code></p>                                                                                                          |
| Add db row                           | <p><strong>Actions editor:</strong><br><code>Actions > Common > Add db row</code><br><strong>Code:</strong><br><code>widget.script.actionAddRow()</code></p>                                                                                                                                                                                                                                                                                                                                               |
| Remove db row                        | <p><strong>Actions editor:</strong><br><code>Actions > Common > Remove db row</code><br><strong>Code:</strong><br><code>widget.script.actionRemoveRow(QString rowId)</code></p>                                                                                                                                                                                                                                                                                                                            |
| Remove all db rows                   | <p><strong>Actions editor:</strong><br><code>Actions > Common > Remove all db rows</code><br><strong>Code:</strong><br><code>widget.script.actionRemoveAllRows()</code></p>                                                                                                                                                                                                                                                                                                                                |
| Update database                      | <p><strong>Actions editor:</strong><br><code>Actions > Common > Update database</code><br><strong>Code:</strong><br><code>widget.script.actionUpdateDatabase()</code></p>                                                                                                                                                                                                                                                                                                                                  |
| Set current db row id                | <p><strong>Actions editor:</strong><br><code>Actions > Common > Set current db row id</code><br><strong>Code:</strong><br><code>widget.script.actionSetDatabaseRowId(QString rowId)</code></p>                                                                                                                                                                                                                                                                                                             |
| Share file                           | <p><strong>Actions editor:</strong><br><code>Actions > Common > Share file</code><br><strong>Code:</strong><br><code>widget.script.actionShareFile()</code></p>                                                                                                                                                                                                                                                                                                                                            |
| Set position                         | <p>Set item x and y position, 0 is top-left side of parent, 1 is bottom-right side of parent<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set position</code><br><strong>Code:</strong><br><code>widget.script.actionSetPosition(double newX, double newY)</code><br><code>widget.script.actionSetPositionWithAnimation(double newX, double newY, int animationType, int animationDuration)</code></p>                                                                           |
| Set size                             | <p>Set item width and height, 1 to fill parent width or height<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set size</code><br><strong>Code:</strong><br><code>widget.script.actionSetSize(double newWidth, double newHeight)</code><br><code>widget.script.actionSetSizeWithAnimation(double newWidth, double newHeight, int animationType, int animationDuration)</code></p>                                                                                                   |
| Set size and position                | <p>Set item size and position, where lt is distance from parent top-left to item top-left, rb is distance from parent bottom-right to item bottom-right<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set size and position</code><br><strong>Code:</strong><br><code>widget.script.actionSetSizeAndPosition(double lt, double rb)</code><br><code>widget.script.actionSetSizeAndPositionWithAnimation(double lt, double rb, int animationType, int animationDuration)</code></p> |
| Set size and position cancel         | <p>Reset item size and position<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set size and position cancel</code><br><strong>Code:</strong><br><code>widget.script.actionSetSizeAndPositionCancel()</code><br><code>widget.script.actionSetSizeAndPositionCancelWithAnimation(int animationType, int animationDuration)</code></p>                                                                                                                                                |
| Bring to front                       | <p>Bring item to front of all items<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Bring to front</code><br><strong>Code:</strong><br><code>widget.script.actionBringToFront()</code></p>                                                                                                                                                                                                                                                                                             |
| Send to back                         | <p>Send item to back of all items<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Send to back</code><br><strong>Code:</strong><br><code>widget.script.actionSendToBack()</code></p>                                                                                                                                                                                                                                                                                                   |
| Maximize                             | <p>Maximize item<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Maximize</code><br><strong>Code:</strong><br><code>widget.script.actionExpand()</code><br><code>widget.script.actionExpandWithAnimation(int animationType, int animationDuration)</code></p>                                                                                                                                                                                                                       |
| Minimize                             | <p>Minimize item<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Minimize</code><br><strong>Code:</strong><br><code>widget.script.actionShrink()</code><br><code>widget.script.actionShrinkWithAnimation(int animationType, int animationDuration)</code></p>                                                                                                                                                                                                                       |
| Toggle maximize                      | <p>Minimize maximizing or maximize minimizing<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Toggle maximize</code><br><strong>Code:</strong><br><code>widget.script.actionToggleExpand()</code><br><code>widget.script.actionToggleExpandWithAnimation(int animationType, int animationDuration)</code></p>                                                                                                                                                                       |
| Save as image                        | <p>Save the item as image to default Documents folder<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Save as image</code><br><strong>Code:</strong><br><code>widget.script.actionSaveAsImage(QString fileName)</code></p>                                                                                                                                                                                                                                                             |
| Set scale                            | <p>Set bitmap scale, scale = 1 is default<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set scale</code><br><strong>Code:</strong><br><code>widget.script.actionSetScale(double newScale)</code><br><code>widget.script.actionSetScaleWithAnimation(double newScale, int animationType, int animationDuration)</code></p>                                                                                                                                                         |
| Show                                 | <p>Show the item<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Show</code><br><strong>Code:</strong><br><code>widget.script.actionShow()</code></p>                                                                                                                                                                                                                                                                                                                                  |
| Hide                                 | <p>Hide the item<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Hide</code><br><strong>Code:</strong><br><code>widget.script.actionHide()</code></p>                                                                                                                                                                                                                                                                                                                                  |
| Toggle visibility                    | <p>Toggle item visibility<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Toggle visibility</code><br><strong>Code:</strong><br><code>widget.script.actionToggleVisible()</code></p>                                                                                                                                                                                                                                                                                                   |
| Disable                              | <p>Disable user interaction with the widget content<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Disable</code><br><strong>Code:</strong><br><code>widget.script.actionDisable()</code></p>                                                                                                                                                                                                                                                                                         |
| Enable                               | <p>Enable user interaction with the widget content<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Enable</code><br><strong>Code:</strong><br><code>widget.script.actionEnable()</code></p>                                                                                                                                                                                                                                                                                            |
| Set interactive                      | <p>Set item interactive to true or false<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Set interactive</code><br><strong>Code:</strong><br><code>widget.script.actionSetInteractive(bool newInteractive)</code></p>                                                                                                                                                                                                                                                                  |
| Disable input                        | <p>Disable input actions like Press, Click, Double Click<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Disable input</code><br><strong>Code:</strong><br><code>widget.script.actionDisableInput()</code></p>                                                                                                                                                                                                                                                                         |
| Enable input                         | <p>Enable input actions like Press, Click, Double Click<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Enable input</code><br><strong>Code:</strong><br><code>widget.script.actionEnableInput()</code></p>                                                                                                                                                                                                                                                                            |
| Set visibility                       | <p>Set item visibility to true or false<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Set visibility</code><br><strong>Code:</strong><br><code>widget.script.actionSetVisible(bool newVisible)</code></p>                                                                                                                                                                                                                                                                            |
| Press                                | <p>Manually fire Press event<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Press</code><br><strong>Code:</strong><br><code>widget.script.actionItemPressed()</code></p>                                                                                                                                                                                                                                                                                                              |
| Click                                | <p>Manually fire Click event<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Click</code><br><strong>Code:</strong><br><code>widget.script.actionItemClicked()</code></p>                                                                                                                                                                                                                                                                                                              |
| Double click                         | <p>Manually fire Double click event<br><br><strong>Actions editor:</strong><br><code>Actions > Common > Double click</code><br><strong>Code:</strong><br><code>widget.script.actionItemDoublePressed()</code></p>                                                                                                                                                                                                                                                                                          |
| Set opacity                          | <p>Set item opacity from 0 to 1<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set opacity</code><br><strong>Code:</strong><br><code>widget.script.actionSetOpacity(double newOpacity)</code><br><code>widget.script.actionSetOpacityWithAnimation(double newOpacity, int animationType, int animationDuration)</code></p>                                                                                                                                                         |
| Set color                            | <p>Set item background color using hex color<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set color</code><br><strong>Code:</strong><br><code>widget.script.actionSetColor(color newColor)</code><br><code>widget.script.actionSetColorWithAnimation(color newColor, int animationType, int animationDuration)</code></p>                                                                                                                                                        |
| Set overlay color                    | <p>Set item overlay color using hex color<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set overlay color</code><br><strong>Code:</strong><br><code>widget.script.actionSetOverlayColor(color newColor)</code><br><code>widget.script.actionSetOverlayColorWithAnimation(color newColor, int animationType, int animationDuration)</code></p>                                                                                                                                     |
| Set blur                             | <p>Set item blur strength, 0 is no blur<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set blur</code><br><strong>Code:</strong><br><code>widget.script.actionSetBlur(int newBlur)</code><br><code>widget.script.actionSetBlurWithAnimation(int newBlur, int animationType, int animationDuration)</code></p>                                                                                                                                                                      |
| Set X                                | <p>Set item x position, 0 is left side of parent, 1 is right side of parent<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set X</code><br><strong>Code:</strong><br><code>widget.script.actionSetX(double newX)</code><br><code>widget.script.actionSetXWithAnimation(double newX, int animationType, int animationDuration)</code></p>                                                                                                                                           |
| Set Y                                | <p>Set item y position, 0 is top side of parent, 1 is bottom side of parent<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set Y</code><br><strong>Code:</strong><br><code>widget.script.actionSetY(double newY)</code><br><code>widget.script.actionSetYWithAnimation(double newY, int animationType, int animationDuration)</code></p>                                                                                                                                           |
| Set Width                            | <p>Set item width, 1 to fill parent width<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set Width</code><br><strong>Code:</strong><br><code>widget.script.actionSetWidth(double newW)</code><br><code>widget.script.actionSetWidthWithAnimation(double newW, int animationType, int animationDuration)</code></p>                                                                                                                                                                 |
| Set Height                           | <p>Set item height, 1 to fill parent height<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set Height</code><br><strong>Code:</strong><br><code>widget.script.actionSetHeight(double newH)</code><br><code>widget.script.actionSetHeightWithAnimation(double newH, int animationType, int animationDuration)</code></p>                                                                                                                                                            |
| Rotate                               | <p>Rotate item to newAngle degree, 0 is default<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Rotate</code><br><strong>Code:</strong><br><code>widget.script.actionRotate(double newAngle)</code><br><code>widget.script.actionRotateWithAnimation(double newAngle, int animationType, int animationDuration)</code></p>                                                                                                                                                          |
| Rotate X                             | <p>Rotate item about the x to newAngle degree, 0 is default<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Rotate X</code><br><strong>Code:</strong><br><code>widget.script.actionRotateX(double newAngle)</code><br><code>widget.script.actionRotateXWithAnimation(double newAngle, int animationType, int animationDuration)</code></p>                                                                                                                                          |
| Rotate Y                             | <p>Rotate item about the y to newAngle degree, 0 is default<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Rotate Y</code><br><strong>Code:</strong><br><code>widget.script.actionRotateY(double newAngle)</code><br><code>widget.script.actionRotateYWithAnimation(double newAngle, int animationType, int animationDuration)</code></p>                                                                                                                                          |
| Set texture x                        | <p>Sets texture x offset<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set texture x</code><br><strong>Code:</strong><br><code>widget.script.actionSetTextureX(double newX)</code><br><code>widget.script.actionSetTextureXWithAnimation(double newX, int animationType, int animationDuration)</code></p>                                                                                                                                                                        |
| Set texture y                        | <p>Sets texture y offset<br><br><strong>Actions editor:</strong><br><code>Actions > Animation > Set texture y</code><br><strong>Code:</strong><br><code>widget.script.actionSetTextureY(double newY)</code><br><code>widget.script.actionSetTextureYWithAnimation(double newY, int animationType, int animationDuration)</code></p>                                                                                                                                                                        |

## Events

| Property              | Function                                                                                                                                                                                                            |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Changed               | <p>Event when any property is changed<br><br><strong>Actions editor:</strong><br><code>Event > Changed</code><br><strong>Code:</strong><br><code>widget.script.eventChanged()</code></p>                            |
| Database updated      | <p>Event when database is updated<br><br><strong>Actions editor:</strong><br><code>Event > Database updated</code><br><strong>Code:</strong><br><code>widget.script.eventDatabaseUpdated()</code></p>               |
| Database rows count   | <p>Event when database rows count changed<br><br><strong>Actions editor:</strong><br><code>Event > Database rows count</code><br><strong>Code:</strong><br><code>widget.script.eventDatabaseRowsCount()</code></p>  |
| Database data changed | <p>Event when database data is changed<br><br><strong>Actions editor:</strong><br><code>Event > Database data changed</code><br><strong>Code:</strong><br><code>widget.script.eventDatabaseData()</code></p>        |
| Toggled maximizing    | <p>Event when the item is maximized or minimized<br><br><strong>Actions editor:</strong><br><code>Event > Toggled maximizing</code><br><strong>Code:</strong><br><code>widget.script.eventToggleExpand()</code></p> |
| Maximized             | <p>Event when item is maximized<br><br><strong>Actions editor:</strong><br><code>Event > Maximized</code><br><strong>Code:</strong><br><code>widget.script.eventExpand()</code></p>                                 |
| Minimized             | <p>Event when item is minimized<br><br><strong>Actions editor:</strong><br><code>Event > Minimized</code><br><strong>Code:</strong><br><code>widget.script.eventShrink()</code></p>                                 |
| Hide                  | <p>Event when item is hidden<br><br><strong>Actions editor:</strong><br><code>Event > Hide</code><br><strong>Code:</strong><br><code>widget.script.eventHided()</code></p>                                          |
| Show                  | <p>Event when item is shown<br><br><strong>Actions editor:</strong><br><code>Event > Show</code><br><strong>Code:</strong><br><code>widget.script.eventShowed()</code></p>                                          |
| Toggle visibility     | <p>Event when visibility is toggled<br><br><strong>Actions editor:</strong><br><code>Event > Toggle visibility</code><br><strong>Code:</strong><br><code>widget.script.eventToggleVisible()</code></p>              |
| Press                 | <p>Event when mouse/touch is pressed<br><br><strong>Actions editor:</strong><br><code>Event > Press</code><br><strong>Code:</strong><br><code>widget.script.eventItemPressed()</code></p>                           |
| Click                 | <p>Event when mouse/touch is released<br><br><strong>Actions editor:</strong><br><code>Event > Click</code><br><strong>Code:</strong><br><code>widget.script.eventItemClicked()</code></p>                          |
| Double click          | <p>Event when double clicked<br><br><strong>Actions editor:</strong><br><code>Event > Double click</code><br><strong>Code:</strong><br><code>widget.script.eventItemDoublePressed()</code></p>                      |
| Mouse over            | <p>Event when mouse over widget<br><br><strong>Actions editor:</strong><br><code>Event > Mouse over</code><br><strong>Code:</strong><br><code>widget.script.eventMouseOver()</code></p>                             |
| Mouse out             | <p>Event when mouse out widget<br><br><strong>Actions editor:</strong><br><code>Event > Mouse out</code><br><strong>Code:</strong><br><code>widget.script.eventMouseOut()</code></p>                                |
| Loaded                | <p>Event when item loaded<br><br><strong>Actions editor:</strong><br><code>Event > Loaded</code><br><strong>Code:</strong><br><code>widget.script.eventLoaded()</code></p>                                          |
| Swipe left            | <p>Event when swipe left<br><br><strong>Actions editor:</strong><br><code>Event > Swipe left</code><br><strong>Code:</strong><br><code>widget.script.eventSwipeLeft()</code></p>                                    |
| Swipe right           | <p>Event when swipe right<br><br><strong>Actions editor:</strong><br><code>Event > Swipe right</code><br><strong>Code:</strong><br><code>widget.script.eventSwipeRight()</code></p>                                 |
| Swipe up              | <p>Event when swipe up<br><br><strong>Actions editor:</strong><br><code>Event > Swipe up</code><br><strong>Code:</strong><br><code>widget.script.eventSwipeUp()</code></p>                                          |
| Swipe down            | <p>Event when swipe down<br><br><strong>Actions editor:</strong><br><code>Event > Swipe down</code><br><strong>Code:</strong><br><code>widget.script.eventSwipeDown()</code></p>                                    |




---

[Next Page](/llms-full.txt/1)