Entwurfsrichtlinien für Schleifenkomponenten

  • Artikel

Microsoft Loop Komponenten sind live umsetzbare Produktivitätseinheiten, die synchron bleiben und sich frei in Microsoft 365-Apps bewegen. Es umfasst die Möglichkeit, Schleifenkomponenten zu erstellen, indem Sie eine vorhandene adaptive Karte in eine Schleifenkomponente oder eine neue adaptive Karte-basierte Schleifenkomponente erstellen.

Schlüsselfeatures der Schleifenkomponente

Live: Ihre adaptive Karte muss sich selbst aktualisieren, wenn die Karte geladen wird, z. B. beim Öffnen einer E-Mail oder eines Chats, um die neuesten Informationen widerzuspiegeln.

Eingebettet: Adaptive Karten sind eingebettet, sodass Sie nichts Spezifisches benötigen.

Umsetzbar: Schleifenkomponenten ermöglichen es dem Benutzer, Maßnahmen zu ergreifen, um einen Flow innerhalb der Komponente selbst abzuschließen. über das einfache Anzeigen von Informationen oder das Öffnen eines Browsers hinaus. Wenn es sich bei Ihrer adaptiven Karte um eine reine Ansicht handelt, suchen Sie nach Möglichkeiten, um sie umsetzbar zu machen, da dies ein Kernelement Karte ist, um Benutzer zu begeistern. Stellen Sie sicher, dass eine adaptive Karte mit nur sichtgeschützter Benutzeroberfläche nicht in eine Schleifenkomponente wechselt. In diesem Fall darf sie nur eine adaptive Karte bleiben.

Hinweis

Bestimmte Benutzerberechtigungen oder -modi Ihrer Komponente sind möglicherweise nicht handlungsfähig, aber die allgemeinen Fälle müssen umsetzbar sein.

Sie können Ihre adaptive Karte umsetzbar machen, indem Sie eine der folgenden Aktionen einschließen:

  • Genehmigen einer Spesenabrechnung
  • Kommentar hinzufügen
  • Aktualisieren eines Datums
  • Aktualisieren des Preises, z. B. Dollarbetrag
  • Ändern einer Zuweisung oder eines status Werts
  • Hinzufügen oder Aktualisieren von Daten

Portabel: Durch hinzufügen des URL-Attributs nach Bedarf im Entwicklerleitfaden wird sichergestellt, dass Ihre Komponente überall dort live kopiert werden kann, wo die Adaptive Card-basierte Schleifenkomponente unterstützt wird.

Eigenschaft Funktion
Live Die neuesten Informationen werden im Karte aufgefüllt. Wenn mehrere Instanzen vorhanden sind, bleiben diese synchronisiert, während Updates vorgenommen werden.
Eingebettete Karten können in Dokumenten und Unterhaltungen platziert werden, die vom restlichen Inhalt getrennt sind.
Umsetzbare Aufgaben können inline ausgeführt werden.
Tragbar Komponenten können in der Microsoft 365-App funktionieren, die Loop-Komponenten unterstützt.

Elemente der Schleifenkomponente

Eine auf adaptiven Karten basierende Schleifenkomponente umfasst den Textkörper, den Header und den Rahmen.

Screenshot: Hervorhebung des Abstands auf einem Karte, der zum Textkörper, zur Kopfzeile und zum Rahmen gehört.

Schleifenkomponentenelement Entwickler bietet Plattform bietet
Body Vollständig von Ihnen kontrollierte Inhalte Rendern und Formatieren von Steuerelementen basierend auf Ihrem Code.
Header Symbol und Name Elemente und Layout sind Standard und werden von der Plattform bereitgestellt.
Border – Standardrahmen für alle Schleifenkomponenten.

Schleifenkomponententext

Der Loop-Komponentenkörper macht Ihre Komponente einzigartig. Sie können Ihren Benutzern eine positive Erfahrung bieten und die Nutzung und Bindung erhöhen, indem Sie eine Komponente erstellen, die die Loop-Komponentenattribute verkörpert und einen Kundennutzen bietet.

Die Details des Komponententexts werden durch die Besonderheiten der Anforderungen und Szenarien Ihrer Benutzer bestimmt.

Infografik zeigt die UX-Elemente eines Schleifenkomponententexts.

Im Folgenden sind die bewährten Methoden für einen Schleifenkomponententext aufgeführt:

Fügen Sie keine separate Schaltfläche zum Öffnen im Browser hinzu.

Der Loop-Komponentenheader bietet eine Standardmethode zum Öffnen einer browserbasierten Ansicht der Komponente basierend auf Ihrer URL. Daher ist es nicht erforderlich, Ihrer Komponente eine separate Schaltfläche für Aktionen wie Details anzeigen oder Im Web öffnen hinzuzufügen.

Sie können Schaltflächen oder Links für spezifischere Ansichten hinzufügen, z. B . Verwandte Elemente anzeigen. Stellen Sie nach Möglichkeit die erforderlichen Informationen und Interaktionen innerhalb des Karte bereit.

Fügen Sie keinen doppelten Header oder Rahmen hinzu.

Alle Loop-Komponenten verfügen über einen Standardheader und einen Rahmen. Stellen Sie sicher, dass der Code der adaptiven Karte den Header und den Rahmen nicht duplizieren darf. Sie können einen elementspezifischen Titel für Ihre Komponente haben, stellen Sie jedoch sicher, dass app-Name und -Symbol nicht identisch sind.

Schleifenkomponentenheader

Die Plattform stellt den Komponentenheader bereit und enthält Standardelemente wie App-Logo, App-Name, freigegebener Speicherort und Kopieren.

Infografik zeigt die UX-Elemente in einem Loop-Komponentenheader.

Leistungsindikator Beschreibung
1 App-Logo:Vollfarbiges App-Logo Ihrer App.
2 App-Name: Vollständiger Name Ihrer App.
3 Freigegebene Speicherorte (Schleifensteuerung)
4 Kopierkomponente

Der App-Name wird aus dem Komponentenvertrag gezeichnet. Es wird empfohlen, einen präzisen Namen für Ihre App zu verwenden.

Das App-Logo wird aus dem Komponentenvertrag gezeichnet. Stellen Sie sicher, dass das bereitgestellte Logo sowohl auf hellem als auch auf dunklem Hintergrund funktioniert, da dasselbe Objekt für helle, dunkle und kontrastreiche Designs in Microsoft Teams verwendet wird.

Schleifenkomponentenrahmen

Der Komponentenrahmen trennt Ihre Komponente von dem Inhalt um sie herum. Es hilft Benutzern zu verstehen, dass die Loop-Komponente live und von den umgebenden Inhalten wie E-Mail oder Chat getrennt ist.

Der Rahmen wird automatisch angezeigt.

Nächster Schritt

Komponenten für adaptive Kartenbasierte Schleifen