SAP APPGYVER : How to use Embedded Maps Component in sap appgyver (low-code no-code platform)

Introduction to SAP Appgyver:

Sap Appgyver is the most reliable low code and no code option for building free apps for both IOS and android. Here, you can define your app’s structure and navigation logic. You can build perfect user interfaces with in a very short time without any code but just with a drag and drop functionality.

Here, in this blog I am going to show you the steps of how to create the simple application and to point the markers based on your location and how to prompt your searching of location to Google Maps.

How to use the app builder:

• When you login you have the option to create a new app.

• Click on Create New.

• Give the app name and click on create.

• App is created successfully, this is the editor where you can start creating the application.

• When you click on the drop down at Empty page, you will be prompted to one area where you can create multiple pages for your application.

• Here the page can also be renamed, internally you have an option to navigate between these pages, will show you going on.

• If you see the page which you have created on the left-hand side, there are many components Image, Forms, Scroll View and List. These are core components which can be used for UI by dragging and dropping into the middle area.

• You also have market place from where you can install the required flow functions, components. These installed ones can be seen in third tab.

• In the installed page you can see the components whatever you installed.

Now let us go into the steps of how to create the UI:

Step1: We need to create a simple UI with two input fields and one button.

Step 2: Drag the left side Title component and place it on the UI editor. Give the values of the fields in your right-side panel. If you have any service, you can bind it by clicking on the ABC icon.

Step 3: Next drag the search bar component and bind the value using data variable. Going on I will show you how to maintain the data variables.

Step 4: Similarly add one more Title and search bar component.

Step 5: Drag the button component and maintain the text.

For each and every component you will have an option to add logic.

Now from this Button event logic we are going to next page to show the map with the values which we bind.

Creating another page with Embedded View Component:

Step 1: Create an another page to show the map view.

Step 2: Drag the Embedded Map View Component, when you click on it you can see the respective events for Press.

Step 3: On right-hand side you have markers to render where you can bind the list of latitude and longitude values.

Step 4: Click on Markers to Render Array icon you will get a page to give details.

Step 5: Select List of values to give the list of map data.

Step 6: you can select the initial map region, that is whenever this map loads it will mark the initial coordinates.

 

How to create Data Variables:

You can see at the top right side showing a toggle of view and variables.

Select the variables and you can see the screen where you can create the variables.

App Variable: This variable is something where it can be used anywhere in the application.
Page Variable: This variable is something where it can be used only for specific page.
Page Parameters: These are parameters which can be passed as arguments when navigating to other page.
Data Variables: These variables are used for specific page.

Add two app variables as number for Latitude and Longitude. These variables are used for binding of the text fields in the first page.

Inside the map there will be marker, a toast message is added to show the latitude and longitude values when marker is pressed on map.

When you click on Show on Map button for that press event you can add the navigation component and give the page name what you have to open.

Here, the page which is having embedded map component is added on button click it will navigate to that page.

Instead of the map markers, you can also write some javascript inside the click event using a JS component and post the output.

If you want to directly use the Google Maps from your mobile, when you click on the button, there is a open url component which will open your google maps from your mobile
.

Add the google maps url directly here, so that it will redirect to it. Save all your changes before you run it.

How to run the app:

Step1: Click on the launch option at the top.

Step 2: Download the Sap Appgyver app into your android device and login using your credentials. It will show you all the apps which you are working.

Step3 : Click on the app name and test by clicking on the button giving the data.

Step 4: It will map your coordinates in the map, and when marker is pressed it will show you the coordinates.

This is the basic creation of the application in sap appgyver, you can have a quick walkthrough and play around! You will find it interesting.

Happy Learning!!
Sap business process automation – blog coming soon… Stay Tuned 😊