Application Building Blocks

The RASP Designer allows users to easily bootstrap a new application using a guided visual interface. This section walks through the creation of a sample application — “Travel App”

Creating a New Application

Overview:

After logging into the platform, users are presented with a dashboard showing existing apps. You can create a new application from here and move directly into designing it using the visual builder.

Process:

• Navigate to the Dashboard after login.
• Enter the desired app name (e.g., Travel App) and confirm.
• Click "Create App".
• You’ll be redirected to the Layout tab of the Designer to begin structuring your app.
• Other tabs like Data, user and Layout are also available for building the app holistically.

Fig-2: - Dashboard

Creating Resources (CRUD)

Overview:
Resources are the foundational data models that define the structure of your application's backend entities. This section allows you to configure these models, defined field

1. How to Define Models

Navigate to the Data tab in the top navigation bar.

• Click on “Add Resource” (+ icon) to begin creating a new model (e.g., Trip, Booking, User).
• Provide a resource name, which acts as the entity's identifier across the system.
• You can also edit the defined fields of the resource by clicking on “edit icon” of respective resource
• To delete the defined resource, click on "delete icon” of respective resource.

Fig-3: - Adding Resource

2. Adding Fields

• After entering resource name, click “Add” button to define a fields for the defined resource.
• Provide a field name, which becomes an attribute in the database.
• Choose whether this field is required or optional.
• After entering the fields, click on “+” icon to add on.
• You can add multiple fields representing different attributes of the resource.

Fig-4: - Adding Resource fields

3. Setting Field Types and Validations

• Each field can be assigned a data type (e.g., string, long, Boolean, date).
• Configure validation rules such as:
  • Required
  • Is Enum
  • Have foreign field
• These validations ensure data integrity both at the front end and backend.
• By clicking “save” button the resource is saved to database.

Fig-5: - Setting fields

4. Adding Pages

• Pages can be managed from the Layout tab using the Pages dropdown.
• Initially “page 1” is the current page.
• Click “Add New Page” to create a new page.
  • Pages are automatically named in sequential order (e.g., Page 2, Page 3, etc.).
  • The newly added page becomes the currently selected one.
• The Pages dropdown allows users to:
  • View all created pages.
  • Select a page to switch to and design on.
  • Rename individual pages.
• Each page listed in the dropdown includes an edit icon.
  • Clicking the icon allows the user to rename the page.
  • After Renaming, click on “Set and Save” button. It saves the application with the renamed page.
• The Actions dropdown in the Layout tab includes a Save option.
• On clicking “Save” the application with all pages are save to database.
• This functionality enables multi-page design support and ensures all page-specific configurations are preserved.

Fig-6: - Adding pages, renaming page and Actions to save/download

5. Using Drag-and-Drop Components

• UI components can be added to pages via a drag-and-drop interface.
• Commonly available components include:
  • Text Fields
  • Dropdowns
  • Tables
  • Buttons
  • Containers
  • Date Pickers
  • Checkboxes and more
• Components are listed in the Components Panel on the left side of the layout.

Fig-7: - Component List

Adding Components

• To add a component:
  • Drag the desired component from the panel.
  • Drop it onto the active canvas.
• Once a component is dropped. It becomes part of the current page layout.

Fig-8: - Adding components

Editing Components

• When a component is selected on canvas the Edit Panel appears on the right side.
• The Edit Panel allows:
  • Setting or editing labels.
  • Deleting the component.
  • Applying custom styles using:
    • Bootstrap classes
    • Custom CSS properties
• This enables visual customization directly within the UI.

Fig-9: - Editing the component

Removing Components

• To remove a component:
• Select it on the canvas.
• Use the delete option in the Edit Panel.
• The design updates instantly after removal.

Fig-10: - Deleting Component

6. Setting Component Properties

Each component on the canvas can be customized through the Edit Panel, which appears on the right side when a component is selected.

The Edit Panel provides access to essential configuration options that control the component’s content, appearance, and behaviour.

Available Configuration Options:

Custom Component

• Select the component and enter the name of the custom component.
• This component can be reusable to drag from component panel and drop to canvas

Bootstrap Styling

• Apply predefined Bootstrap classes for quick and consistent styling.
• Supports classes like btn-primary, form-control, text-center, etc.

CSS Styling

• Enter custom CSS styles (e.g., color: red; font-size: 16px) for fine-grained visual control.
• Can be used alongside or independently of Bootstrap.

Editable Properties

• Modify content-related attributes based on the component type, such as:
  • Text (e.g., button label)
  • Placeholder (e.g., input hints)

Component-Specific Options

• For components like Dropdowns and Navbars, additional features are available:
  • Add Items: Insert options or menu items dynamically
  • Edit Items: Modify existing entries
  • Remove Items: Delete entries as needed

Delete Component

• Removes the selected component from the canvas entirely.
• Ensures quick cleanup of unnecessary or misplaced elements.

Fig-11: - Editable properties

7. Using CRUD on resources in UI

• Binding UI to backend resources

The platform enables seamless integration of backend data resources into the UI through drag-and-drop, allowing users to configure Create, Read, and Update operations directly within the layout builder.

Resource Components in the UI

• In the Layout tab, the left panel includes a "Resources" dropdown under the components list (alongside Text, Placeholder, Button, etc.).
• This dropdown displays the list of resources previously created in the Data tab.
• To use a resource:
  • Drag the desired resource onto the canvas like any other component.

Fig-12: - Resource Components in the UI

Configuring CRUD Operations

• Once a resource component is added to the canvas and selected:
• The Edit Panel appears on the right.
• A dropdown inside the panel allows you to choose between:
  • Create – to generate a form for inserting new records.
  • Read – to display existing records from the backend.
  • Update – to allow editing of existing data.
• These options configure how the component will behave with the backend once the app is downloaded.

Fig-13: - Configuring CRUD Operations

• Auto-generating forms from models

When the application is downloaded, the system automatically generates full-fledged forms based on the selected resource and CRUD operation.

Field Mapping

• Each field in the form corresponds to a property in the backend model.
• Data types are respected (e.g., strings generate text inputs, Booleans generate checkboxes, etc.).

Pre-applied Validations

• Validation rules defined in the model (like required, enum, or foreign key references) are automatically reflected in the form UI.
• Prevents invalid input before data reaches the backend.

Consistent Styling

• Forms maintain Bootstrap and CSS styles configured in the Edit Panel.
• Ensures uniform look and feel across all resources and components.
• Supports customization after generation if further refinement is needed.

Ready-to-Use Integration

• Once exported, forms are fully functional and can be deployed as-is.
• No manual coding required to wire forms to backend APIs.

Fig-14: - Auto-generating forms from resources