Purpose
Purpose and Business Case
This blog post is my entry to the SAP Low Code No Code Challenge, which details my experience working with LCNC Tool SAP AppGyver. My goals were to learn about AppGyver’s capabilities, apply the mobile phone feature in my project, and create an application suitable for a customer.
The idea for this project stemmed from the necessity to easily archive documents and pictures for a large multibranding undergarment company that is undergoing multiple retail store developments. All the while ensuring these documents and pictures are accessible to multiple people.
As part of retail development, employees have to scout a location, complete an inspection, and gain approval. To guide this process, documentation and images are provided to the necessary team members. However since there wasn’t a centralized app to use, different platforms were being used for this process, which can cause frustration. Think of trying to find a potential store location when it does not exist in Google Maps.
While they can use a heavy and complex FIORI desktop application, it is much simpler to use an app available on a cellphone for simple tasks like taking a picture. Following this thought is the solution that combines existing information in the S4HANA system (not implemented on the application yet) with the simplicity of the mobile AppGyver app.
Reference
Link:
Link to try the application: https://sockshop.appgyverapp.com/
Video:
Design
The app is based on the classical pattern List -> Detail. It’s a list + detail page + attachment/picture page.
My Experience
Capabilities
AppGyver offers simple and developer-friendly capabilities. Most of them are unique and necessary for my app and scenario.
My main intent was to learn and create something usable:
I connect with a free, public REST/OData service
Two exactly:
- The Google API for the Maps, which was found in the AppGyver Marketplace
- My simple store API create from a JSON ( with the useful web tool Mocki.io )
I created a data store on your device
The pictures used for the Shop like attachments are stored in the device with a list of objects model. That helps it not overload with REST calls.
I incorporated the native capabilities of my mobile device (camera and GPS)
The application used GPS for the first search. The idea is to combine the Google Maps API with the GPS capabilities, and find the closest stores of the company (oData service not implemented for the challenge):
GPS Location Device
Camera feature
Integrated a formula
The formula section on AppGyver is one of my favorites. The framework immediately corrects mistakes and permits with the right column to understand easily what your formula does. The search for what you need is immediate and the validation shows if the result of your formula is compatible with the input of your component.
I used the formulas to format dates, find attributes or elements in an array, and filter a list. All of that WITHOUT JAVASCRIPT!
Format Day
SELECT for repeat pics
Set attribute page
I used one item from the Component Marketplace or Flow Function Market
The market is appealing because there are many components and flows/nodes that are already created. I used the Badge Icon and the Open URL (to open the FIORI Launchpad) action node.
Installed Component
I set the theme, and change the colors of pre-made components
The main source for this portion is Curiosity Lab, which is a YouTube channel teaching design tricks to create applications. Plus I followed the colors of the Fiori Design Guide to create my palette.
Style
Conclusion
While the idea of Juergen Mueller influences my programmer life, there is more work than resources available to complete daily tasks. This means having a minimum amount of time to add more value to our customers.
But AppGyver mitigates this issue because it is a tool we can use to facilitate the programming work and bring solutions faster while maintaining quality assurance.
Feedback
While developing my solution, I noted which items were not ideal and which items were beneficial:
Negative:
- when creating complex logic ( busy button, change the color of a component ) elaborate workarounds are needed;
- simple issue: it was difficult to find the correct icon because I'm used to the sapui5 apps;
- sometimes the deployed mobile application is unstable, that it's the scariest part;
- the marketplace needs more components. I found some that were not working at all;
Positive:
+ really easy and fast developing;
+ support really reactive. I opened a ticket and in less than 8 hours they solved it;
+ the data section is well designed. In particular the API, you can test them directly on the IDE and the part is accessible;
+ easy access to test and debug directly on my phone. Really good work!
+ plenty of tutorials, videos, and documentation readily available. I didn’t expect aspect this much information for a new product; the learning curve was very fast for my has a developer;
+ special attention to the “assigned value”, “data biding” and, in particular, the “function”. Really appreciated the function help to show which are the errors and which are the suggestions;
Future
I would use AppGyver in the future for the following reasons:
As a potential framework when I have to develop an application that uses the native capabilities of a cell phone.
If I need something simple and easy to deploy.
And mainly in my SAP-centric working environment, AppGyver will simplify the more complex and abstruse FIORI apps/SAP Transactions. The idea is to translate parts of them into a more easy Low-Code application.
- SAP Managed Tags:
5 Comments
