LogoLogo
  • Adapptio User Documentation
  • Getting Started
    • Quickstart
    • Architecture Overview
      • Views
      • Actions
      • Integrations
      • API Endpoints
      • Routes
      • Events
      • Assets
    • Editor
      • Main Menu
        • Create New Resources
        • Manage the Application
        • Monitoring Errors
      • Main Toolbar
        • Deploying the Application
        • Opening the Application
        • Preview Mode
        • Error Monitor
      • Components Panel
        • Components
        • Inspector
        • View Settings
      • Outline Panel
        • Data Variables
          • State Variable
          • Data From Action
      • Data Explorer
      • Console
    • Playground
  • Working with Adapptio
    • Best Practices
    • Tutorials
      • 1. Hello World
      • 2. Visualize Data from API
      • 3. Advanced Layout Application
      • 4. Application with In-Memory Database
    • How To
      • Custom Auth
      • Action Logic
        • Transform Node
      • UI Logic
        • Logout
        • Conditional Render
        • One Of
      • Data & Dynamic values
        • Custom Variable
        • Data from Action
        • Dynamic Value
        • Change Value from Event
        • Loading Data from Action to Form
        • Sending Data to Action from a Form
        • Server-side Dropdown Autocompletion
      • Visual
        • Styling Icon Button
      • Layouts
        • Centered Box
        • Header & Sidebar Layout
        • Grid Form Layout
        • Stretched Layout in Row
    • Components
      • Composed Chart
      • Advanced Table
      • Custom Component
    • Examples of Applications
      • SaaS Platforms
      • Customers Portals
      • Information Systems
      • Internal Tools
        • Color Picker
      • IoT Applications
      • Smart Portals
      • Analytics & Calculators
      • Statistics & Monitoring Panels
      • API Data Visualization
      • Simple Games
  • DEPLOYMENT
    • Cloud Hosted
    • Self Hosted
  • REFERENCE GUIDE
    • Components List
      • Application Header
      • Box
      • Container
      • Grid
      • Sidebar Layout
      • View
      • Text Input
      • Number
      • Checkbox
      • Option
      • Date and Time
      • File Upload
    • Properties
      • ACCEPT
      • CUSTOM PLACEHOLDER
      • DESCRIPTION
      • ENABLED
      • FONT SIZE
      • FOREGROUND COLOR
      • FORM DATA KEY
      • HEADERS
      • ICON
      • ID
      • LABEL
      • METHOD
      • MULTIPLE
      • MAX FILE SIZE
      • REQUEST TIMEOUT
      • REQUIRED
      • READ-ONLY
      • SIZE
      • TEXT ALIGNMENT
      • TEXT STYLE
      • URL
      • UPLOAD IMMEDIATELY
      • VALIDATE
      • VALUE
    • Functions
      • Array
      • Date
      • Generators
      • JSON
      • Logic
      • Math
      • Object
      • String
      • Types
      • Util
  • Support
    • Get in touch
    • Release Notes
  • Legal
    • Terms and Conditions
    • GDPR
Powered by GitBook
On this page
  • 1. Creating and Working with a View
  • 2. Views Tabs
  • 3. Screen Resolutions
  • 4. Undo & Redo
  • 5. Toggling the Panels
  • 6. Saving a Current Content
  • 7. View the Options Panel
  • 8. Design & Preview & Debug

Was this helpful?

  1. Getting Started
  2. Architecture Overview

Views

PreviousArchitecture OverviewNextActions

Last updated 2 years ago

Was this helpful?

Views representing the graphical user interface contain as many components as required. Each application can be composed of many different Views, nested or opened as a solo page.

Application is always starting from the View called MainView, and it's mandatory.

1. Creating and Working with a View

In the Main Menu settings, any new or existing View can be created, renamed, duplicated, deleted, exported, or changed in its parent directory.

2. Views Tabs

Switching between opened Views can be done by clicking on its tabs and closing them by clicking on the cross icon.

Any unsaved changes will be lost after closing a tab!

3. Screen Resolutions

Switching between the screen resolution allows displaying proper responsivity on different devices. Each of the resolutions is represented by the pixel value, which can be modified if required.

The Base Screen setting is considered to be a default in herity chain.

4. Undo & Redo

Each of the existing Views has its own undo and redo steps if necessary.

5. Toggling the Panels

Resizing the Canvas Work-field during developing applications, especially on the smaller screens, can take advantage of by switching off the left and right panels by clicking on the toggle buttons.

6. Saving a Current Content

The Save button will save the composition of a current View; meanwhile, Save All button will save all opened tabs, even actions, and integrations.

7. View the Options Panel

The Options Panel allows direct work with a current View, like renaming, moving to different directories, duplicating actual content into a new View, watching revision history, exporting its content to YAML, and deleting the whole View.

The Revision history would be available as soon as possible.

8. Design & Preview & Debug

  1. The Design Mode is the essential part of designing Views. You can drag and drop components into Canvas Work-field and edit their properties.

  2. The Preview Mode is representing the visual output of a current View and active components are fully available.

  3. The Debug Mode shows the current View blueprint that is taking advantage of checking exported code. Any immediate changes are fully responsive.

Application Views