Les composants graphiques personnalisés vous permettent d'adapter les fonctionnalités de contenu de vos pages d'accueil aux besoins de votre organisation et de vos cours. Vous pouvez ajouter du code HTML personnalisé pour créer une gamme plus étendue de composants graphiques. Vous pouvez créer des composants graphiques personnalisés pour vos cours, ou utiliser des composants graphiques personnalisés partagés avec vos offres de cours depuis un niveau d'organisation, de département ou de semestre.

|
Remarque : Votre administrateur a peut-être choisi de mettre en œuvre une protection supplémentaire sur les composants graphiques personnalisés appelée la mise en bac à sable. Lorsqu'un composant graphique personnalisé est mis en bac à sable, un iFrame sécurisé est créé autour du composant graphique et empêche l'exécution de scripts en dehors du composant graphique. Vous pouvez voir si un composant graphique est mis en bac à sable ou non dans la liste des composants graphiques personnalisés. Les composants graphiques qui ne sont pas mis en bac à sable ne sont pas non sécurisés en soi, mais ils ne doivent être créés que par des rôles de confiance. |
Dans la liste des composants graphiques, les composants graphiques qui ne sont pas en bac à sable sont identifiés par une icône d'avertissement :

Créer un composant graphique personnalisé
- Sur la page d'accueil de votre cours, cliquez sur Administration du cours > Composants graphiques.
- Cliquez sur Créer le composant graphique.

- Dans l'onglet Propriétés, entrez le nom et la description de votre composant graphique.

- Pour ajouter votre propre contenu HTML au composant graphique à l'aide de l'Éditeur de source HTML, cliquez sur l'onglet Contenu, puis sur l'icône
Éditeur de source HTML. Ajoutez votre code HTML personnalisé.

- Pour appliquer diverses options de style au composant graphique, cliquez sur Personnaliser le style du composant graphique.

- Procédez de l'une des façons suivantes dans la zone Composants graphiques :
- Pour masquer la barre de titre, désélectionnez la case Afficher la barre du titre.
- Pour activer la mise en bac à sable du contenu du composant graphique, sélectionnez l'option Composant graphique est en bac à sable ou Effectuer un rendu en image iframe.
 | Remarque : Si votre rôle ne dispose pas de l'autorisation nécessaire pour activer ce réglage, mais que vous pensez que votre composant graphique devrait être mis en bac à sable pour se comporter comme prévu, veuillez communiquer avec un administrateur qui a l'autorisation relative à la Sécurité du composant graphique. |
- Pour supprimer le style de bordure par défaut, décochez la case Afficher un style de contenant de composant graphique.
- Sélectionnez l'option Interdire la réduction du composant graphique pour empêcher les utilisateurs de fermer le composant graphique sur la page d'accueil.

- Pour définir un titre personnalisé, accédez à la section Nom du composant graphique et sélectionnez l'option Personnaliser. Saisissez votre texte dans le champ.
- Cliquez sur Enregistrer. Pour associer des conditions de diffusion au composant graphique, cliquez sur l'onglet Conditions de diffusion et effectuez l'une des actions suivantes :
- Cliquez sur Joindre la condition existante, puis sélectionnez-en une parmi celles utilisables par l’UO. Cliquez sur Enregistrer. Dans la liste déroulante, sélectionnez Toutes les conditions suivantes ou Une des conditions suivantes.
- Sélectionnez Créer et joindre pour créer une condition de diffusion et l'associer. Cliquez sur Créer. Dans la liste déroulante, sélectionnez Toutes les conditions suivantes ou Une des conditions suivantes.
- Cliquez sur Save and Close (Enregistrer et fermer).
