Blog

Today we are pleased to announce the September release of appery.io with new alias $a of Appery helper, global variable $v and global functions!

Let’s look at what’s new

$a

‘$a’ is an alias for the Appery helper ‘Apperyio’. Now, instead of writing:

this.Apperyio.navigateTo("Screen1");

you can use a much shorter form:

this.$a.navigateTo("Screen1");

$v

‘$v’ is an alias for global variables that were previously accessed through Apperyio.vars.

$v is a place for storing any data as ‘global’. For example, to transfer data between screens.

this.$v.myData = 12345;
this.$v.userInfo = {id: 123, name: 'Joe'};

For more detailed information about ‘$v’, you can refer to our documentation https://docs.appery.io/docs/6-model-and-storage#apperyio-global-variable

Appery Helper

The list of functions and properties for the Appery helper ‘$a’ has been significantly expanded. This expansion greatly simplifies the invocation of the most commonly used operations. For example, if you need to display a modal window and pass parameters to it, this can now be achieved in a single line of code:

let data = await this.$a.modal("EditUser", {name: 'john'});

If you need to display a loading indicator, a simple call will do:

await this.$a.showLoading();

And if you need to perform a GET request:

let res = await this.$a.get("https://mydomain.com/user/12345");

You can explore the full list of available functions on this page: https://docs.appery.io/reference/common-methods-and-properties

Global Functions

Global functions have been added. Now, in the Functions section under Modal and Storage, you can define a function, for example ‘sum’, which will be accessible on all screens, custom components, services, etc., using this.$v.sum()

For more detailed information about global functions, you can refer to our documentation https://docs.appery.io/docs/6-model-and-storage#global-functions

We believe this new feature will be of great value to our users. We appreciate your continued use of Appery.io, and we wish you a happy developing!

Thank you for using Appery.io and Happy Developing!

Your Appery.io Team

We’re excited to announce the introduction of the latest Appery.io release, which includes support for Android 13 (API level 33).

While many of the Appery projects were upgraded automatically, we aimed to keep manual application changes to a minimum to ensure a smooth transition for all users.
– Please ensure that you have not manually modified the config.xml file in the source tab. If any modifications were made to this file, kindly follow these steps: Remove the file and execute the “Undo all source changes” operation for the CORDOVA folder.

– Additionally, for some users, it may be necessary to access the App Settings. From there, navigate to Cordova Config, then proceed to the Android tab. Ensure that the property “GradlePluginKotlinVersion” is present with the value “1.6.20” (refer to the provided image for visual guidance). If this property is missing, kindly add it manually.

We believe this new feature will be of great value to our users. We appreciate your continued use of Appery.io, and we wish you a happy developing!

Thank you for using Appery.io and Happy Developing!

Your Appery.io Team

Dear Appery.io Community,

We are excited to announce that our first Release of 2023 is already live and you are free to check out what new features and upgrades are already available to all Appery.io users!

First things first: we have successfully upgraded our App Builder to Ionic 6 and Angular 15, which resulted in many useful functional improvements and new features for your app-building experience. Most of them are not immediately noticeable, except in a few cases, but innovative and qualitative.

• The first improvement we would like to introduce is related to the system capability: thanks to upgrading to Angular 15, there will exist no limitations in importing npm packages and modules to your apps anymore.

Check here for some examples of how you can add the npm-modules to the projects created with Appery.io.

Updated Preview Page:

•  The serious upgrade that will hopefully be noticed and welcomed by you: our App Builder now has a very modern-looking editor mobile frame design. Besides, it now comes with an upgraded app preview page that is now user-friendlier and offers more functionality. From the preview page, now not only can you adjust your app’s UI on the device screen with further easy testing it on your device but also publish and share your app right from the preview:

• Moreover, those who decide to publish their project as a mobile web app will be able to share it right from the preview.

New and updated UI Components PALETTE

• Next, we are proud to announce that two new UI components have been added to our App Builder for Ionic: Audio and Video. These new components offer you rich customization options for your multimedia resources:

• The existing Datetime component has also been upgraded and now comes with two views to select from, Inline which opens an inline calendar, and Open in modal which opens the modal with a calendar and an editable label:

• One more enhancement: all the components that offer the option of entering strings now allow users to edit them inline right in the mobile frame, and that is a very handy time saver:

• The next three features refer to the components’ properties upgrades: 1) the Position property was added to many UI components like Checkbox, DataTable, etc.; 2) many UI components that contain labels, for example, Input and Link received the Font Size and Font Weight properties; 3) the Text in Editor property was added to several UI components. With this feature enabled, you will be able to finetune your app UI right in the editor even if this component also has some functional code added as its Text property:

Filtering feature added to OUTLINE and Mapping editor

• The OUTLINE view now comes with a useful feature of filtering components added to the screen. Just start typing the name of the component to retrieve its parent(s) on the tree and quickly locate the component you are looking for:

• Users struggling with cumbersome mappings may find the new Mapping editor option of filtering components (similar to how it is realized in the OUTLINE) particularly useful:

Other enhancements

• The next improvement is minor but comfortable: the Method selection can be changed after the function has been created in the CODE panel:

