Ace Code Editor

The Appery.io App Builder uses Ace editor for its code editor. Ace is a powerful code editor and provides the following benefits and features:

• Full-screen mode;
• Fast performance, fast validation, and fast code assist;
• More editor features:
  • Multiple cursors;
  • Block selection;
  • Highlight all occurrences of a selected word allows for easy renaming variables at once in the whole block of code;
  • Find and Replace;
  • Expand and collapse blocks of code;
  • Undo and redo actions;
  • Autocomplete (CTRL + Space) option:

📘

Note!

A large collection of useful hotkeys can be found here.

Adding Custom Code to Appery.io Events

The Run TypeScript action allows the execution of custom TypeScript code inserted into the code editor.

Appery.io offers many different snippets that can be added to your project to call different properties and/or methods. The full list of available properties and functions can be accessed from the EVENTS tab where the Run TypeScript action is added to the corresponding event.

For example, clicking CTRL + Space after entering the Appery.io global object, this.Apperyio., will invoke the list of properties and methods that are available for adding to the code editor:

Also, adding predefined variables is possible:

Example: isBrowser() and isMobile() Functions

Let's consider the example of how to add the functions that check what device the app is currently running on. Such methods can be useful when there is a need to send messages or some configuration file to particular devices.

For example, the methods isBrowser() and isMobile() will inform whether the app is started from the browser or run on the mobile device.

1. First, add two Button components to the screen and name them Browser and Mobile.
2. Select the first button, Browser and unfold the EVENTS tab from bottom. There, select the Click event for it and add the Run TypeScript action for the event. The editor will open where you can enter the this.Apperyio.isBrowser(); method.

👍

Tip!

It's a good practice to use the Autocomplete feature to speed up the process:

3. Let's also make this notification appear in the alert and save the event:

4. The second button should be defined with the this.Apperyio.isMobile(); method:

Ready! Let's test. Run the app in the browser and experiment by clicking the buttons:

However, if you run the same app on a mobile, you will get:

• click on the first button will return false;
• click on the second button will return true:

👍

is Ios() and isAndroid()

Similarly, you can add the is Ios() and isAndroid() functions that will check what device the app is currently running on.

Example: projectInfo Property

Now, let's see how to add the property, projectInfo, to the code that will be called on the app start.

1. First, select the Run TypeScript action for the Page create event, start typing this.Apperyio.p to filter properties starting with "p" and then click CTRL + Space and select the projectInfo property from the list:

2. Next step is selecting what type of data you would like to get on the page creation.
   Also, the notification will be shown as an alert:

3. With the needed snippets added, the event should look like this:

4. Now, after you save and click the TEST button in the App Builder Toolbar to run the app in the preview, the custom code you added will run and the app name will be shown: