Technical Articles
3. Building your first app using Appgyver
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 the previous blogs I have explained how you can get onboarded in Appgyver and what are the main constitutes of the Appgyver IDE – Composer Pro.
In this part I am going to build our first app and view in the Appgyver preview app in mobile device.
Prerequisite
You have already created a project from Appgyver project canvas and landed in the main area of Composer pro.
Heading, Background image and Style
Now, let’s use the WISWIG tools to drag and drop controls in the main area to build the view component of your app.
We’ll build an app for managing Service Tickets.
We can simply add a heading and some text below. However, I was trying to make it look more pro, so added a container and a background image. On top of that added the Heading with some style elements. This looks like below:
Form Elements
Now let’s add some form elements. We will give input drop down and in input text to fill in ticket description and then have a button to save the data.
Add a dropdown field and your can add possible value by clicking the Option List from the property pane.
When you try to add values it will give different options as described below. for now we’ll add static values (List of Values) only. We will cover the other options later in this series.
I have added the following categories:
Hardwire issues
Software issues
Network issues
Then we will add a free text field in the form.
Also I’d like to add a button below to add a Create action.
Now my canvas is looking like below:
Preview
At this moment let’s save the project and look at the preview.
For this, let’s go to the ‘Launch’ tab from top.
To preview in web, simply click on the ‘Open App Preview portal’
The Web preview will look like below.
However, more interesting scenario is to test in mobile device. For this Appgyver brings a viewer tool.
Depending on your device you can install the Appgyver Viewer app in your iOS or Android device.
When you launch the app and logon with your credentials, it’ll list all the apps your have built. Choose the one you’d like to visualize and it’ll show the app in mobile instantly.
And here you can see the drop down values are appearing in the form.
Good thing is that now on when you make some changes in the app, you just need to save the change in the Appgyver platform and the change will be reflected to your mobile device almost instantaneously.
So we created our first version with some Static text and style and added a form. However to work with the form data we need to understand the concept of data and variables. This we’ll cover in the next blog.
Also, if you’d like to quickly onboard yourself on Appgyver you can refer to the Nice blog written by Mohini.
Navigation