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)

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

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

1. Accédez à l’éditeur de formulaires pour une table.

2. Sélectionnez où vous souhaitez ajouter l’image dans le formulaire.

3. Sous Insérer un onglet, sélectionnez Ressource web.

4. Sous l’onglet Général, sélectionnez l’image de ressource web à ajouter.

5. Indiquez un nom pour la ressource web. Vous pouvez spécifier une Étiquette et un texte de remplacement.

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

7. Cliquez sur OK.

8. 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"/>  

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)