Universal Component

Universal Component

Universal Components are a modern, flexible system for displaying and managing data in your Tadabase applications. They provide pre-built, professionally designed templates that you can easily configure to match your needs.

What Makes It "Universal"?

Universal Components get their name from their flexibility and unified approach. Unlike traditional data components that each work differently, Universal Components use a single, consistent system that can power multiple different component types including Tables, Lists, Details, Cards, Charts, Calendars, and more.

Key Advantages

• Pre-built Templates: Start with professionally designed, ready-to-use components instead of building from scratch
• Consistent Configuration: All component types use the same configuration system, making them easier to learn and use
• Theme Support: Multiple visual themes and color variants included out of the box
• Version Management: Components can be updated with new features while preserving your customizations
• Modular Field System: Flexible field configuration with display rules and visibility controls
• Multi-component Bundles: Some templates include multiple coordinated components (e.g., Table + Detail view)

Available Component Types

Universal Components support a wide variety of data visualization and interaction patterns:

Data Display Components

• Table: Traditional tabular data display with columns, sorting, filtering, and inline editing
• List: Linear list view of records with customizable item layouts
• Card: Card-based grid layout for visually rich record displays
• Detail: Single record display with comprehensive field layouts
• Accordion: Collapsible sections for organized data presentation

Interactive Components

• Kanban: Board/swim lane layout for workflow management
• Calendar: Calendar view for date-based events and scheduling
• Timeline: Chronological event display for project tracking
• Maps: Geographic data visualization with location-based features

Analysis Components

• Chart: Data visualization (Bar, Line, Pie, and more chart types)
• Pivot Table: Cross-tabulation analysis with dynamic grouping and aggregation

Adding a Universal Component to Your Page

Step 1: Open the Component Library

1. Open the page where you want to add a component
2. Click to add a new element to your page
3. Select "Universal Component" from the component type list
4. The Component Library modal will open

Step 2: Browse and Select

The library is organized by categories:

• Tables: Browse table component templates
• Lists: Find list view templates
• Details: Single record display templates
• Cards: Card-based layout templates
• Charts: Data visualization templates
• Calendars: Calendar view templates
• And more...

Each template shows:

• Preview thumbnail
• Component name and description
• Version number
• Multi-component badge (if applicable)

Step 3: Configure the Component

After selecting a template, you'll configure it through a guided wizard:

Data Source Selection

• Select your data table
• The component will display records from this table

Field Mapping

• Map your data fields to the component's display fields
• Choose which fields to show or hide
• Configure field labels and formatting

Display Settings

• Set the number of records per page
• Configure sorting options
• Enable or disable inline editing (for tables)
• Set up drag-and-drop (if supported)

Permissions

• Allow Update: Enable inline editing of records
• Allow Delete: Enable record deletion

Step 4: Customize Appearance

Universal Components offer extensive customization:

• Choose colors and icons
• Adjust column widths (for tables)
• Select theme variants
• Configure visual styling

Component Configuration System

Tabs, Sections, and Fields

Universal Components use a hierarchical configuration structure:

Field Types

Components support over 60 different field types for configuration:

Basic Input Fields

• Text, Email, Phone
• Number, Currency
• Date, Date-Time, Time
• Long Text, Rich Text
• Name (First/Middle/Last)
• Address

Selection Fields

• Select (single choice dropdown)
• Multi-Select
• Radio buttons
• Checkboxes
• Switch toggles
• Slider controls

Advanced Configuration Fields

• Field Selection: Choose fields from your data table
• Filter Group: Build complex filter queries
• Sort Field: Configure column sorting
• Color Picker: Select colors with palette
• Icon Picker: Choose from icon library
• Pipe Group: Chain data transformation operations
• Page Selection: Link to other pages
• Export Template: Configure export options

Display Rules

Control when sections and fields are visible using JavaScript expressions:

Section Visibility

Users can toggle section visibility:

• Sections marked with "Allow Visibility" can be shown/hidden by users
• Visibility preferences are saved per user
• Independent of display rules

Multi-Component Bundles

Some Universal Components come as bundles with multiple coordinated components. For example:

Table + Detail Bundle

• Table Component: Shows a list of all records
• Detail Component: Shows full details when a record is selected
• Automatically linked and coordinated
• Clicking a table row opens the detail view

Version Management

Component Versions

Universal Components include built-in version tracking:

• Each component has a version number (e.g., "1.0.0", "1.2.0")
• Updates are released with new features or improvements
• You'll be notified when updates are available
• Updates include detailed change notes

Applying Updates

When an update is available:

