Low Code UI App

building a low code peach app is great when you want to extend your native or web based app's functionality into whatsapp, or build and launch workflows for your customers, employees or vendors, directly on whatsapp 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 development lifecycle 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 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 a call is made to the backend, that the user is launching the app backend url initializes the session and returns any data that the flow requires screen transitions, dropdown/radio/checkbox selections can optionally trigger a call to backend url optionally, backend url updates/fetches data from your systems the data returned from backend url is used to update ui this continues for as many screens/interactions you have configured optional calls to your apis when the journey is complete, backend url ends the flow, and whatsapp closes the app ui building app ui 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 field names 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 validations 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) backend url 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 launches your app navigates to a new screen makes a selection for any date field (when enabled) makes a selection for any radio, checkbox or list components (when enabled) request and response specs the request from peach will be of the following format request from peach { "type" "app execution init", "request" { "id" "fe ap6k3e4wvyoecew8n2mldlo1", "contact" { "id" 5297, "account id" 13363, "name" "john doe", "phone number" "+17757068471", "first name" "john", "last name" "doe", "country code" "1", "language" "en", "email" "johndoe1\@example com" }, "app" { "id" "flw 6abwtyvlr3sdhw3ojnm421ezx", "name" "flow 1", "status" "draft", "category" "other", "description" "this is a demo app" }, "params" { "key1" "value1", "key2" 2123 }, "context" {} } } 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 expected response { "action" "navigate", "screen" "screen key", "data" { "name" { "value" "j", "visible" true, "required" false, "error message" "is too short, should be at least 3 characters" }, "city" "bangalore", "error message" "errors on screen" }, "context" { "foo" "bar", "object" { "id" 123, "name" "blah" } } } typically, your response defines on or more of the following action, validations or ending execution action 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 navigate if you'd like to keep the app still running use the screen name attribute to define which screen the user navigates to (you can keep the user on the same screen too) end if you'd like to end the app execution, use this value, and the flow will end for the user dynamic data 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 "data" { "superhero" { "name" "lazyman", "superpower" "can sit on the couch forever!" } } update the caption's text to the following {{superhero name}} 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 response snippet "data" { "name" "superman", "city" "bangalore" } 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 list fields if list fields need to be populated dynamically, you can construct your response to include a list of items that peach will use to populate that field on the ui for example, suppose your ui includes a field called plan where the user can choose from a set of pricing plans if your response includes this section "data" { "plan" \[ { "id" "enterprise", "title" "enterprise plan", "description" "best for large organisations", "metadata" "custom pricing" }, { "id" "basic", "title" "basic plan", "description" "best for small teams", "metadata" "₹10,000 / month" }, { "id" "pay as you go", "title" "pay as you go plan", "description" "no monthly commitment start exploring ", "metadata" "₹0 / month" } ] } then peach will render the tier field as a selectable list containing the three options provided each option will display the title , description , and metadata values to help users understand the differences between plans ⚠️ make sure that the id for each item is unique within the list, as it is used internally to track selections validations 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 validations "postal code" { "value" "560034", "error message" "is too far and out of our service area " } visibility 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 visibility "postal code" { "visible" false, } required/optional 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 json "postal code" { "required" true, } request/response schema specs a detailed spec for the request from peach and the expected response from your servers is available here local development 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 testing 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 getting help if you need any help, don't hesitate to reach out to us our contact info is contact us docid\ a0y9ksjglttsakngk52ny