Skip to main content

Widget History

OverviewDirect link to Overview

The Widget History component displays a chronological record of activities and changes for instances and tasks. This component automatically loads and presents historical data in a structured table format, providing users with a comprehensive view of all actions, validations, and modifications that have occurred.

Widget History
Widget History

Key FeaturesDirect link to Key Features

  • Automatic History Loading: Automatically fetches history data when an instance ID or task ID is present
  • Hierarchical History: Option to include parent and child instance histories
  • Responsive Design: Optimized for both desktop and mobile viewing
  • Customizable Measures: Add custom columns to display additional data fields
  • Interactive Comments: Integrated comment area for adding new entries
  • Mobile-Friendly: Collapsible rows on mobile devices for better user experience

Configuration OptionsDirect link to Configuration Options

Basic ConfigurationDirect link to Basic Configuration

Include Father HistoryDirect link to Include Father History

  • Description: When enabled, includes the history of the parent instance in addition to the current instance history
  • Use Case: Useful for tracking the complete lineage of related processes

Include Children HistoryDirect link to Include Children History

  • Description: When enabled, includes the history of all child instances related to the current instance
  • Use Case: Provides a comprehensive view of all sub-processes and their activities
Widget History Basic Configuration
Widget History Basic Configuration

Measures ConfigurationDirect link to Measures Configuration

Measures allow you to add custom columns to display additional data from the history records.

Adding a New MeasureDirect link to Adding a New Measure

  1. Click "Add Measure" button
  2. Configure the following properties:

Field: The field name from the history data object

  • Example: status, priority, assignedUser

Label: The display label for the column header

  • Example: "Status", "Priority Level", "Assigned To"

Width: Column width (optional)

  • Format: CSS width values
  • Examples: 120px, 15%, auto

Visibility Rule: JavaScript condition to show/hide the column

  • Context: Access to models object
  • Example: models.userRole === 'admin'

HTML Template: Custom HTML template for rendering cell content

  • Context: Access to scope.row for current row data
  • Example:
<span class="status-badge" :class="scope.row.status">
  {{ scope.row.measures.status || 'N/A' }}
</span>
Widget History [Measures](/docs/en/ressources/project/process/measures) Configuration
Widget History [Measures](/docs/en/ressources/project/process/measures) Configuration

Default ColumnsDirect link to Default Columns

ValidatorDirect link to Validator

  • Content: User avatar and email
  • Mobile: Shows email with expand/collapse functionality
  • Special: Displays "pour [representative]" if user is acting on behalf of someone else

DateDirect link to Date

  • Format: "DD MMM YYYY h:mm a" (e.g., "15 Jan 2024 10:30 AM")
  • Mobile: Hidden by default, shown when row is expanded

CommentaryDirect link to Commentary

  • Content: Text description of the action or change
  • Mobile: Hidden by default, shown when row is expanded
Widget History Default Columns
Widget History Default Columns

Validation and VisibilityDirect link to Validation and Visibility

Screen-Based ConfigurationDirect link to Screen-Based Configuration

The widget History supports different configurations for different screens/contexts:

  • Available: Controls whether the widget exists in the interface
  • Visible: Controls whether the widget is visible to users
  • Required: Not applicable for widgets History (display-only component)
  • Disable: Not applicable for widgets History (non-interactive component)
History Basic Validation
History Basic Validation

Advanced Visibility ConditionsDirect link to Advanced Visibility Conditions

Use JavaScript expressions for complex visibility logic:

History Advanced Validation
History Advanced Validation

Styling and Responsive BehaviorDirect link to Styling and Responsive Behavior

Desktop ViewDirect link to Desktop View

  • Full table layout with all columns visible
  • Sortable columns (where applicable)
  • Fixed table height with scrolling (max-height: 250px)

Mobile ViewDirect link to Mobile View

  • Compact row display showing only avatar and email
  • Expandable rows revealed by tapping the arrow icon
  • All additional information appears when row is expanded
  • Touch-friendly interface with larger touch targets

Comment IntegrationDirect link to Comment Integration

The widget includes an integrated comment textarea that allows users to add new comments to the history. This feature:

  • Automatically binds to SF_comment_widget_history model
  • Supports validation rules
  • Can be hidden/shown based on visibility settings
  • Integrates with the overall form validation system

Loading StatesDirect link to Loading States

The component provides visual feedback during data loading:

  • Loading spinner overlay on the table
  • Disabled state for comment input during loading
  • Error handling with console logging

Browser CompatibilityDirect link to Browser Compatibility

  • Modern browsers with ES6 support
  • Vue.js 2.x compatible
  • Element UI components
  • Responsive CSS Grid and Flexbox support

TroubleshootingDirect link to Troubleshooting

Common IssuesDirect link to Common Issues

No data displayed

  • Verify uiQuery.SF_instanceId or uiQuery.SF_taskId is properly set
  • Check network connectivity and API endpoints
  • Verify user permissions for accessing history data

Custom measures not showing

  • Ensure field names match exactly with data structure
  • Check visibility conditions syntax
  • Verify HTML templates are valid

Mobile view not working

  • Check viewport meta tag configuration
  • Ensure CSS classes are properly loaded
  • Verify touch event handlers are enabled

Performance ConsiderationsDirect link to Performance Considerations

  • Large histories may impact loading times
  • Consider pagination for instances with extensive history
  • Custom HTML templates should be optimized for performance
  • Limit the number of custom measures for optimal display

Security NotesDirect link to Security Notes

  • History data access is controlled by backend permissions
  • User representation is validated server-side
  • Custom HTML templates are rendered client-side (sanitize input)
  • Comment submission follows standard form validation rules