Actions Blocks

Actions blocks in XMPro App Designer enable user interactions and trigger functionality within your applications. These blocks allow users to navigate between pages, submit forms, execute operations, and interact with data sources.

Available Actions Blocks

Box Hyperlink - A container that acts as a clickable hyperlink
Button - A standard button control for triggering actions
Data Operations - A block for performing operations on data sources
Hyperlink - A text-based hyperlink for navigation

Best Practices for Using Actions Blocks

Use clear and descriptive labels: Ensure that action labels clearly communicate what will happen when the user interacts with them. For example, use "Save" instead of "OK" for a button that saves a form.
Provide visual feedback: Use visual cues to indicate when an action is being processed or has been completed. This helps users understand the status of their interactions.
Consider placement and visibility: Position action blocks where users expect to find them and ensure they are easily visible. Follow standard UI patterns, such as placing primary actions on the right and secondary actions on the left.
Implement appropriate validation: Before executing actions that modify data or navigate away from a page, ensure that appropriate validation is performed to prevent data loss or invalid operations.
Handle errors gracefully: When actions encounter errors, provide clear and helpful error messages that guide users on how to resolve the issue.
Optimize for performance: Actions should be responsive and execute quickly. If an action requires significant processing time, provide feedback to the user and consider using asynchronous processing.
Consider accessibility: Ensure that action blocks are accessible to all users, including those using screen readers or keyboard navigation. Use appropriate ARIA attributes and ensure keyboard focus is managed correctly.

Examples

Form Submission

Box (Form Container)
├── Field (Name)
│   ├── Textbox
├── Field (Email)
│   ├── Textbox
├── Field (Message)
│   ├── Text Area
├── Box (Buttons)
│   ├── Button (Submit)
│   │   ├── On Click (Submit Form)
│   ├── Button (Cancel)
│   │   ├── On Click (Navigate to Home)

Data Grid with Actions

Box (Data Grid Container)
├── Data Grid
│   ├── Column (ID)
│   ├── Column (Name)
│   ├── Column (Email)
│   ├── Column (Actions)
│   │   ├── Button (Edit)
│   │   │   ├── On Click (Navigate to Edit Page)
│   │   ├── Button (Delete)
│   │   │   ├── On Click (Delete Record)
├── Box (Toolbar)
│   ├── Button (Add New)
│   │   ├── On Click (Navigate to Add Page)
│   ├── Button (Refresh)
│   │   ├── On Click (Refresh Data)

Box (Navigation Container)
├── Menu
│   ├── Menu Item (Home)
│   │   ├── Hyperlink (Navigate to Home)
│   ├── Menu Item (Products)
│   │   ├── Hyperlink (Navigate to Products)
│   ├── Menu Item (Services)
│   │   ├── Hyperlink (Navigate to Services)
│   ├── Menu Item (About)
│   │   ├── Hyperlink (Navigate to About)
│   ├── Menu Item (Contact)
│   │   ├── Hyperlink (Navigate to Contact)

Dashboard with Action Cards

Box (Dashboard Container)
├── Layout Grid
│   ├── Box Hyperlink (Navigate to Sales)
│   │   ├── Card (Sales)
│   │   │   ├── Text (Sales Summary)
│   │   │   ├── Chart (Sales Chart)
│   ├── Box Hyperlink (Navigate to Inventory)
│   │   ├── Card (Inventory)
│   │   │   ├── Text (Inventory Summary)
│   │   │   ├── Chart (Inventory Chart)
│   ├── Box Hyperlink (Navigate to Customers)
│   │   ├── Card (Customers)
│   │   │   ├── Text (Customer Summary)
│   │   │   ├── Chart (Customer Chart)

By effectively using actions blocks, you can create interactive and responsive applications that provide a seamless user experience. These blocks enable users to navigate through your application, interact with data, and trigger functionality that meets their needs.

Table of Contents