Skip to Content
Technical Articles
Author's profile photo Samannaya Roy

Create a Low-Code Application with SAP AppGyver – Simple Barcode Scanner Application

Here we will create a very basic Barcode scanner app using SAP AppGyver. Also, we will see without wring a single line of code how we can develop a basic app for Android/ iOS.

  1. Open Your APPGYVER Composer Account https://platform.appgyver.com/.
  2. Click on CREATE NEW, i.e., we will create a new app.
  3. A new Pop will appear for Project name. Give the Project name and Click on CREATE. e.g.: My_BarCode_Scanner.

     

 

  1. Now the Designer page will open. The Top side will have drop down for which type of device you want to create the app.

         

 

  1. with left side as Component Market. Containing
  2. a) BASIC

           

            b) FORMS

                 

            c) Layout

                 

             d) Lists

                   

              e) Primitives

  1. Now Drag and Drop a Button from Forms section to the page.

                     

  1. Change PropertiesLabel selecting the Button as per business requirement. E.g.: Scanner

                 

  1. Then click on Logic panel downside.

   

  1. Logic pane will open as below.

         

  1. Here in the left pane, you select Device – Scan QR/Barcode. Drag and drop it in Logic

         

 

  1. Click the existing Component Tap connection and manually draw a connection to the Device This connector simply indicates the flow direction, which in this case is the button being tapped and then that triggering the camera device opening.

             

  1. To test the scanner working fine or not we will now add and Dialog-Alert component to our application using Logic This will display a Popup alert once the barcode is scanned containing the Barcode scanned number or details.

                   

           

  1. Add a connector between the top Scan QR / Barcode option and the Alert element, again indicating the flow direction.

                 

  1. By default, Alert is set to display a static text. And we want to add a dynamic binding here. This will define what information to provide such as scanned barcode information here in this example.

Select the Alert and go to right side Properties. Select Dialog title. Click Currently bound               to: Static text, opening the binding options screen.

               

 

  1. Click Output value of another node.
  2. Configure the binding to the following and SAVE.
  3. Select logic node – Scan QR/barcode.
  4. Select node output – Scan QR/barcode / QR barcode content

             

  1. Now SAVE the App.

               

  1. Select LAUNCH button.

     

  1. It will take you to the area how you can run the app first time.

Download SAP BUILD APPS PREVIEW app from App store in your mobile.

Then open the app and scan the bar code from this screen.

It will display the projects in the application.

           

  1. This will look like below in Mobile app.

           

  1. Open the application.

If you don’t see the above page, then go to the empty page and select the default page.

                 

  1. Scan the Barcode. You can test using the below barcode.

             

           This will be the below output screen in mobile.

             

As a summary to this, given app can be basic to develop different kind of applications in real world like scanning bar code from Package and map the warehouse, scan bill and approve to upload.

This blog is posted in detail to encourage more people to jump in to learn SAP AppGyver in their projects for lightweight business solutions without having knowledge in Android/ iOS coding.

I would be happy if people try this and let me know their thoughts on this. You are always welcome to share your questions in this blog.

Also you can go ahead on learning from https://docs.appgyver.com/docs/articles

Thank you for following the Blog. Some more consecutive business solutions will come up in shortly for more help.

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Daniel Wroblewski
      Daniel Wroblewski

      Nice touch to supply a barcode 🙂 What did you use to generate it, https://barcode.tec-it.com/en/Code11?data=123456 ?

      Author's profile photo Samannaya Roy
      Samannaya Roy
      Blog Post Author

      Not through that link

      Author's profile photo Stephanie De Camara Marley
      Stephanie De Camara Marley

      Congrats! You presented your app in a clear and crisp way too!

      Author's profile photo Yen Shen, Ben Lim
      Yen Shen, Ben Lim

      Hi @Samannaya Roy,

       

      The scanned component does not support when the app is deployed in BTP and open as web app. Is there any alternative solution for this functionality to be able to run in mobile web version instead of deployed in native application in Android/iOS?

      If not supported, is there additional cost incurred if to deploy the app as native Android/iOS?

      Thanks.

      Regards,

      Ben

      Author's profile photo Samannaya Roy
      Samannaya Roy
      Blog Post Author

      for Android you download the app SAP BUILD APPS preview from play store in android.

      Author's profile photo Yen Shen, Ben Lim
      Yen Shen, Ben Lim

      SAP Build Apps preview is for developer preview testing purpose. If to roll out to end user, how should the business able to access the app?

      Author's profile photo Samannaya Roy
      Samannaya Roy
      Blog Post Author

      Please refer this link: hope this will solve your issue:

      https://help.sap.com/docs/build-apps/service-guide/build-and-deploy-web-applications

      Author's profile photo Yen Shen, Ben Lim
      Yen Shen, Ben Lim

      i was able to deploy as web application. The problem i faced is the QRcode camera not able to trigger when the button is clicked. However it working in preview using SAP Build app and preview in build developer portal. I open the app via mobile but still the camera not being triggered.