Retool x NocoDB: Mobile App for Inventory Management System with Low Code

Previously, we already built the inventory management system backend using several low code / no code tools, now is time to built a simple mobile app front end to make use of what we learned so far.

In this Inventory Management System use case:

  • Backend: Store inventory data, including generate QR code, and provide REST API to query specific inventory data
  • Frontend: A mobile app front end for sales personnel, quickly scan on the QR Code, and trigger the backend REST API, and get the inventory data display on mobile app

In this example, we going to use Retool as mobile app frontend, and NocoDB as backend.

Pre-requisite check

  • Initial requirement

    Let’s look at how it started, as well as the initial design

  • URL

  • Backend

    This example using NocoDB as backend, which you able to find the previous article here.

  • Platform

    Retool for Mobile App currently is a cloud SAAS (Software as a service) platform, and required to run within Retool mobile app

  • Account

    You can start with 5 users for free. For each user required to login to Retool Mobile App, it required the user license.

  • Programming Required

    You need to know some basic REST API concept, and little JavaScript knowledge.


At the time when this article being published, Retool mobile is still under beta stage. However, due to it excellent UI, almost idiot-proof mobile app low code builder, it will be a sin if I don’t include this tool as 1 of the mobile app low code tool.

Let's get started

Create the mobile app

1. Let’s start by creating a mobile app, we call it “Inventory Scanner”, since the main objective of the mobile app is to scan the QR Code


2. By default, Retool will create some default screen templates, in this case we only need 1 screen, hence just delete the rest of the screens.



3. Let’s start with adding the first component, the greeting label. As an old-school developer myself since Visual Basic 6 era, I like to name it properly to avoid confusion later

I name it “text_greeting”, and put the value as “Hi, please start to scan something”.


4. For 2nd object, that’s the scanner object, which presented in button. When the user click on the button, the app will call up the phone camera to act as scanner.

I name it “scanner_button”, and the put down the label as “Scan”


5. 3rd object, we will be using KeyValue object to display the inventory information.

I name it as “KeyValue_data”; For the Data property, we will need to bind it with a data source later.



6. Lastly, create the last text label, I call it as “text_firstscan_flag”, and make it hidden, and the default value to set as “0”.

You might wondering the purpose of this flag? Let me explain now.

The problem: I am not sure why, but the moment the screen launch, the REST API will get triggered, and caused error message to pop up, as nothing get scanned when the app just launched.

The workaround: Use a flag to tell the app, this is the first time launching, don’t pop up any error message just yet.

The question: Why I don’t use Retool’s temporaly state, unfortunately, it don’t work well on my case, it is just weird, maybe is due to beta stage.


7. There is a default query object being created, I named it as “query_api”, and switch the “Resource” to “RESTQuery (restapi)”

Below are what I configure the REST API setting for the initial test

Action endpoint: The NocoDB endpoint, with a valid row id behind

Headers’ parameters: The “xc-token”, and set the “accept” to “application/json”, so I can get the data return in JSON format.

If you can’t recall how to get these setting, please visit the previous article.


8. Now, for the KeyValue object we created at step 5, let’s set the data source to the “query_api”, which the result returned from this REST API, will be mapped and displayed on the KeyValue object.


9. Once you ready, click on the “Save & Run” button, as we enter the valid Row ID in the endpoint, it should work just fine, and display the result on “KeyValue_data” object.

You will be able to see under the Items section, all the items from the result being display. You can hide some of them, as not all required to display on the mobile app.



11. Now, let’s run the query again, but this time round, replace the valid Row ID of the end point, with below parameter

There are 2 purposes by doing this.
First, to make the REST API return the error (as no product found) for now. You can see the error being mapped to KeyValue_data object as well.
At this moment, just need to make all error items hidden, this type of error is not friendly, and will make the user panic, which will give you more problem later.
Second, this code indicate to get the data from QR Code scanner, and we pass the data as part of the parameter on URL.


12. Now, we already setup the data source, and already making sure that it work with success case, and error case. At this moment, is time to put the “text_firstcan_flag” into actual usage.

The logic is simple:

  • if “text_firstcan_flag” is 0: this is the first time the app is launching, hence any REST API error, is false alarm
  • If “text_firstcan_flag” is 1: Any error at this time, is the real error, please pop up the message to inform the user.

Under the query object, there 2 event handlers, which is Success and Failure handler, we will make use of that to control the “text_firstcan_flag”

Under Success handler:

  • The mobile app already scanned for the first time, and return the data successfully, we can now set the “text_firstcan_flag” to 1
  • After the “text_firstcan_flag” being set to 1, any REST API error is the actual error.



13. For Failure handler, we need to set 2 action, the error message pop up, and the flag setting.

Please take note of the 2 actions’ sequence. Error message pop-up first, and then the flag setting.

Let’s look at the error message pop up.

  • The Action set to “Alert”, this is the same as JavaScript alert command
  • Title set to “Error”, you can enter any title you prefer.
  • Description set to “Invalid product”, nothing fancy but better than the scary REST API error.
  • For the “Actions”, it is actually the button, we only need an “OK” button, hence I removed “Cancel” button.
  • For “Only run when”, this the interesting part, the pop up will only display when “text_firstcan_flag” is 1, meaning if “text_firstcan_flag” is 0, the mobile app will not pop up the error as it is a false alarm. The code is simple:
    {{text_firstscan_flag.value === "1"}}


14. The 2nd action for failure handle is, to set the “text_firstcan_flag” to 1. The reason being, on the first time false alarm, the Failure event handler will be triggered, hence we have to set the “text_firstcan_flag” to 1, to indicate: false alarm is over, next error will be real.


15. When screen is being loaded, is always a good practice to set the “text_firstscan_flag” to 0, in programming term, we call this “initialized” the variable.


16. We have come a long way on REST API and flag setting, this is how the final REST API setup will look like

Test the mobile app

1. To run the mobile app by Retool, you required to download the Retool mobile app, which is available on iOS AppStore, and Google Playstore.


2. When login to the Retool mobile app, you shall see the mobile app you created just now.


3. This will be the first screen of your app, which we built just now.


4. Let’s scan something, start with some valid Row ID. We can login to NocoDB to scan some QR Code.


5. If you are scanning the valid Row ID, you should see something below.


6. Let’s try some invalid QR Code, we can create some QR Code by using QR Code Generator. There are ton of free online tools out there, I am using this.

7. As this is an invalid QR Code which will not return any product, hence you shall see the below.


8. We actually just completed a simple Inventory Management System for backend, and mobile app frontend with low code! How cool is that?

The functions we completed are

  • Storing inventory information
  • Generate QR Code automatically
  • Setup REST API from backend
  • Create a mobile app for sales personnel to scan, and get the information via REST API


Mobile app built with Retool required Retool mobile app to run as host. It is not yet suitable to built a mobile app for public and publish on iOS AppStore or Google Playstore, at least not yet. In any case, it is still a great internal tool, and 1 of the easiest low code mobile app builder I ever tried.
Please take note, at this moment (when this article being published), the Retool mobile app is still under beta stage.

Let’s walkthrough again

Leave a Reply

Your email address will not be published. Required fields are marked *

SeaTable: Simple Inventory Management System with QR Code workaround

SeaTable: Simple Inventory Management System with QR Code workaround

With SeaTable low code solution, you can build a simple inventory management

Retool x SeaTable: Mobile App for Inventory Management System with Low Code

Retool x SeaTable: Mobile App for Inventory Management System with Low Code

To complete the entire cycle of the Inventory Management System with QR Code