AppGyver – to code or not to code, that is the question?

Hello community, happy new year 2022! It has been a while since my last blog and as we’re all starting the new year with new resolutions, new learning, and new challenges so I decided to get back into blogging and sharing my investigations. I heard a lot about this topic towards the end of last year therefore, I decided to see what this is all about. I know this can be a touchy subject for certain developers so here we go. If you prefer to read this blog in spanish, visit here. Feel free to drop your comments on what you like or would like to see from the tool. I am planning on doing a series of blogs on it.

My initial reason to do this investigation is to see how easy (or not) this low code type of development approach is for someone with and without background in these tools. As new tools are constantly being offered to developers and clients. I also want to know how close or far we are from some something like AppGyver to be used for enterprise clients or just for smaller projects. Another question I wanted to answer is if AppGyver type of development would replace Fiori development? And the answer is NO, this is simply a different way to approach development.

What is AppGyver and what is low code or no code?

AppGyver is a no-code* platform allowing developers to build apps for all devices (desktop, mobile, tv, browser). Sounds too good to be true! I added the asterisk in the no-code platform because I will also demonstrate a scenario I had to include in this blog, and it required minimal code, so it is not 100% no-code driven.

Here is what the tool looks like when you log in and start dragging controls into the canvas. I started by adding a simple input field to enter my name, then a drop-down control that I will connect to an OData service and a button to see what has been provided by the user. I chose these controls because I can showcase a simple text being read, a list of items and an event being called on the page. Why I chose OData? Because that is the normal way to expose data in the SAP world, especially in Fiori applications. I could have chosen other options and I will explain that when I dig down into the Data folder.

An advantage right away is that making the user not having to go into another SAP tool such as the BTP is better. I was able to start reading about this tool and almost immediately, I was able to create my account by registering in their website https://www.appgyver.com/ – yes I know this tool is owned by SAP, however, it is easier to get immediate access from this website than having to go into the BTP, and trying to find a service, register, wait for its provisioning and then struggle through the integration of it.

Ok, now I have accessed the tool and I am trying to see what I need to do to get comfortable or even get a handle of it. I noticed that the default view of the WYSIWYG (what you see is what you get) is the mobile device, but you can change the display you will be testing with. Other options are different mobile devices such as iPhones, android phones, iOS and Android tablets, and also the browser if you wish to change it to.

We live in a mobile world and we should be designing and developing with that in mind. I was happy to see I was able to quickly test from my own device as well through the Launch button in the top menu. To accomplish immediate testing from your device, download the AppGyver testing app from the app store. There is also a way to test out this application from an android device and you will need to get the demo app from the Google store.

Now that I have downloaded the iOS version of the SAP AppGyver into my iPhone, I am going to be able to also share some images from the native device, however, before I go into there, I would like to connect to an OData service directly and see how live data integration works for this tool. In my experience developing apps and POCs, clients want to see their data and not some random strings on the screen so let’s make it as close as possible to that.

In this tutorial, I started by using the famous Northwind free OData service found at the following URL:

https://services.odata.org/Experimental/OData/OData.svc

The tool has a way to create a REST API integration resource, so let’s investigate that feature.

In the left menu, start with the base set up. Provide a resource ID to identify your data later when binding to the controls in the application. You may provide a short description of the service. finally provide the URL to the service. Notice you may also set up http headers, or query string parameters.

Once the base set up is done, proceed to the GET collection (GET method). Provide an endpoint for the data you want to retrieve and display in your application. For simplicity purposes I used the Products endpoint.

Switch over to the TEST tab and run a test. Alright, I received an error so let’s analyze it. The message reads: The result was not an array. Maybe the data you’re looking for is inside one of the response object keys. Alright, so let’s analyze right below the error message and you can see the actual array of data comes in the json property value. Let’s see where we need to set that up next.

Go back into the setup of the GET request and change the following property: Response key path

After fixing this configuration and saving your changes, return to the TEST tab and RUN TEST to see the desired data array for the Products entity we’re trying to query. Voila!

You may also SET SCHEMA FROM RESPONSE so that you may be able to access those properties later in your application if you wish. Switch over to the SCHEMA tab and you will see the schema is now set. Good job, we have now set a Data variable we can use later in our application. Close the data configuration and go back to the canvas to continue with this app development.

Before continuing into the next set of explanations, I want to highlight that there are some embedded tutorials on how to get started and do a bunch of development right at the bottom of the application. This is a huge plus for new tools to be able to help developers in getting started or see some tutorials, well done Appgyver. You may also access the documentation in their website https://docs.appgyver.com/

Alright, as I move away from the data section into the actual application, let’s think about how we are going to connect the dots between input fields and to reading those values from the button press event. Let’s analyze each of these 3 controls.

Let’s begin with the input field. Just like doing any other web development, notice we have properties such as label, value, placeholder, disable, amongst other html properties. I decided to create a variable to hold the input value so that I can use it inside the button event. Variables must be created first before they can be assigned to a control property.

As you may already know, variables can hold values and can be used within a context of the application. There are app variables, page variables, data variables, etc. Variables can be accessed from the top right hand corner by clicking on the Variables hyperlink and then the types of variables can be seen from the left hand side menu.

I created a Data variable to hold my data resource we created earlier and I also created a page variable to hold my input field vName  and also the selectedProductID and selectedProductName as shown here.

Next is my drop down control. By far, this control took me the longest to configure; by longest I mean a few hours starting from 0 knowledge on the tool.

I set up the Label text, the Option list, Selected value and selected label with variables; again, because I will use those in the button event later.

One important thing to show here is how the option list is set up for the dropdown data.

Unlike adding a list of items which is way easier and I will show case in a different blog, I want to show how the dropdown items need to be configured below. In the data variables, we created a products_list. We must use the MAP function and pass a list of items, and then an object with label and value to be shown in the dropdown control. You can see below. Other data variables can be accessed using data. notation. To access each of the properties inside each item, you must use item. notation.

Finally, we arrive to the button set up. There are different types of buttons, and you may choose different colors or states depending on your scenario. I just selected one random one. Notice that there are 2 arrows below.

The first arrow pointing to the PROPERTIES tab shows the Label and the disabled property. I chose to use the Disabled property so that my button is not shown unless there is a value in the vName variable. The reason for that is to add a validation to enforce the input field to be populated.

Second, the arrow pointing down shows the event and an alert that will display a dynamic title and a dynamic message. This can be achieved via variables.

Let’s launch the application to see how it works. Save your code and select the LAUNCH tab at the top of the screen. A screen like the one below will be shown.

If you scan the QR code with your device, the app will open in the iOS (iPhone in my case) or if you copy and paste the URL provided by the Text box next to the QR code, you can launch it directly in your browser.

Here are the screenshots from my phone and as you can see, the controls are responsive, the variables play well and the alert is showing what I typed and what I selected.

Closing thoughts:

I believe the SAP Appgyver tool has good potential and it requires a little bit of training for new people getting into the tool. There is plenty of community involvement and documentation for anyone to get started. Connecting the controls and the logic was easy to accomplish. The difficult parts of the tool in my opinion are being able to distinguish the variable types.

What I would like to know next is the navigation of the pages which I did not investigate in this first blog. I would also like to know how the deployment process and maintenance of the app cycle goes when upgrading an application or releasing a new version such as multi version support. Finally, I would like to know if multi theme support is available or if only one theme is supported at any given time.

Overall, it is not difficult to learn, and it seems easy to follow. I look forward to hearing what other experiences are and if there is any scenario you would like to see it done, please let me know in the comments so I can include it in my next blog.