Table of Contents

Basic Blocks

Basic blocks are the fundamental building blocks of XMPro applications. They provide essential functionality for user input, data display, and interaction. These blocks are the most commonly used components in application development.

Available Basic Blocks

  • Calendar - Date selection and calendar display component
  • Check Box - Toggle control for boolean values
  • Color Selector - Component for selecting colors
  • Data Grid - Tabular data display with sorting, filtering, and editing capabilities
  • Date Selector - Component for selecting dates
  • Dropdown Grid - Dropdown component with grid-based selection
  • Embedded Page - Component for embedding other pages within a page
  • File Library - Component for managing and displaying files
  • File Uploader - Component for uploading files
  • Html Editor - Rich text editor for HTML content
  • Image - Component for displaying images
  • Indicator - Visual indicator for status or state
  • List - Component for displaying lists of items
  • Lookup - Component for looking up values from a data source
  • Number Selector - Component for selecting numeric values
  • Radio Buttons - Selection control for choosing one option from a set
  • Range Slider - Component for selecting a value from a range
  • Select Box - Dropdown selection component
  • Switch - Toggle switch for boolean values
  • Tags - Component for displaying and managing tags
  • Text - Component for displaying text
  • Text Area - Multi-line text input component
  • Textbox - Single-line text input component
  • Tree Grid - Hierarchical data display with grid capabilities
  • Tree List - Hierarchical list component

Best Practices for Using Basic Blocks

  1. Choose the right input type: Select the appropriate input block based on the type of data you're collecting. For example, use a Date Selector for dates, a Number Selector for numbers, and a Select Box for selecting from a predefined list of options.

  2. Provide clear labels: Always include clear labels for input blocks to help users understand what information is being requested.

  3. Use validation: Implement validation on input blocks to ensure that users provide valid data. This can prevent errors and improve the user experience.

  4. Consider accessibility: Ensure that your application is accessible to all users by providing appropriate ARIA labels, ensuring keyboard navigation works correctly, and maintaining sufficient color contrast.

  5. Optimize for performance: Be mindful of the number of blocks you use, especially data-intensive blocks like Data Grid and Tree Grid, as they can impact performance.

  6. Use consistent styling: Maintain consistent styling across your application to provide a cohesive user experience.

  7. Implement responsive design: Ensure that your application works well on different screen sizes by using responsive design techniques.

Examples

Form with Various Input Types

Box (Form Container)
├── Field (Name)
│   ├── Textbox
├── Field (Email)
│   ├── Textbox (with email validation)
├── Field (Date of Birth)
│   ├── Date Selector
├── Field (Gender)
│   ├── Radio Buttons
│       ├── Option (Male)
│       ├── Option (Female)
│       ├── Option (Other)
├── Field (Interests)
│   ├── Tags
├── Field (Comments)
│   ├── Text Area
├── Box (Buttons)
│   ├── Button (Submit)
│   ├── Button (Cancel)

Data Display

Box (Data Display Container)
├── Data Grid
│   ├── Column (ID)
│   ├── Column (Name)
│   ├── Column (Email)
│   ├── Column (Status)
│   │   ├── Indicator
│   ├── Column (Actions)
│   │   ├── Button (Edit)
│   │   ├── Button (Delete)

Search and Filter

Box (Search Container)
├── Field (Search)
│   ├── Textbox
│   ├── Button (Search)
├── Field (Category)
│   ├── Select Box
├── Field (Date Range)
│   ├── Date Selector (From)
│   ├── Date Selector (To)
├── Field (Price Range)
│   ├── Range Slider

By effectively using basic blocks, you can create intuitive, functional, and user-friendly applications that meet your users' needs.