Freigeben über

Image-Webressourcen

  • Artikel

Verwenden Sie Bild-Webressourcen, um Bilder zur Verwendung in modellbasierten Apps verfügbar zu machen.

Es gibt fünf Arten von Bild-Webressourcen:

  • PNG-Format
  • JPG-Format
  • GIF-Format
  • ICO-Format (Windows-Symbolformat)
  • SVG-Format (Skalierbare Vektorgrafiken)

Hinweis

Mit den modellbasierten Apps wurden Webressourcen im Vektorformat (SVG) hinzugefügt.

Verwendungsmöglichkeiten für Bildwebressourcen

Mithilfe von Bildwebressourcen können Sie Bilder dort hinzufügen, wo sie benötigt werden. Häufige Verwendungen umfassen:

  • Benutzerdefinierte Tabellensymbole.
  • Symbole für benutzerdefinierte Menüband-Steuerelemente und SiteMap-Unterbereiche.
  • Dekorative Grafiken für Entitätsformulare und Webseiten-Webressourcen.
  • Hintergrundbilder, die von CSS-Webressourcen verwendet werden

Arbeiten mit skalierbaren Vektorgrafiken (SVG)

Verwenden Sie Vektorformat (SVG)-Webressourcen für alle Symbole, die in der Anwendung angezeigt werden. Vektorbilder werden als skalierbare Vektorgrafiken (Scalable Vector Graphics, SVG), ein XML-basiertes Vektorbildformat, definiert. Wir empfehlen die Verwendung von SVG gegenüber anderen Bildtypen wie PNG und JPG, da diese besser zugänglich sind, eine kleinere Dateigröße aufweisen und mit ihrem Container skaliert werden können.

Bessere Barrierefreiheit

Modellgesteuerte Apps können die Symbolfarbe steuern, um Kontrastprobleme zu vermeiden, wenn SVG keine Hexadezimalwerte für Farben enthalten. Durch die Verwendung von currentColor können Sie sicherstellen, dass die richtigen Designfarben verwendet werden.

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

Kleinere Dateigröße

SVG-Dateien sind normalerweise kleiner als Rastertyp-Bilder wie JPG oder PNG.

Mit ihrem Container skalieren

Sie können eine einzelne SVG-Datei wiederverwenden, anstatt Bilder in mehreren Größen bereitzustellen. Verwenden Sie SVG-Webressourcen in der EntityMetadata.IconVectorName-Eigenschaft anstelle der Eigenschaften IconLargeName, IconMediumName oder IconSmallName, um das Symbol für eine benutzerdefinierte Tabelle zu definieren.

Best Practices

Stellen Sie sicher, dass über die Attribute des svg-Elements width, height und viewBox eine Standardgröße festgelegt ist.

Entfernen Sie wenn möglich alle fest codierten Füllfarben und verwenden Sie keine eingebetteten Stylesheets und Klassen innerhalb des SVG. Eingebettete Stylesheets können Stile verlieren, wenn andere SVG-Dateien auf dieselbe Klasse verweisen. Verwenden Sie stattdessen das Stilattribut, um Werte zuzuweisen. Zum Beispiel:

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

Hinweis

Vektorformat (SVG)-Webressourcen werden wie Skript (JScript)-Webressourcen behandelt und weisen die gleichen Sicherheitsrisiken wie JavaScript-Webressourcen auf, da SVG-Dateien das Einbetten von JScript ermöglichen.

Einschränkungen von Bildwebressourcen

Wie alle Webressourcen verwenden Bildwebressourcen den Sicherheitskontext. Nur lizenzierte Benutzer, die über die notwendigen Rechte verfügen, können darauf zugreifen.

Verweisen einer Bildwebressource aus einer Webseitenwebressource

Alle Webressourcen können relative URLs verwenden, um aufeinander zu verweisen. Im folgenden Beispiel, für die Webseite (HTML)-Webressource new_/content/contentpage.htm, um auf die Bildwebressource new_/Images/image1.png zu verweisen, fügen Sie den folgenden HTML-Code hinzu zu new_/content/contentpage.htm:

<img src="../Images/image1.png" />

Verweisen Sie auf eine Bildwebressource aus einem Formular

Hinzufügen eines Bilds zu einem Formular

  1. Wechseln Sie zum Formular-Editor für eine Tabelle.

  2. Wählen Sie wo in dem Formular Sie das Bild hinzufügen möchten.

  3. Wählen Sie auf der Registerkarte Einfügen und Webressource.

  4. Wählen Sie auf der Registerkarte Allgemein das Webressourcenbild aus, das Sie hinzufügen möchten.

  5. Geben Sie einen Namen für die Webressource an. Sie können auch ein Etikett und einen Alternativtext angeben.

  6. Auf der Registerkarte Formatieren können Sie Folgendes definieren:

    • Die Anzahl der Spalten, die die Bilder verwenden sollen.

    • Die Anzahl der Zeilen, die die Bilder verwenden sollen, oder ob der verfügbare Platz automatisch erweitert werden soll.

    • Die Größe des Bildes, anhand der folgenden Optionen:

      • Strecken
      • Strecken (Seitenverhältnis beibehalten)
      • Original
      • Specific

    • Wenn Sie „Spezifisch“ auswählen, können Sie die gewünschte Höhe und Breite in Pixeln angeben.

  7. Klicken Sie auf OK.

  8. Sie müssen Ihre Änderungen speichern und das Formular veröffentlichen, bevor Benutzer das Bild in dem Formular sehen können.

Verweisen auf eine Bildwebressource von einem Menübandelement oder aus dem Siteübersichtsunterbereich

Verwenden Sie die $webresource:-Direktive zur Angabe eines Webressourcenbild anzugeben zur Verwendung als Symbol im Menüband oder in der Anwendungsnavigation mit SiteMap. Das folgende Beispiel zeigt, wie Symbole für eine Schaltfläche auf dem Menüband angegeben werden.

<Button Id="MyISV.opportunity.form.actions.FlyoutAnchor.Button.1" Image16by16="$webresource:new_/icons/oneIcon16.png" Image32by32="$webresource:new_/icons/oneIcon32.png"/>

Hinweis

Die Verwendung der $webresource:-Direktive fügt eine Lösungsabhängigkeit hinzu, die verhindert, dass die referenzierten Bildwebressourcen gelöscht werden, solange sie von einer anderen Lösungskomponente verwendet werden.

Siehe auch

Webressourcen
Verwendung von Web-Seiten (HTML) Web-Ressourcen
Verwendung von Style Sheet (CSS) Webressourcen
Verwenden der JavaScript-Webressourcen
Verwenden von Daten (XML) Web-Ressourcen
Verwendung von Stylesheet (XSL)-Webressourcen

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).