How to Add and Configure an App in Clappia

This guide walks through creating a new app in Clappia and configuring its form to capture the data you need. You will learn how to add an app from your workplace dashboard, organise it into sections, and add modules such as text inputs, dropdowns, date and time selectors, file uploads, GPS location, and formulas.

For the walkthrough, we will use a Visit Report App as the example: an app designer wants to build a form that field employees can use to log their site visits.

Add an App

Go to your dashboard by visiting your Workplace (<yourcompany>.clappia.com) and click the “New App” button.

You will be taken to the ‘Design App’ where you can create the app interface.

Configure an App

We recommend going through the App designer components in this link before proceeding to the next part.

‍

Add a section

A section wraps a group of software modules or blocks. Click Add Section, then name and configure it from the right panel. The section will contain the different blocks to capture information.

Configure relevant modules

Click on the + buttons or click on 'Add field' to add new blocks (customer name, address, etc.) and configure them from the right panel.

Here are the modules available in the module popup:

1. Single Line Text: This is used to collect data that may have one line answers like names, emails, numbers, websites, city, etc.
2. Multi-line Text: This is used to collect data that can have multiple lines like address, notes, comments, observations, descriptions, etc.
3. Drop down: This is used to give your end-users an option to select one item from a pre-defined list of items. two drop downs can be nested as well. For example, you can give a list of countries in the first drop down and the second drop down can have a list of cities only from the selected country.
4. Single Selector: This is very similar to the drop down above but preferred in cases where you want all selectable items visible to the end-users. This doesn't have the nested feature like a Drop down.
5. Multiple Selector: This is used where there are multiple items to select.
6. Date Selector: This is used to provide an option of date selector for the end-user.
7. Time Selector: This is used to provide an option of time selector for the end-user.
8. Camera, Image & Files: Add this block to achieve a use case in which the end-users need to upload files (image, videos or documents) or open the phone camera directly to capture an image.
9. GPS Location: Add this block if you want your end-users to input a GPS location. You can also configure it in a way that the end-users can't modify their exact GPS location.
10. Calculations & Logic: This is one of the most powerful modules. You can use it to add calculations and logic using the formula syntax of Excel. It is very similar to the Excel formula bar but uses the module reference number in place of the Excel cell reference.
11. Unique Numbering:  Using this block, you can have a unique, incremental and patterned reference id for each submission in your app. This is used for generating invoice numbers, work order numbers, customer reference ids, etc.
12. GET Data from other Apps: You may have multiple apps in your Workplace. You can use this block to pull data from any other app into the current app. For example, you can have a separate customer master and let the user search the customer by name and then pull all other details against that name.
13. Text, HTML & Embedding: This is used when you have read-only texts to be displayed (like instructions), embed images and videos from external sources, embed another Clappia app into the current app, etc.
14. Attached files: This is different from the Camera, Image & Files module mentioned in point number 8. This is used to attach a file for the reference of the end-users. These files will be available to them whenever they open an app. This is used when you have instructions and guides for the end-users.
15. Validation: This is used to check for duplicate entries before creating a submission or check for custom validation and display an appropriate message.
16. Rich Text Editor: This is used to collect formatted text from end-users, with styling options like bold, italics, headings, lists, and links. Useful for longer descriptions or notes that need formatting.
17. Number Input: This is used to collect numeric data such as quantities, prices, or measurements. The value can be used directly in formulas and calculations.
18. URL Input: This is used to collect a web link from the end-user, with built-in validation to ensure the value entered is a valid URL.
19. Email Input: This is used to collect an email address from the end-user, with built-in validation to ensure the value entered is a valid email.
20. Tags: This is used to let end-users add multiple short labels or keywords to a submission, such as topics, categories, or skills.
21. Code Scanner: This is used to scan barcodes and QR codes using the device camera. Useful for inventory, asset tracking, ticket validation, etc.
22. NFC Reader: This is used to read data from NFC tags by tapping the device against the tag. Useful for asset tracking, access control, and inspections.
23. Ratings: This is used to collect a rating from the end-user on a star or numeric scale. Useful for feedback forms, evaluations, and reviews.
24. Toggle: This is used to collect a simple yes/no or on/off value from the end-user with a single tap.
25. Counter: This is used to let end-users increment or decrement a number using plus and minus buttons instead of typing. Useful for quick counts like attendance or stock checks.
26. Slider: This is used to let end-users select a numeric value from a defined range by dragging a slider.
27. Phone Number: This is used to collect a phone number from the end-user, with country code support and built-in validation.
28. Address: This is used to collect an address from the end-user, broken into components like street, city, state, postal code, and country.
29. Geo-Address: This is used to capture the end-user's current physical address based on their GPS location.
30. Payment Gateway: This is used to accept payments from end-users within the app through a connected payment provider.
31. Audio: This is used to record an audio clip using the device microphone or upload an existing audio file. Useful for voice notes or recorded observations.
32. Live Tracking: This is used to track the end-user's location continuously over time, such as for a delivery route or field visit path.
33. Signature: This is used to capture a handwritten signature from the end-user by drawing on the screen. Useful for delivery confirmations, approvals, and consent forms.
34. GET Data from Google Sheets: This is used to fetch data from a connected Google Sheet into the current app, similar to the GET Data from other Apps block but using Sheets as the source.
35. Get Data from Microsoft Excel: This is used to fetch data from a connected Microsoft Excel file into the current app.
36. GET Data from REST APIs: This is used to fetch data from an external service through its REST API, allowing external systems to feed values into the form.
37. Get Data from Database: This is used to fetch live data from a connected external database (such as MySQL, PostgreSQL, SQL Server, or Airtable) into the current app.
38. AI: This is used to set up an instruction for the AI to act on within your app. Use cases include retrieving current data from an external source, analyzing uploaded images, performing calculations or reasoning, and generating output based on the input the user provides.
39. Image Viewer: This is used to display a static image inside the app for end-users to view. Useful for reference photos, illustrations, or product images.
40. Video Viewer: This is used to display a video inside the app for end-users to watch. Useful for training videos, demos, or instructional content.
41. PDF Viewer: This is used to display a PDF document inside the app for end-users to view. Useful for sharing manuals, policies, or reference documents.
42. Progress Bar: This is used to display a visual progress indicator within the app, such as a completion percentage or status.
43. Button: This is used to add a button to the form that can navigate the end-user to other Clappia apps within the workplace (Home, Submissions, or Analytics tab) or to external sites. It also supports a Timer option that delays the button's action by a set duration or until a specific date and time.
44. Code: This is used to write custom JavaScript inside the app for advanced logic, calculations, dynamic data processing, and API integrations beyond what standard blocks provide. The output values from the code can be referenced in other blocks like Calculations & Logic.

Next: Add Workflows