Low Code UI App

Building a low code Peach app is great when you want to:

In both these cases, you would want to load data from your systems and present them to the user. Such apps also require validations, and need fine-grained control on the screen the user is taken to, based on the data captured or already available in your systems. Let's dive in to learn building such an app on Peach.



Peach requires you to build the screens first on our editor. Add screens and components to your screens to group fields and information in logical groups. Once you have finalized the screens, you can add a backend URL and start adding validations, changing screen transitions or simply end the execution of an app. The following diagram illustrates a lifecycle of developing an app.



Architecture

Think of Peach apps as an extension to WhatsApp Flows. WhatsApp Flows provide APIs to build UI extensions within the chat window. Peach leverages this and allows you to quickly build user journeys using little to no-code, based on your requirements.



Runtime



Reference

Create a new low code app from your Peach dashboard. You should see a UI editor loading on your screen. This is where you'll be building the components for your WhatsApp app's UI. Create one or more screens and add components to them to complete the UI.

All form components like text fields or checkboxes have a field name. You can find this on the right sidebar, in the advanced section, when you click on an element on the main section. The field names are just like the field names in HTML forms, and the payload to your backend URL will include this name against the value entered or selected by your users.

You can add simple validations directly from the editor. This includes validations like length of text for input elements, restricting date users to select only future or past dates etc. You can add custom validations from your backend URL.

Validations can be added either at a screen level or field level, for supported components (at the moment, only text, number, email and phone number fields).

Register a backend URL for your app from the develop tab in the app editor. Once you have done that, Peach will hit this endpoint when a user does any of these actions on the app UI:

The request from Peach will be of the following format:

Peach expects your backend URL to return a response with details on how the app should function. A sample response expected by Peach would be in the following format:

Typically, your response defines on or more of the following: action, validations or ending execution.

Define if the user should be navigated to a screen, or if the app execution should end.

Suppose you are building an expense submission flow, and you'd like your users to provide additional details, only if they have chosen a specific category. You can check for the category in your backend when the user submits a screen, and if you require the user to provide additional details, you can transition them to a screen that includes fields for the same. If this is not required, you can just end the app execution.

You can control the actions by using one of the following values for the action key in your response:

Input Components

In your response to a Peach app request, you can optionally include one or more attributes in the data section of the json response. If a key in data corresponds to a field name on the screen you are navigating your users to, then Peach will automatically bind the UI with these values. The value for this attribute can be a string, integer or timestamp. It can also be an object, if you'd like to include validation errors or hide or show a component.

Text & Labels

Peach allows you to use dynamic data in your display components like text body, caption or headings. This is supported by allowing you to enter liquid placeholders for these components from the UI. Peach will replace these placeholders from the data attributes in your response.

For example, suppose your UI includes a Caption component, and you'd like to replace the text for this dynamically from your data. Suppose your response includes this as a data attribute like below:

Update the caption's text to the following:

When the screen is rendered, your users will see Lazyman for this caption.

Input Fields

For example, suppose your UI includes 2 fields on a screen - name and city. If your response includes this section:

Peach will automatically display the values for name and city fields. If the city field is a list or a radio/checkbox field, then a value will be selected that has the id set as Bangalore.

Validate data entered by your users based on your business logic. You can add validations either for specific input fields or at a screen level.

Suppose you have a screen with an input field for postal_code. Let's say you'd like to check if the user resides in a postal code that you serve. If you find that the user is outside your service zone, you can add a validation error like below:

You might want to show or display fields conditionally. This can be achieved by including visible attribute against the field name in your payload data.

Suppose you have a screen called with an input field for postal_code. Let's say you'd like to hide this field if your user selected US as their country of residence. You can do this by including this in the data section of your payload:

You might want to make some fields as required or optional conditionally. This can be achieved by including required attribute against the field name in your payload data.

Suppose you have a screen called with an input field for postal_code. Let's say you'd like to make this field mandatory if your user selected US as their country of residence. You can do this by including this in the data section of your payload:

A detailed spec for the request from Peach and the expected response from your servers is available here.

When developing a low-code app, it is much faster to build your backend URL on localhost before deploying and testing your app. To do this, we recommend that you use a service like Ngrok or LocalTunnel to set up a proxy for your localhost server. Copy the proxy url to the Backend URL on Peach, now all the requests will be forwarded to your server running locally.

From the app editor on Peach, click on the Test button to bring up a QR code. Scan this code on your phone, this will launch WhatsApp with a pre-filled command. When you hit send, a message will show up that will include a button to launch your app.

You should be able to see the logs of all the requests and responses between Peach and your server with complete payload.



If you need any help, don't hesitate to reach out to us. Our contact info is available here.