Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Followers 0
Login Register as User

SharePoint Web-Elemente: Fabric React und Fabric Core

17.03.2020 (👁7547)

SharePoint Web-Elemente: Fabric React und Fabric Core


Unter SharePoint empfiehlt es sich, dass man für Microsoft Office 365 und SharePoint übliche Aussehen über vordefinierte Komponenten verwendet.

Mit Fabric React werden Frontend Elemente eingebaut wie Listen, Buttons, HTML-Elemente, Text-Boxen..

Mit Fabric Core werden über CSS Farben, Icons und Fonts eingebaut.  

Die SharePoint Fabric UI Elemente findet man unter:

HTML, CSS, Controls, WebParts


hier eine kleine Liste der Web-Elemente für SharePoint


The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person

Facepile with size, presence, and fade in options


Basic List

List of 5000 variable height items

  public render(): JSX.Element {

    const { items = [] } = this.state;

    const resultCountText = items.length === this._originalItems.length ? '' : ` (${items.length} of ${this._originalItems.length} shown)`;


    return (

      <FocusZone direction={FocusZoneDirection.vertical}>

        <TextField label={'Filter by name' + resultCountText} onChange={this._onFilterChanged} />

        <List items={items} onRenderCell={this._onRenderCell} />





Zu beachten ist hier: dass das Filter-Feld bei der Eingabe dynamisch filtert




DetailsList - Custom Item Columns

Rendering custom item columns with sorting



Mit der DocumentCard kann man eine Datei mit einem Preview Icon darstellen als Div-Element.

A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions.



Liste mit Gruppierungs-Headern, welche sich erweitern und reduzieren lassen.

Allows you to render a set of items as multiple lists with various grouping properties.



Mit der HoverCard wird eine Liste dargestellt, bei welcher über einer Zeile eine Karte als Hover-Element geladen wird, welche das Element im Detail als Vorschau beinhalten kann.

Expanding HoverCard using Target, DirectionalHint and custom HotKey



Personas are used for rendering an individual's avatar and presence. They are used within the PeoplePicker components.

Rendering custom coin






        imageAlt="Ted Randall, status is available at 4 PM"