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 - View Complete Pivot Table Guide

Pivot Table Features

Pivot Tables are powerful analysis components that allow you to summarize, aggregate, and analyze large amounts of data through dynamic grouping and calculations. They display data in a cross-tabulation format with rows, columns, and aggregated values.

Understanding Pivot Table Structure

A pivot table organizes your data into four main areas:

• Rows: Fields used to group your data vertically (like categories, dates, or names)
• Columns: Numeric values with aggregation functions (sum, average, minimum, maximum)
• Row Summaries: Calculated values across all columns for each row (optional)
• Column Summaries: Calculated totals for each column across all rows (optional)

Configuring Rows (Group Fields)

Rows determine how your data is grouped and organized:

Row Configuration Options

• Field Selection: Choose which field to group by (Text, Number, Date, Select, etc.)
• Custom Label: Set a display name for the row header
• Include Blank: Show or hide records with empty values in this field
• Multiple Levels: Add multiple row fields to create nested grouping

Supported Field Types for Rows

You can use these field types for row grouping:

• Text, Email, Phone, Name fields
• Number and Currency fields
• Date, Time, and Date/Time fields
• Radio, Checkbox, Select, and Multi-Select fields
• Rating and Slider fields
• Formula fields (Text, Basic, Complex, Equation)
• One-to-One Join fields

Configuring Columns (Value Columns)

Columns display aggregated numeric values for each group:

Column Configuration Options

• Field/Calculation: Select a numeric field or use "Total Number of Records" to count records
• Aggregation Function: Choose how to aggregate the values:
  • Sum: Add all values together (default)
  • Average: Calculate the mean of all values
  • Minimum: Find the smallest value
  • Maximum: Find the largest value
• Custom Label: Set a display name for the column header
• Multiple Columns: Add multiple value columns to compare different metrics

Supported Field Types for Columns

• Number and Currency fields
• Rating and Slider fields
• Basic Formula and Complex Formula fields
• Equation fields (with Number output type)
• Special "Total Number of Records" option (counts records in each group)

Row Summaries

Row summaries calculate aggregate values horizontally across all columns for each row. This is useful when you want to see totals or averages for each grouped row.

Example Use Case

If your pivot table shows sales by product (rows) with columns for Q1, Q2, Q3, Q4, a row summary with "Sum" would show the total sales for each product across all quarters.

Configuration Options

• Calculation Type: Sum, Average, Minimum, or Maximum
• Custom Label: Name for the summary column (e.g., "Total Sales", "Average Score")
• Multiple Summaries: Add multiple row summaries with different calculation types

Column Summaries

Column summaries calculate aggregate values vertically for each column across all rows. These appear as footer rows at the bottom of your pivot table.

Example Use Case

Continuing the sales example, a column summary with "Sum" would show the total sales for each quarter (Q1, Q2, Q3, Q4) across all products.

Configuration Options

• Calculation Type: Sum, Average, Minimum, or Maximum
• Custom Label: Name for the summary row (e.g., "Grand Total", "Overall Average")
• Multiple Summaries: Add multiple column summaries with different calculation types

Sorting in Pivot Tables

Control how your pivot table data is ordered:

• Sort By: Select any row field or column to sort by
• Sort Direction: Choose Ascending (ASC) or Descending (DESC)
• Multiple Sorts: Add multiple sort criteria with priority order
• Sort Options Display: Shows both the field name and what it represents (e.g., "Total (Sum of Sales)")

Side Panel View

The Side Panel View displays detailed records when you click on a row in the pivot table. This lets users drill down from summary data to see the underlying individual records.

Configuration Options

• Enable/Disable: Toggle the Side Panel View on or off
• Panel Size: Choose from Small, Medium, Wide, or Extra Wide
  • Small: Takes up 17% of the screen width
  • Medium: Takes up 33% of the screen width (default)
  • Wide: Takes up 50% of the screen width
  • Extra Wide: Takes up 67% of the screen width
• Field Layout: Drag and drop fields to customize the panel layout
• Load More: Automatically paginates records when there are many items

How It Works

