Ressources web d’images
Utilisez les ressources web d’images pour rendre les images disponibles pour être utilisées dans les applications pilotées par modèle.
Il existe cinq types de ressources web d’images :
- Format PNG
- Format JPG
- Format GIF
- Format ICO (format d’icône Windows)
- Format SVG (Scalable Vector Graphics)
Notes
Des ressources web au format vectoriel (SVG) ont été ajoutées aux applications pilotées par modèle.
Fonctionnalités des ressources Web d’images
Les ressources web d’images vous permettent d’ajouter des images lorsque vous en avez besoin. Les utilisations courantes sont les suivantes :
- Icônes de tables personnalisées.
- Icônes pour les contrôles personnalisés du ruban et les sous-zones
SiteMap. - Graphiques décoratifs pour les formulaires et les ressources web de page web.
- Images d’arrière-plan utilisées par les ressources web CSS.
Utilisation du format SVG (Scalable Vector Graphics)
Utilisez des ressources web au format vectoriel (SVG) pour toutes les icônes affichées dans l’application. Les images vectorielles sont définies au format SVG (Scalable Vector Graphics, graphique vectoriel évolutif), un format fondé sur XML. Nous vous recommandons d’utiliser SVG plutôt que d’autres types d’images comme PNG et JPG, car ils ont une meilleure accessibilité, une taille de fichier plus petite et peuvent évoluer avec leur conteneur.
Meilleure accessibilité
Les applications pilotées par modèle peuvent contrôler la couleur de l’icône pour éviter les problèmes de contraste lorsque les fichiers SVG ne contiennent pas de valeurs hexadécimales pour les couleurs. L’utilisation de currentColor peut aider à garantir que les couleurs de thème correctes sont utilisées.
<path fill="currentColor" d="M16,0c-0,0-0-0.0-0-0.0v-0c0-0,0-0.0,0-0.0s0,0.0,0,0.0v0C00,0.0,00,0,00,0z"/>
Taille de fichier plus petite
Les fichiers SVG sont généralement plus petits que les images de type raster, telles que jpg ou png.
Évolution avec leur conteneur
Vous pouvez réutiliser un seul SVG plutôt que de fournir plusieurs tailles d’images. Utilisez les ressources web SVG dans la propriété EntityMetadata.IconVectorName pour définir l’icône d’une table personnalisée au lieu des propriétés IconLargeName, IconMediumName ou IconSmallName.
Pratiques recommandées
Assurez-vous qu’une taille par défaut est définie via les attributs de largeur, de hauteur et viewBox de l’élément svg.
Dans la mesure du possible, supprimez toutes les couleurs de remplissage codées en dur et n’utilisez pas de feuilles de style ni de classes incorporées dans SVG. Les feuilles de style incorporées peuvent divulguer des styles si d’autres fichiers SVG font référence à cette même classe. Utilisez plutôt l’attribut de style pour attribuer des valeurs. Par exemple :
<path style="fill:#231F20;" d="M16,0c-0,0-0-0.0-0-0.0v-0c0-0,0-0.0,0-0.0s0,0.0,0,0.0v0C00,0.0,00,0,00,0z"/>
Notes
Les ressources web au format SVG sont traitées comme ressources web Script (JScript) et comportent les mêmes risques de sécurité que les ressources web JavaScript, car les fichiers SVG permettent l’incorporation de JScript.
Limitations des ressources web d’images
Les ressources web d’images utilisent le contexte de sécurité comme toutes les ressources web. Seuls les utilisateurs autorisés disposant des privilèges nécessaires peuvent y accéder.
Référencer une ressource web d’image à partir d’une ressource web de page web
Toutes les ressources web peuvent utiliser les URL relatives pour se référencer entre elles. Dans l’exemple suivant, pour que la ressource web de la page web new_/content/contentpage.htm fasse référence à la ressource web d’image new_/Images/image1.png, ajoutez le code HTML suivant à new_/content/contentpage.htm :
<img src="../Images/image1.png" />
Référencer une ressource web d’image dans un formulaire
Ajouter une image à un formulaire
Accédez à l’éditeur de formulaires pour une table.
Sélectionnez où vous souhaitez ajouter l’image dans le formulaire.
Sous Insérer un onglet, sélectionnez Ressource web.
Sous l’onglet Général, sélectionnez l’image de ressource web à ajouter.
Indiquez un nom pour la ressource web. Vous pouvez spécifier une Étiquette et un texte de remplacement.
Sous l’onglet Mise en forme, vous pouvez définir :
le nombre de colonnes que les images doivent utiliser ;
le nombre de lignes que les images doivent utiliser, ou si elles doivent automatiquement s’ajuster pour utiliser l’espace disponible.
La taille de l’image à l’aide des options suivantes :
- Étirer pour ajuster
- Étirer pour ajuster (conserver les proportions)
- D’origine
- Specific
Si vous sélectionnez « Spécifique », vous pouvez entrer la hauteur et la largeur souhaitées en pixels.
Cliquez sur OK.
Vous devez enregistrer vos modifications et publier le formulaire avant que les utilisateurs puissent voir l’image dans le formulaire.
Référencer une ressource web d’image à partir d’un élément du Ruban ou de la sous-zone Plan du site
Utilisez la directive $webresource: pour spécifier une image de ressource web à utiliser comme icône dans le Ruban ou lors de la navigation dans l’application à l’aide du plan de site. Cet exemple explique comment spécifier les icônes pour un bouton dans le Ruban.
<Button Id="MyISV.opportunity.form.actions.FlyoutAnchor.Button.1" Image16by16="$webresource:new_/icons/oneIcon16.png" Image32by32="$webresource:new_/icons/oneIcon32.png"/>
Notes
À l’aide de la directive $webresource:, ajoutez une dépendance de solution qui empêche les ressources web d’images référencées d’être supprimée tant qu’elles sont utilisées par un autre composant de solution.
Voir aussi
Ressources web
Utilisation des ressources web de page web (HTML)
Utilisation des ressources web de feuille de style (CSS)
Utilisation des ressources web JavaScript
Utilisation des ressources web de données (XML)
Utilisation de ressources web de feuille de style (XSL)
Notes
Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)
Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).