Komponenten
Beispiele je Komponenten-Paket.
Fertige Support-Seite mit Browser-, Cache- und Verbindungsinformationen.
- Vorbedingungen Was die Anwendung für die Analyse-Seite bereitstellen muss.
- Analyse-Seite Browser-, Storage- und Cookie-Infos für den Support, per Knopfdruck kopierbar.
EditorTemplates und erweiterte DataAnnotations.
- Vorbedingungen Die Grundeinrichtung für alle FMH-Komponenten: Bundles, Layout, AddFmhWidgetOptions.
- Auswahlbox Wert als Karte, optional als Navigations-Link.
- CheckInfo bool-Wert als Haken-/Kreuz-Icon mit Beschriftung.
- E-Mail E-Mail-Adresse als mailto:-Link, optional nur Wert.
- Telefon Telefonnummer als tel:-Link, «Unbekannt» ohne Wert.
- Textarea Mehrzeiliger Text mit Zeilenumbrüchen als <br>.
- Textbox Schreibgeschützte Wert-Darstellung mit Ausrichtung und Hilfetext.
- Datum DateTime? als Datumsfeld, mit Pflichtangabe und Hilfetext.
- Label aus dem ViewModel Beschriftung aus einer Eigenschaft statt aus dem Attribut – gilt für alle Templates.
- Zeile als eigenes Template Formular aus der Konfiguration: Beschriftung, Eingabeart und Pflichtangabe je Zeile aus den Daten.
- BooleanCombobox Ja/Nein-Auswahl mit Combobox, die erst bei „Ja“ erscheint.
- CheckboxList Gruppe von Checkboxen (Mehrfachauswahl).
- ComboboxList Durchsuchbares Auswahlfeld (Single-Select).
- DropdownList Auswahlfeld (Single-Select) mit Liste.
- MultiselectList Auswahlfeld mit Mehrfachauswahl.
- RadioList Gruppe von Radio-Buttons.
- Referenz Alle globalen Skript-Funktionen der Basis auf einen Blick.
- Felder sperren und freigeben Textfeld, Auswahlbox, Radio, Checkbox und Schaltfläche zur Laufzeit schalten.
- Mehrfaches Absenden verhindern Die Prüfung des Standards – und wie man sie je Formular abschaltet.
- Clarity Bindet Microsoft Clarity ein – mit Projektcode und optionalen Tags.
- PasswortStatus Zeigt die Passwortregeln und hakt sie während der Eingabe live ab.
- TabStrip Reiter mit Inhalt, deaktivierbaren Tabs und Klick-Ereignis.
- Text Gibt Text HTML-kodiert aus – auf Wunsch wieder dekodiert.
- Alert Meldung als Bootstrap-Toast, direkt oder nach einem Redirect aus TempData.
- LoadingSpinner Blockierendes Lade-Overlay mit Statustext, über showLoader()/hideLoader() gesteuert.
- HtmlSanitizer Bereinigt HTML aus Eingaben gegen die Whitelist der Anwendung – serverseitig und über einen Endpunkt für den Browser.
Die DataAnnotation-Attribute für die Validierung, als eigenes Paket aus der Basis herausgetrennt.
- Vorbedingungen Was die Anwendung für die Attribute einrichten muss, auch ohne die Basis.
- Referenz Alle Attribute des Pakets auf einen Blick, samt Herkunft der Meldungen.
- CheckboxRequired Verlangt eine angekreuzte Checkbox (z. B. Zustimmung).
- DatumBereich DateTime-Feld mit Bereichsvalidierung (feste Daten, Jahr-Offset, relative Tage).
- Email Prüft eine Zeichenkette gegen ein E-Mail-Format inkl. Top-Level-Domain.
- Ganzzahl Prüft eine Zeichenkette gegen ganze Zahlen (optional mit Minus).
- NoHtml Lehnt Eingaben mit HTML-Code (Tags) ab.
- Nummer Prüft eine Zeichenkette gegen Dezimalzahlen (Punkt oder Komma).
- RequiredIf Pflichtfeld abhängig von einem anderen Feld – je EditorTemplate ein Beispiel.
- RequiredIfContains Pflichtfeld, sobald ein anderes Feld einen von mehreren Werten hat.
- UniqueId Zufälliges Suffix an der HTML-Id, damit mehrfach gerenderte Formulare kollisionsfrei bleiben.
Hält die Anmeldung während der Arbeit gültig und fragt bei Untätigkeit nach.
- Vorbedingungen Was die Anwendung für die Präsenzprüfung einrichten muss, samt Konfiguration und Endpunkten.
- BenutzerPraesenzPruefer Prüft im Hintergrund die Gültigkeit des Auth-Cookies und zeigt bei Untätigkeit den Dialog «Sind Sie noch da?».
Datei-Upload über eine Ablagefläche (Dropzone) samt Validierung.
- Vorbedingungen Was die Anwendung für DokumentListe und IFormFile einrichten muss, samt Endpunkten.
- Anzahl per Ereignis auswerten Das Ereignis documentsuploaded meldet Feldname, Anzahl und Obergrenze.
- Dokumente bearbeiten Umbenennen je Zeile und Mehrfachlöschen über eine Auswahlspalte.
- Dokumentliste (Grundfall) Tabelle der zugeordneten Dokumente mit Download und Löschen, darunter die Ablagefläche.
- Dokumenttyp im Dialog Der Upload-Dialog verlangt zusätzlich einen Dokumenttyp aus einer Auswahl.
- Download-Url zur Laufzeit Eigene Download-Route als Vorlage mit dem Platzhalter {dokumentId}.
- Datei-Upload (Grundfall) Ablagefläche für Dateien; überträgt sofort und sammelt die Ids im Formular.
- Dokumenttyp im Dialog Der Upload-Dialog verlangt zusätzlich einen Dokumenttyp aus einer Auswahlliste.
- Zwei Upload-Bereiche Zwei Felder, zwei Dropzones, zwei Endpunkte in einem Formular.
- Dropzone sperren und freigeben Ablagebereich zur Laufzeit schalten – über disableDropzone und enableDropzone.
- Upload-Url zur Laufzeit ergänzen Parameter an die Adresse der Dropzone hängen – über window.<Feldname>.options.url.
Die DataAnnotation-Attribute des Datei-Uploads, als eigenes Paket aus FileUpload herausgetrennt.
- Vorbedingungen Was die Anwendung für die Upload-Attribute einrichten muss.
- Referenz Die drei Attribute des Pakets auf einen Blick, samt Herkunft der Meldung.
- Maximale Anzahl Dateien (IFormFile) Obergrenze aus einer Eigenschaft des ViewModels (MaxUploadableFiles).
- Pflicht-Upload (DokumentListe) Ohne zugeordnetes Dokument ist das Formular ungültig (DocumentUploadRequired).
- Pflicht-Upload (IFormFile) Ohne übertragenes Dokument ist das Formular ungültig (DocumentUploadRequired).
Ui-Controls über das Fluent-Builder-Pattern.
- Vorbedingungen Was die Anwendung für die Bausteine der Infrastruktur einrichten muss, etwa für die Fehlerseiten.
- Fehlerseiten Fertige Seiten für 400/401/403/404/500 samt Einrichtung über AddSiwfErrorPages und UseSiwfErrorPages.
- PartialBuilder Rendert eine Razor-Partial als IBuilder (z. B. Head-/Body-Includes).
- Button Schaltflächen, Icon-Buttons, Links und Async-Status.
- Dialog Bootstrap-Modal-Dialoge mit Grösse, Buttons und modalem Verhalten.
- Dropdown-Button Auswahl-Schaltfläche mit Menü, Filter und selbst absendendem Formular.
- Formular zurücksetzen ButtonType.DeleteForm leert ein Formular gezielt – mit Ausnahmen und Standardwerten.
- Icon Material-Icons mit Farbe, Tooltip und deaktiviertem Zustand.
Likertskala für Selbst- und Fremdeinschätzung sowie die Frage-Antwort-Beurteilung durch zwei Delegierte.
- Vorbedingungen Was die Anwendung für LikertSkala und FrageAntwort einrichten muss, samt Endpunkten.
- Referenz Modellklassen, Rollen, Endpunkte und das Browser-Ereignis auf einen Blick.
- Ereignis FrageAntwortStatus Einstieg 3 Auf eine gespeicherte Antwort reagieren – mit den Metadaten des Endpunkts.
- Grundfall Einstieg 1 Fragenliste, eigenes Formular je Frage und der Endpunkt dahinter.
- Rollen Einstieg 2 AktuelleRolle entscheidet, wer bearbeitet und wer nur liest.
- Referenz Alle Builder-Methoden, die Modellklassen und die Werte von Editable.
- Erfüllungsgrad Einstieg 3 Geforderte Stufe je Zeile, Prozentwerte im Kopf der Skala.
- Grundfall Einstieg 1 Spalten, Zeilen und Bind – der kleinste vollständige Aufbau samt POST.
- Mehrere Skalen gruppieren LikertSkalaGroup rendert mehrere Skalen als einen Block, konfiguriert über das Modell.
- Selbst- und Fremdeinschätzung Einstieg 2 AssessmentType, die Legende und der schreibgeschützte Modus.
- Texte um die Skala Header, Introduction, Footer, Spaltenbreite und Überschriften je Zeile.
Die Modelle der LikertSkala und der FrageAntwort, als eigenes Paket aus Kompetenzen herausgetrennt.
- Vorbedingungen Was ein Projekt einrichten muss, das nur die Modelle bezieht.
- Referenz Die Modelle auf einen Blick, wo sie laufen und warum es keine eigenen Beispiele gibt.
Dokumentenbetrachter für PDF und Bilder – als Element der Seite oder als Dialog.
- Vorbedingungen Was die Anwendung für den Viewer einrichten muss.
- Clientseitiger Aufruf Leeres Skelett, Dokument zur Laufzeit über initDocumentViewer.
- Darstellung der Formate Der Regelfall, umschaltbar über PDF, Bild, defekte Datei und nicht unterstütztes Format.
- Dialog über Links Vorschau im Modal, geöffnet über data-siwf-documentviewer-type.
- Zweispaltig mit Sachdaten ERP-Muster: links die Sachdaten, rechts die Belegvorschau.
Formatierter Text über den Quill-Editor, abgesichert durch den HtmlSanitizer.
- Vorbedingungen Was die Anwendung für den Editor einrichten muss, samt Freigabe von Links.
- Richtext Quill-Editor an einer string-Eigenschaft – im Grundfall und als Pflichtfeld.
Der Template-Name UiEditor.RichText, als eigenes Paket ohne Abhängigkeiten aus RichText herausgetrennt.
- Vorbedingungen Was ein Projekt einrichten muss, das nur den Template-Namen bezieht.
- Referenz Der Inhalt des Pakets, wo er läuft und warum es keine eigenen Beispiele gibt.
Datagrid auf Basis von DataTables – Spalten, Aktionen und Zeilenverhalten über ein Fluent-API.
- Vorbedingungen Was die Hostanwendung einrichten muss, damit die Tabelle läuft.
- Referenz Alle Builder- und Spalten-Methoden auf einen Blick.
- Grundfall AjaxDataUrl und der Endpunkt dahinter – mit Blättern, Suchen und Seitengrösse.
- Childrows nachladen ChildForAsync holt den Inhalt der Childrow erst beim Aufklappen.
- Aktion vor dem Ausführen abfangen (gridButtonClick) Route-Werte je Zeile anhängen oder die Aktion mit preventDefault anhalten.
- Auf geladene Daten reagieren (griddataloaded) Die Antwort des Endpunkts mit den Zählwerten aus GridDataSource.
- Nach einer Aktion nachziehen (gridAsyncButtonClicked) Der Postback im Hintergrund ist durch und die Tabelle neu geladen.
- Zeilen auszeichnen (gridRowCreated) Die Zeile abhängig von ihren Daten auszeichnen, statt über eine Zeilenbedingung.
- Zellen auszeichnen (gridCellCreated) Der Ersatz für CellAttributes und EmptyColumnChar.
- Feste Filterwerte in der Adresse Werte, die beim Aufbau der Seite feststehen, über ToRouteValueDictionary an den Endpunkt.
- Suchfeld anpassen (DataTable.ext.classes) Klassen von Suchfeld und Seitengrössen-Auswahl per Skript überschreiben.
- Suchfeld über der Tabelle (EnableSearchBox) Das eingebaute Suchfeld; der Begriff kommt im Endpunkt in Search an.
- Suchformular über der Tabelle Eigene Suchfelder gehen mit jeder Abfrage mit; neu geladen wird über gridReload.
- Spalten aufbereiten Fertige Werte aus der Datenquelle statt Format, Custom und EmptyColumnChar.
- Aktionen ohne Seitenwechsel Entfernen, Dialog und Umschalten als Postback im Hintergrund, Antwort als JSON.
- Aktionen sperren und ausblenden DisabledClientExpression, VisibleClientExpression und DisableRowClientExpression statt Disabled und Visible.
- Mehrfachauswahl (bulkeditchange) Auswahlkästchen im Formular, Feldname aus ClientDataKey, Auswahl nur auf der angezeigten Seite.
- Zeilenklick Ganze Zeile anklickbar – auch nach dem Blättern, ohne Zutun.
- Grundfall Einstieg 1 BindTo und Columns – der kleinste vollständige Aufbau.
- Childrow-Spalte darstellen Symbol, Text oder beides in der Aufklapp-Spalte.
- Childrows Aufklappbare Untertabelle je Zeile über ChildFor.
- Childrows offen halten Erste Childrow offen starten, weitere offen lassen.
- Grid in einem Formular NestedForm gegen verschachtelte Formulare, Aktion als Submit-Button.
- Ohne Daten Leere Liste mit eigenem Hinweistext statt der Vorgabe.
- Benutzerdefinierte Spalte Freies HTML in der Zelle, sortiert über SortByKey.
- Spalten formatieren Einstieg 2 Format, Breite, Sichtbarkeit, Tooltip und getrennte Sortierung.
- Zellen auszeichnen Attribute an der einzelnen Zelle, Symbol für leere Zellen.
- Aktionen je Zeile Einstieg 3 Ansehen, Bearbeiten, Entfernen und eigene Aktionen über FmhGrid.
- Aktionen sperren und ausblenden Disabled, Visible und Property je Zeile entschieden.
- Dialog-Aktion Rückfrage im Dialog des Grids statt sofortiger Navigation.
- Umschalt-Aktion Schaltfläche mit zwei Zuständen über ToogleButton und ToggleStatus.
- Mehrfachauswahl (bulkeditchange) Auswahlkästchen im Formular, Auswertung über bulkeditchange.
- Zeilen sperren DisableRow sperrt Zeilen fachlich samt ihrer Aktionen.
- Zeilen umsortieren (gridrowmoved) Drag & Drop der Zeilen, Auswertung über gridrowmoved.
- Zeilenklick Ganze Zeile anklickbar, Ziel über data-row-click-default.
Mehrstufige Erfassung mit Schritt-Navigation, Entwurfsspeicherung und eigener Validierungssteuerung.
- Vorbedingungen Was die Anwendung für Wizard und WizardNavigation einrichten muss, samt Controller je Schritt.
- Fünf Schritte Der Regelfall: Kopfbereich, Navigationsleiste und gesteuerte Validierung.
- Viele Schritte Zwölf Schritte – wie sich die Schritt-Navigation bei vielen Einträgen verhält.
- Zustände und gesperrte Navigation WizardStepState von erledigt bis fehlerhaft, dazu StepNavigationDisabled und die clientseitige Freigabe.