Widget Historique

Aperçu​

Le composant Widget Historique affiche un enregistrement chronologique des activités et des modifications pour les instances et les tâches. Ce composant charge et présente automatiquement les données historiques dans un format de tableau structuré, offrant aux utilisateurs une vue complète de toutes les actions, validations et modifications qui se sont produites.

Fonctionnalités Principales​

• Chargement Automatique de l'Historique: Récupère automatiquement les données d'historique lorsqu'un ID d'instance ou un ID de tâche est présent
• Historique Hiérarchique: Option pour inclure les historiques des instances parentes et enfants
• Conception Réactive: Optimisé pour la visualisation sur ordinateur de bureau et mobile
• Mesures Personnalisables: Ajoutez des colonnes personnalisées pour afficher des champs de données supplémentaires
• Commentaires Interactifs: Zone de commentaires intégrée pour ajouter de nouvelles entrées
• Adapté aux Mobiles: Lignes réductibles sur les appareils mobiles pour une meilleure expérience utilisateur

Options de Configuration​

Configuration de Base​

Inclure l'Historique du Père​

• Description: Lorsqu'activé, inclut l'historique de l'instance parente en plus de l'historique de l'instance actuelle
• Cas d'Utilisation: Utile pour suivre la lignée complète des processus connexes

Inclure l'Historique des Enfants​

• Description: Lorsqu'activé, inclut l'historique de toutes les instances enfants liées à l'instance actuelle
• Cas d'Utilisation: Fournit une vue complète de tous les sous-processus et de leurs activités

Configuration des Mesures​

Les Mesures vous permettent d'ajouter des colonnes personnalisées pour afficher des données supplémentaires à partir des enregistrements d'historique.

Ajouter une Nouvelle Mesure​

1. Cliquez sur le bouton "Ajouter une Mesure"
2. Configurez les propriétés suivantes :

Champ: Le nom du champ de l'objet de données d'historique

• Exemple: status, priority, assignedUser

Libellé: Le libellé d'affichage pour l'en-tête de la colonne

• Exemple: "Statut", "Niveau de Priorité", "Assigné à"

Largeur: Largeur de la colonne (optionnel)

• Format: Valeurs de largeur CSS
• Exemples: 120px, 15%, auto

Règle de Visibilité: Condition JavaScript pour afficher/masquer la colonne

• Contexte: Accès à l'objet models
• Exemple: models.userRole === 'admin'

Modèle HTML: Modèle HTML personnalisé pour le rendu du contenu de la cellule

• Contexte: Accès à scope.row pour les données de la ligne actuelle
• Exemple:

<span class="status-badge" :class="scope.row.status">
  {{ scope.row.measures.status || 'N/A' }}
</span>

Colonnes par Défaut​

Validateur​

• Contenu: Avatar et email de l'utilisateur
• Mobile: Affiche l'email avec fonctionnalité d'expansion/réduction
• Spécial: Affiche "pour [représentant]" si l'utilisateur agit au nom de quelqu'un d'autre

Date​

• Format: "DD MMM YYYY h:mm a" (par ex., "15 Jan 2024 10:30 AM")
• Mobile: Masqué par défaut, affiché lorsque la ligne est développée

Commentaire​

• Contenu: Description textuelle de l'action ou du changement
• Mobile: Masqué par défaut, affiché lorsque la ligne est développée

Validation et Visibilité​

Configuration Basée sur l'Écran​

Le widget Historique prend en charge différentes configurations pour différents écrans/contextes :

• Disponible: Contrôle si le widget existe dans l'interface
• Visible: Contrôle si le widget est visible pour les utilisateurs
• Requis: Non applicable pour les widgets Historique (composant en affichage seul)
• Désactiver: Non applicable pour les widgets Historique (composant non interactif)

Advanced Visibility Conditions​

Use JavaScript expressions for complex visibility logic:

Styling and Responsive Behavior​

Desktop View​

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

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 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 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 Compatibility​

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

Troubleshooting​

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 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 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