Documentation du Widget HTML

Aperçu#Lien direct vers 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#Lien direct vers Configuration de Base

Paramètres Globaux#Lien direct vers Paramètres Globaux

Nom#Lien direct vers 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#Lien direct vers 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#Lien direct vers Éditeur de Contenu HTML

Bouton Modifier HTML#Lien direct vers 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é#Lien direct vers 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#Lien direct vers Variables de Modèle

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

Configuration de la Validation#Lien direct vers Configuration de la Validation

Validation Basée sur l'Écran#Lien direct vers Validation Basée sur l'Écran

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

Disponible#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Désactiver

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

Configuration du Style#Lien direct vers 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#Lien direct vers Structure du Modèle Widget

Composant Généré#Lien direct vers 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#Lien direct vers Structure du DOM

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

Exemples d'Intégration#Lien direct vers Exemples d'Intégration

Contenu HTML Basique#Lien direct vers Contenu HTML Basique

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

Éléments Interactifs#Lien direct vers É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#Lien direct vers 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#Lien direct vers Meilleures Pratiques

Considérations de Sécurité#Lien direct vers 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#Lien direct vers 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é#Lien direct vers 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é#Lien direct vers 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#Lien direct vers Dépannage

Problèmes Courants#Lien direct vers Problèmes Courants

Widget ne s'Affiche Pas#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Fonctionnalités Avancées

Intégration de Formulaire#Lien direct vers 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.