New in New Ionic Components and Templates, New API Express Components, and Server Code Plug-ins and Snippets

The team is starting 2016 with new and exciting updates and improvements to the platform!

App Builder enhancements

The latest update brings some cool features to the visual App Builder.

New Ionic components

Two new UI components for Ionic were just released: Card and Text.

The Card can be used to visually separate information on a page. It allows for more control and flexibility, and can even be animated. This new component is based on Google’s Card UI design.

The Text component can be used to conveniently place any custom text or AngularJS expression (wrapped with {{...}}) on the page.

The Ionic Button has obtained new property – Icon Only. It makes a button look like an icon. This property converts a button to an icon by changing Icon Style and Style properties, and ignoring the Text property.

It’s now possible to copy and clone components in the App Builder. To create a full copy of a UI component with all nested children, (including other components), click the clone icon on the top right of the component:


Cloning a component

Ionic page templates

When creating a new page in Ionic, you can choose a blank page or a page with ionContent. The blank page is a simple page without any extra components. Use it when you don’t need to make any special adjustments to the scroll or scrollbar settings. The page with ionContent is a multi-tool page with a ion-content directive and many settings provided by Ionic. Use it when you need to make flexible adjustments to page scroll behavior.

You can find more detailed templates description in our docs.

Code snippets and shortcuts

A snippet is a ready-to-use piece of code that can be quickly inserted into your code. In this update we are adding another useful snippet – Invoke REST API ($http). The Invoke REST API ($http) is a wrapper for Angular’s $http and can be used to send AJAX requests.


Snippet to invoke a REST API


Another new addition is code shortcuts. A shortcut allows you to type a few characters that then expand into the corresponding code. For example, type $Cg and then press Ctrl+Space or Cmd+Space to quickly add Config.get function. The shortcut will be translated to:

Apperyio.Config.get( expression/*, default*/ );

Find the whole list of shortcuts here. We recommend memorizing them- they’re very useful and huge time-savers.

There are more updates in the App Builder, such as: an improved auto complete feature that assists with changing UI components’ editable properties; the ability to pass custom parameters for Cordova plug-ins; support of 9-patch image uploading and much more.

API Express

The new Mapping component has been added to the API Express visual editor. It provides a visual mapper to map one JSON between components. Find the Mapping component in the API Express documentation.

The Start and End components are improved, and now the URI templates can be specified in a simpler way.

The API Express visual service editor was redesigned and now it’s even simpler to build advanced services.


API Express visual service editor


There are lot more changes in API Express under the hood: we fixed many bugs and improved general stability.

Server Code

To simplify writing server-side scripts, we’ve added plug-ins and snippets.

Server Code plug-ins provide out-of-the-box logic that you can quickly use in your app. For example, we have provided a plug-in that allows you to send SMS messages using Twilio and email messages using SendGrid.

The list of available Server Code plug-ins can be found under the Plug-ins tab.

To add a particular plug-in to your account, select it from the plug-ins list and click import. After a plug-in is imported, its scripts and libraries are added to your project.

Snippets are short re-usable bits of code that can be quickly inserted into any script. Snippets allow you to write your scripts much faster by providing code, such as invoking a 3rd party API with a single click.

Read more about the Server Code snippets and plug-ins in the docs.

We hope you’ll enjoy new features of As usual, we always interested in your feedback about what can be improved.

Happy coding with the updated!