Clappia App Designer Components Overview

The App Designer is the core of the platform that enables users to design and configure the modules they need for their app. It is where you build your app, where you add the fields, buttons, and sections your users will see and interact with.

Getting Started

Add an App

To get to the app designer, you need to add an app first. Go to your dashboard by visiting your Workplace (for example, <yourcompany>.clappia.com) and click on the "New App" button.

‍

You should land on the App Designer screen (called Design App). You can name your app accordingly.

‍

Components of the App Designer

Designer Area

This is the area in which you need to add your modules. What you see here is roughly what your end users will see when they open the finished app, so use it as a live preview while you build.

‍

Section

A section is a container that groups related modules together, for example, all the fields for "Customer Details" in one section and "Order Details" in another. Sections also let you apply rules (like show/hide logic) to several modules at once and make the app easier for users to scan.

Click on 'Add Section' to add it to your app.

‍

Right Panel

The right panel is the settings area for whatever you've clicked on such as a section or a field. Select a section or a field in the designer area, and its options (such as the label, description, visibility rules, etc.) appear here for you to edit.

‍

You can also duplicate or remove a module from the right panel using the Clone and Delete options.

‍

New Section Buttons

Any new section can be added by clicking on the "Add Section" buttons.

‍

‍

Fields

When you create a new section, it starts out empty. Click on the 'Add Field' button to add fields in a section.

‍

Field Selector

When you click any + button, a popup opens showing all the module types you can add such as text fields, dropdowns, date pickers, file uploads, buttons, and more. Click on the one you need and it gets added to the section.

‍

Field Variables

Every time you configure a module, a variable name is automatically generated. It is a short ID that you can use in formulas and rules elsewhere in your app. It works just like an Excel cell reference: lets say you added a Calculation block for adding two numbers that are captured in two different fields. While setting it up on the right panel, in the formula option you use their variable names, the same way you'd write =A1+B1 in a spreadsheet. It would be {field_1}+{field_2}.

You can also type @ to pull up field variables when setting up the right panel.

‍

Changing Module Types

Once you have selected a module, you can always change the type of module later if you need. For example, changing from Single Selector to Dropdown, Single-line text to Multi-line text etc.

‍

Select the new module type, then click Update.

‍

The module will then change to the selected type.

Not every module has the option to be changed and some modules can be switched to only a few other modules. Any configurations made to the previous module will go away once changed, only the label and variable name will remain. Use the undo option at the top of the screen to get back the original module with configurations.

Page Break

A page break splits a long app into multiple pages, so users fill it out step by step instead of scrolling through one giant form. Each page gets Next and Back buttons automatically, and you can use page breaks to group related sections — like "Personal Info" on page 1, "Address" on page 2, and "Review" on page 3. Helpful for keeping mobile users from feeling overwhelmed and for guiding people through a clear flow.

Submit / Save Draft / Discard Draft Buttons

These are the action buttons that appear at the bottom of your app for end users. Click on that area to open its right panel.

You can rename these buttons, hide them, or control who sees them from the right panel — for example, hiding Save Draft in a simple app where drafts aren't needed, or renaming Submit to something more specific like "Place Order" or "Send for Approval." You can also set it up to redirect users after submission.