2. Appgyver Composer Pro

[Shibaji]

Appgyver is a Low-code no-code platform with which you can build apps quickly.

You can refer to my bog Appgyver - Introduction where I tried to put some introduction and SAP’s acquisition of Appgyver.

In this blog, we will discuss the feature of the WISWIG editor of the composer pro.

Basic Navigation

When you create an app, Appgyver will automatically navigate to the composer pro editor creating a default view. The editor looks as below:

Composer Pro

The main canvas is the area where you can drag drop controls and layouts. If you need to change the property, binding or style of a control, you can do so in the Control Property pane. Switch to style tab to change appearance of a particular control. For most of the apps for the practical purpose might have deeper nested layouts. You can see the nested hierarchy of the layouts and controls in the 'Hierarchy pane'.

Variable Editor

By default the editors shows the view component of the app. However if you need to work on the variables you can switch to the variable switch from the top of the editor.

After moving the switch you should be able to see the data editor:

We will discuss about the variables in the later part on - 4. Data and Variable

Editing Page

When you create the app the page name is by default defined as 'empty page'.

You can edit this in the page property pane:

If you need to add more pages you can navigate to the page editor by clicking the top left navigation

This will navigate to the page editor and you can add new page or navigate to other pages

Now let's have deeper look at the control pane.

Controls

You'll find 3 tabs in this section.

1. Core : This shows the core set of controls
   
   
   
   • There are mainly 4 types of controls here.
     
     
     
     • Basic: Image, Card, Icon, Text, Heading etc.
     
     
     • Form: Input, Button etc.
     
     
     • Layout: Containers or rows or scrollable rows. You can play around with this in the WISWIG editor to create flexible layouts nesting one into another.
     
     
     • List: List line items etc.
     
     
     • Primitive: Checkbox, dropdown etc.
     
     
     
     
   
   
   
   


2. By Me: You can customize your own control and the custom controls will be shown in this tab


3. Installed: Apart from the core there is a marketplace from where you can install ton of controls

To search market place click on the search box



This will open the market place and you can install a new control.

     

 

Logic and Flow Functions

To add some logic in the page you need to use the logic and flow functions. You can add micro flow functions and visually compose the logic in a flow. For this you need to use the logic editor. Click the up arrow button from bottom right corner and the pane will open from bottom.

This will open the logic editor.

In the logic editor you can use mainly do the following:

• Define Navigation behavior


• Handle Variables


• Handle dialogs


• View behaviors


• Data handling - This is the main area from where you can control the CRUD operation to back end


• Device specific native features like camera, barcode etc.


• Control flow logic like If then else or timer based logic


• apart from this you can define custom function using JavaScript

Other operations

Apart from these there are some essential functions you need to carry out in order to develop and deploy an app. On top of the page you'll find links for various operations

• Launch - This is to launch an app in either Appgyver preview app or to launch app to the app store


• Theme - This is to manage the overall theme of the app


• Navigation - Manage navigation menu to multi page app


• Data - This is where data in various level can be defined


• Auth - add authentication and security


• Community - connect to Appgyver community to post questions.

In the Next chapter we'll develop an app quickly and launch it via Appgyver preview app.

 

Navigation

< Prev  |   Root   |    Next >