1. You'll see an "Update Available" notification
2. Review the update notes to see what's changed
3. Click "Apply Update" to update the component
4. Your customizations are preserved where possible
5. Or skip the update if you prefer to keep the current version

Revert to Original

If you've customized a component and want to start fresh:

• Use the "Revert to Original" option
• This replaces your customized version with the original template
• Warning: All your customizations will be lost

Theme Customization

Component-Level Themes

Each component type can have multiple theme variants:

• Minimal
• Modern
• Classic
• Material
• Bold
• And more...

Form Themes

Detail and form components support specialized form themes:

• Controls the visual appearance of form fields
• Consistent styling across your application
• Can be set per component or at the app level

Custom CSS

Advanced users can add custom CSS:

• Component CSS: Styles applied when the component is rendered
• Builder CSS: Styles applied in the page builder preview
• Allows for complete visual customization

Special Component Features

Inline Editing (Tables)

Table components support inline editing:

• Edit records directly in the table
• Requires "Allow Update" permission
• Field validation rules are enforced
• Changes save automatically

Drag and Drop (Tables, Kanban)

Reorder records by dragging:

• Enable "Allow Drag Drop" in settings
• Drag rows or cards to reorder
• Sort order is saved automatically
• Great for priority lists and task boards

Calendar Features

Calendar components include:

• Month, week, and day views
• Date range selection
• First day of week configuration
• Event colors and categories
• Drag to reschedule events

Chart Features

Chart components offer:

• Multiple chart types (Bar, Line, Pie, Doughnut, Area, etc.)
• Series data mapping
• Aggregation functions (Sum, Average, Count, etc.)
• Group field configuration
• Interactive legends and tooltips

Search Integration

Universal Components integrate with search components:

• Listen for search events from Search/Enterprise Search components
• Filter data based on search criteria
• onlyLoadAfterSearch: Setting to lazy load data only after a search is performed
• Cross-component communication via unique page and object IDs

Responsive Design

Preview Modes

While configuring components, preview how they look on different devices:

• Desktop: Full-size display
• Tablet: Medium screen layout
• Mobile: Small screen optimized

Screen Modes

See how components render with and without data:

• Records Mode: Shows component with sample data
• No Records Mode: Shows empty state display

Best Practices

Choosing the Right Component

• Tables: Best for data that needs sorting, filtering, and bulk editing
• Lists: Good for simple record browsing and mobile interfaces
• Cards: Perfect for visual content like products, team members, or portfolios
• Details: Use for comprehensive single-record views
• Kanban: Ideal for workflow and status-based management
• Calendar: Essential for scheduling and event management
• Charts: Great for data analysis and dashboards

Configuration Tips

• Start with templates: Don't reinvent the wheel - use pre-built templates as your starting point
• Test with real data: Always test components with your actual data before finalizing
• Use display rules: Hide unnecessary fields with display rules instead of removing them
• Enable search integration: Pair data components with search for powerful filtering
• Consider mobile: Test responsive layouts on different screen sizes

Differences from Standard Data Components

Feature	Standard Components	Universal Components
Setup	Build from scratch	Start with pre-built templates
Configuration	Component-specific	Unified configuration system
Themes	Limited or none	Multiple themes and color variants
Version Control	Not available	Built-in version management
Updates	Manual recreation	One-click updates with change notes
Bundles	Not supported	Multi-component bundles available
Access Control	Not available	Owner-based visibility
Responsive	Basic	Built-in responsive design
Subscription	Available on all plans	Premium feature (plan-dependent)

Troubleshooting

Cannot See Components in Library

• Verify your plan includes Universal Components
• Check if components have owner restrictions
• Ensure you're looking in the correct category
• Verify the component status matches your environment (Active vs. In Progress)

Component Not Loading Data

• Verify the data table is correctly selected
• Check field mappings are configured
• Ensure you have permission to view the data table
• If using "onlyLoadAfterSearch", perform a search first
• Check for JavaScript errors in browser console

Inline Editing Not Working

• Verify "Allow Update" is set to "Yes"
• Check you have update permissions on the data table
• Ensure fields are configured as editable
• Verify field validation rules aren't blocking saves

Styling Looks Different Than Expected

• Check if custom CSS is interfering
• Verify the correct theme is selected
• Clear browser cache and refresh
• Check if app-level or page-level CSS is overriding styles

Update Not Applying

• Ensure you have edit permissions on the page
• Check if you have a stable internet connection
• Try refreshing the page and applying the update again
• Contact support if the issue persists with the component and version details

Getting Help

If you need assistance with Universal Components:

• Review this documentation thoroughly
• Explore the component library to see what's available
• Test components with sample data before using in production
• Contact Tadabase support with specific questions
• Provide component name, version, and configuration details for faster support