After preparing the tables that hold the data for your application and defining the roles and access permissions for your users, it is time to design how you want the different pages in your application to look. Caspio App Designer represents webpages in your application with DataPages. Each DataPage shows different content of your application. 

With your DataPages in place, you can start filling them with content on the canvas. Every new DataPage is empty and contains only the standard elements that are defined in the template for a given segment. To add content to your DataPages, you use DataParts, which are objects that pull data from your data sources (tables, views, and so on). You can use different Data Parts to meet your various needs to view, filter, edit, or remove the source data:  

  • Charts
    • Area Chart
    • Bar Chart
    • Column Chart
    • Combination Chart
    • Line Chart
  • Forms 
    • Details/Update Form 
    • Search Form 
    • Submission Form  
  • Reports
    • Card Report  
    • Pivot Report
    • Tabular Report  
  • Text/HTML
  • User management forms
    • Sign-up Form
The following image shows a sample DataPage with two DataParts – a Search Form and a Card Report:
 
App Designer view showing a sample DataPage with two DataParts.
 

App Designer Canvas

After adding an element on a DataPage, you can adjust the display of that DataPart to present the content the way you want and to create the best user experience possible. With the intuitive drag-and-drop App Designer interface, you can easily adjust the layout of your DataPages and immediately verify the results.  

On the canvas, your DataPage is divided into 12 columns to which all the elements are aligned. The column width and default DataPart size depends on the size of your screen on which you display the application: 

  • Desktop computers – 12 columns 
  • Tablets – 8 columns 
  • Mobile phones – 4 columns 

Note: The ability to view DataPages and to modify the source data that different DataParts pull depends on the access permissions that you define in user roles. 

Learn how to design your application in App Designer by adding DataPages and filling them with DataParts: