Documentation du Widget HTML

Aperçu​

Le widget HTML vous permet d'intégrer du contenu HTML personnalisé directement dans votre interface. Ce widget offre une flexibilité complète pour afficher du contenu riche, des mises en page personnalisées ou intégrer des composants HTML tiers tout en maintenant un contrôle total sur le style et le comportement.

Configuration de Base​

Paramètres Globaux​

Nom​

• Champ: Identifiant du nom du widget
• Utilisation: Définissez un nom descriptif pour une identification facile dans l'arborescence des widgets
• Exemple: "En-tête personnalisé", "Description du produit"

Variable/Modèle​

• Champ: Liaison du modèle pour le widget
• Utilisation: Liez le widget à un modèle de données ou une variable pour le contenu dynamique
• Validation: Le système valide les noms de modèles et affiche des avertissements pour les problèmes potentiels

Éditeur de Contenu HTML​

Bouton Modifier HTML​

• Localisation: Section Général → Modifier HTML
• Fonction: Ouvre un éditeur de code pour écrire du contenu HTML personnalisé
• Fonctionnalités:
  • Coloration syntaxique
  • Complétion de code
  • Détection d'erreurs
  • Capacités d'aperçu

HTML Supporté​

• Éléments et attributs HTML5 standard
• Style CSS inline
• Intégration JavaScript (avec considérations de sécurité de la plateforme)
• Contenu dynamique utilisant des variables de modèle

Variables de Modèle​

Accédez aux données dynamiques dans votre contenu HTML:

Configuration de la Validation​

Validation Basée sur l'Écran​

Configurez le comportement du widget sur différents écrans/contextes:

Disponible​

• Objectif: Contrôle si le widget existe dans le DOM
• Options:
  • Bascule booléenne (true/false)
  • Condition avancée utilisant des expressions JavaScript

Visible​

• Objectif: Contrôle la visibilité du widget (afficher/masquer)
• Options:
  • Bascule booléenne
  • Condition avancée avec des variables de modèle
• Exemple Avancé: userRole == 'admin'

Requis​

• Objectif: Rend le widget obligatoire pour la validation du formulaire
• Remarque: Principalement utilisé lorsque le widget HTML contient des éléments de formulaire
• Options: Expression booléenne ou conditionnelle

Désactiver​

• Objectif: Désactive les éléments interactifs dans le widget
• Options: Expression booléenne ou conditionnelle

Configuration du Style​

• Champ: Noms des classes
• Utilisation: Appliquez les classes CSS prédéfinies
• Format: Noms de classes séparés par des espaces

Structure du Modèle Widget​

Composant Généré​

Le widget génère un composant Vue.js avec:

• ID de composant unique
• Liaison de données réactive
• Rendu conditionnel
• Capacités de gestion des événements

Structure du DOM​

<div
  id="[widgetId]"
  v-if="[visibilityCondition]"
  class="[staticClasses]"
  :class="[dynamicClasses]"
>
  <!-- Votre contenu HTML personnalisé -->
</div>

Exemples d'Intégration​

Contenu HTML Basique​

<div class="custom-section">
  <h2>Bienvenue {{SF_connectedUser.firstName}}</h2>
  <p>Dernière connexion: {{models.lastLogin }}</p>
</div>

Éléments Interactifs​

<div class="interactive-widget" style="display: flex; align-items: center; gap: 12px;">
  <el-button type="primary" size="large" @click="customFunction">
    Cliquer
  </el-button>

  <el-input v-model="models.inputValue" placeholder="Entrez du texte" clearable style="max-width: 220px;" />
</div>

Contenu Conditionnel​

<div v-if="models.isAdmin">
  <h3>Panneau d'Administration</h3>
  <div class="admin-controls">
    <!-- Contenu spécifique à l'admin -->
  </div>
</div>

Meilleures Pratiques​

Considérations de Sécurité​

• Assainissez le contenu généré par l'utilisateur
• Évitez le JavaScript inline en production
• Utilisez les fonctionnalités de sécurité fournies par la plateforme
• Validez toutes les données dynamiques

Optimisation des Performances​

• Minimisez la complexité du DOM
• Utilisez des sélecteurs CSS efficaces
• Mettez en œuvre le chargement paresseux pour le contenu lourd
• Optimisez les images et les médias

Accessibilité​

• Incluez les attributs ARIA appropriés
• Assurez-vous du support de la navigation au clavier
• Fournissez un texte alternatif pour les images
• Maintenez une hiérarchie de titres appropriée

Maintenabilité​

• Utilisez une structure HTML sémantique
• Commentez les fonctionnalités complexes
• Suivez les conventions de dénomination cohérentes
• Séparez les préoccupations (structure, style, comportement)

Dépannage​

Problèmes Courants​

Widget ne s'Affiche Pas​

• Vérifiez les conditions de visibilité
• Vérifiez les liaisons de modèle
• Assurez-vous de la syntaxe HTML appropriée
• Vérifiez la console du navigateur pour les erreurs

Problèmes de Style​

• Vérifiez les noms des classes CSS
• Vérifiez les styles en conflit
• Assurez-vous de la compatibilité de la conception réactive
• Testez sur différentes tailles d'écran

Contenu Dynamique ne se Met Pas à Jour​

• Confirmez la syntaxe de liaison du modèle
• Vérifiez les problèmes de réactivité
• Vérifiez les connexions aux sources de données
• Vérifiez les erreurs de la console JavaScript

Mode Débogage​

Activez le mode débogage pour:

• Afficher la structure du composant généré
• Surveiller les mises à jour de liaison de données
• Suivre l'exécution des règles de validation
• Inspecter les modifications du DOM

Fonctionnalités Avancées​

Intégration de Formulaire​

Incluez les éléments de formulaire qui s'intègrent avec le système de formulaire de la plateforme:

<div class="form-section">
  <label for="customField">Saisie Personnalisée:</label>
  <el-input
    id="customField"
    v-model="model.customField"
    placeholder="Entrez une valeur"
    clearable
  ></el-input>
</div>

Ce widget HTML offre une flexibilité maximale tout en maintenant l'intégration avec les systèmes de validation, de style et de liaison de données de la plateforme. Utilisez-le lorsque les widgets standard ne répondent pas à vos exigences spécifiques ou lorsque vous avez besoin d'un contrôle total sur la couche de présentation.