• Our last enhancement might also seem rather minor, but will definitely be found useful by our users: the ability to double-click on many of the UI components added to the mobile frame of our App Builder in order to speed up the process of customizing them. By double-clicking the Image component, for example, you can immediately access the Media Manager window and thus work with your custom image files more easily:

Oh man, that list was impressive, wasn’t it?

Well, we tried to do our best to make the features above functional and easy to use as much as possible, and hope you’ll enjoy using them.

Thank you for using Appery.io and Happy Developing!

Your Appery.io Team

Dear Appery.io Users,

Since recently, our customers have started complaining about issues with registration/login into our forum. Therefore, we have decided to introduce yet another open channel where you are free to ask any Appery.io-related question(s) you might have: Stackoverflow. 

Stackoverflow is one of the most popular and renown platforms where anybody can ask for an advice on any programming issue. Where hundreds of users find answers to their questions daily and thousands of experts are happy to provide their colleagues with useful recommendations and examples.

Is is truly a huge community and from now on, we encourage you to post your questions (like those on Appery.io Platform, App Builder, Appery.io plug-ins, etc.) there instead of using forum.

Please make sure you use the tag <Appery> or <appery.io> while posting so that our experts from Support Team (as well as other users that can be of help) could answer them ASAP to our mutual satisfaction:

We hope this will help to remove any barriers to effective communication and make getting professional help as easy and productive as possible.

And as usual, we offer more ways for you to get help. Please check this link to learn how to reach to our Support Team for help.

Lots of love on St. Valentine’s Day!

Your Appery.io Team

In software development, the four basic functions are represented by the acronym CRUD: Create, Read, Update, and Delete. These facilitate viewing, searching, and changing information. Every application requires the presence of such functions.

If you are up to building a responsive web application in the most cost-effective way, using the Appery.io Pizza sample can be very handy. The sample is a fully functional responsive application—based on Google’s Material Design—to present pizza recipes along with ingredients. It includes create, read, update and delete functions as well as searching and filtering. In terms of components, the application consists of:

• Appery.io plug-in
• Database
• Server-side script

In order to make it live, you need very little in the way of development skills. It takes literally five minutes for a citizen developer to assemble the application out of building blocks as described in https://docs.appery.io/docs/material-angularjs-app-plugin-example. To further perfect the application, you can add more spicy features to fit your tastes as listed in https://docs.appery.io/docs/samples-overview.

Voilà, the Pizza application is ready!

This summer we will introduce a beta version of Ionic 3 App Builder in Appery.io! This will be a huge step forward for us and we would like to ask You, our customers, to help us test this mobile app development framework version in our platform.

Ionic 3 will be compatible with Angular 4 and comes with many significant performance, usability, and feature improvements over past versions.

This beta version will include the Ionic 3 components and only basic Appery.io platform features. (More details about specific features will be announced in a follow-up to this post.)

Thanks for staying with us all this time, and we hope You will like our new Ionic 3 version.

Today we’ll show you a small example of how to pass data from a modal to its parent.

1. Create a model as shown in the screenshot below:
   

   Create Model

2. Then, define a scope variable “user”, based on this model on the index page.
3. Create a simple page to run the modal and show the global variable “user” like this:
   

   Screen page

4. Create a simple modal with the same structure as the page above (to show the variable “user” and change its property):
   

   Modal page

5. Open the modal you’ve created from the page of your application with the JavaScript code below:

var modalOptions = {  // About Ionic Modal: https://links.appery.io/ve-snippet-modal-ionic
  animation: 'slide-in-up',     // The animation to show & hide with
  focusFirstInput: false,       // Whether to autofocus the first input of the modal when shown
  backdropClickToClose: true,   // Whether to close the modal on clicking the backdrop
  hardwareBackButtonClose: true // Whether the modal can be closed using the hardware back button on Android and similar devices
};
Apperyio.get('Modals').loadModal("Modal1").then(
function(modalInstance) {
  modalInstance.open(modalOptions).then(function(modal) {
    modal.scope.modal = modal;
    modal.scope.user = $scope.user;
    modal.show();
  });
},
function(error) {
  console.log(error);
});

That’s it! Now you can run the application. You can change the user’s name on the page and see its value on the modal. Go ahead. Change the user’s address on the modal and see this value displayed on the page.

Geolocation is one of the most widely used APIs in mobile apps today. From weather to Uber and Lyft, the device location is crucial information and many APIs use it to determine what services and products are available in a given location. When building a mobile app in Appery.io, using the Geolocation API is simple. Apache Cordova library is built-in in every new Appery.io app. Invoking Geolocation will return the latitude, longitude (and other) information which can then be passed to any REST API. The following two short videos show how to use and invoke Geolocation in an Ionic and jQuery Mobile apps:

• A Quick Guide to Using Geolocation API (Ionic App) 
• A Quick Guide to Using Geolocation API (jQuery Mobile App)

Looking for more videos like that? Check out our YouTube channel for many more videos.

This short video shows how to use Apache Cordova Geolocation API to get latitude and longitude data in an Ionic app.

Watch other Ionic videos on our YouTube channel.