1. User clicks on any row in the pivot table
2. Side panel slides in from the right
3. Shows all individual records that make up that pivot table row
4. Each record displays the fields you configured in the layout
5. Click "Load More" to see additional records
6. Click "Close" or click another row to hide the panel

Popup View

The Popup View opens a modal dialog when clicking on individual records in the Side Panel. This provides a detailed, full-screen view of a single record.

Configuration Requirements

• Side Panel View must be enabled first
• Toggle Popup View to "Show"
• Configure the field layout for the popup modal

How It Works

1. User clicks a row in the pivot table to open Side Panel
2. User clicks on an individual record in the Side Panel
3. Popup modal opens with full record details
4. Displays all fields configured in Popup View layout
5. User clicks "Close" to return to the Side Panel

Filter Tabs

Filter Tabs add clickable tabs above your pivot table that instantly filter the data. This is perfect for creating preset views of your data.

Configuring Filter Tabs

1. Toggle "Filter Tabs" to Enable
2. Click "Add New Tab" to create a filter tab
3. Set the tab title (e.g., "This Month", "Top Performers", "Overdue")
4. Configure filter conditions for the tab
5. Optionally set one tab as the default (shown when page loads)
6. Repeat for additional tabs

Tab Options

• Tab Title: Display name shown to users
• Filter Conditions: Standard field-based filtering
• Default Filter: Mark one tab to be selected by default
• Badge Class: Optional CSS class for styling
• Tab Colors: Enable colored tabs for visual distinction
• Hide Clear Filter: Option to hide the automatic "Clear Filter" tab
• Sortable: Drag and drop to reorder tabs

How Users Interact

• Click any tab to instantly filter the pivot table data
• Click "Clear Filter" (if visible) to remove all tab filters
• Tab filters combine with any base filters you set on the component
• Active tab is highlighted

Search Integration

Pivot Tables can integrate with Search or Enterprise Search components on the same page. This allows users to search first, then see pivot analysis of the search results.

Setting Up Search Integration

1. Add a Search component to your page
2. Add a Pivot Table component to the same page
3. In the Pivot Table settings, enable "Only Load After Search"
4. Both components must use the same data table
5. Configure which component objects should trigger the pivot table load

How It Works

• Before Search: Pivot table is hidden from view
• After Search: User performs a search in the Search component
• Results: Pivot table appears and shows analysis of the search results
• Clear Search: Pivot table returns to hidden state

Data Formatting

Pivot Tables automatically format data based on field types:

Number Formatting

• Currency Fields: Displayed with proper currency symbol and decimal places
• Regular Numbers: Rounded to 2 decimal places
• Averages: Always show 2 decimal places
• Counts: Displayed as whole numbers

Field Display

• Date fields show in your configured date format
• Select/Radio fields show the selected option label
• Join fields display the connected record's display value
• All fields respect their configured display settings

Best Practices for Pivot Tables

Choosing Row Fields

• Use categorical fields (Status, Category, Region, etc.)
• Date fields work well for time-based analysis
• Limit to 2-3 row fields to keep tables readable
• Put the most important grouping first

Choosing Column Fields

• Always use numeric fields for meaningful aggregation
• Use "Total Number of Records" when counting is more important than summing
• Consider using multiple columns to compare different metrics
• Match aggregation function to your analysis needs (Sum for totals, Average for rates)

Performance Considerations

• Use base filters to limit data before pivot calculation
• Enable "Only Load After Search" for large datasets
• Limit the number of row grouping levels
• Use Filter Tabs instead of loading all data at once

Common Pivot Table Examples

Sales Analysis by Region and Quarter

• Rows: Region, Sales Rep
• Columns: Sum of Revenue, Count of Orders
• Row Summary: Sum (total revenue per rep)
• Column Summary: Sum (total revenue per metric)
• Result: See which reps in which regions generate the most revenue

Project Time Tracking

• Rows: Project Name, Task Type
• Columns: Sum of Hours Logged, Average of Hours per Task
• Row Summary: Sum (total hours per project)
• Result: Analyze time spent on different types of tasks across projects

Inventory Status by Location

• Rows: Warehouse Location, Product Category
• Columns: Sum of Quantity, Count of SKUs
• Column Summary: Sum (total inventory across all locations)
• Result: Monitor inventory levels by location and category

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