Skip to main content

Understanding views

Views are the pages and screens in your application. When you describe what you want to see, Gainable creates views that display your data and allow interaction.

Types of views

List views

Display multiple items in a table or card layout.
Features typically included:
  • Column headers or card titles
  • Sorting options
  • Pagination for large lists
  • Click to view/edit details

Detail views

Show all information for a single item.
Features typically included:
  • All fields displayed
  • Edit functionality
  • Related items (if applicable)
  • Delete option

Dashboard views

Overview of data with summaries and charts.
Features typically included:
  • KPI cards with totals
  • Charts and graphs
  • Recent activity
  • Quick actions

Kanban views

Cards organized in columns for workflow management.
Features typically included:
  • Drag-and-drop between columns
  • Card summaries
  • Column totals
  • Quick edit

UI components

Gainable uses a variety of components to build your interfaces:

Cards

Compact display of item information.

Tables

Structured rows and columns for data.

Forms

Input fields for creating and editing data.

Modals and drawers

Overlay panels for focused interactions.

Filters

Narrow down displayed data.

Charts

Visual data representation.

Responsive design

All Gainable views are automatically responsive:
  • Desktop: Full layout with sidebars and multi-column grids
  • Tablet: Adapted layout with collapsible elements
  • Mobile: Single-column layout with touch-friendly controls
You don’t need to specify this - it’s built in. Gainable creates navigation between views automatically:
  • Header navigation for main pages
  • Breadcrumbs for hierarchical navigation
  • Links between related items
  • Back buttons for returning to lists

Requesting specific navigation

Customizing views

Layout requests

Placement requests

Display requests

View-specific tips

For dashboards

  • Request specific KPIs: “Show total revenue, deal count, and average deal size”
  • Name your charts: “Pie chart showing deals by status”
  • Include recent activity: “List of last 10 deals created”
  • Add quick actions: “Button to create new deal”

For lists

  • Specify columns: “Show name, email, company, and status”
  • Request sorting: “Sort by created date, newest first”
  • Add filters: “Filter by status and date range”
  • Enable search: “Search by name or email”

For kanban boards

  • Define columns: “Columns: Backlog, In Progress, Review, Done”
  • Specify card content: “Cards show title, assignee, and due date”
  • Request column totals: “Show count in each column header”
  • Enable drag-and-drop: “Drag tasks between columns”

Themes and styling

Gainable apps use themes for consistent styling:
Available themes include: light, dark, cupcake, corporate, retro, cyberpunk, and more.

Design customization

Learn more about themes and styling

Learn more

Real-time updates

Live data synchronization

Collaboration

Chat, files, and comments