COMPAREX AG
InfoPath Designer 2013: Schritt-für-Schritt-Anleitung für ein fertig einsetzbares SharePoint Layout

InfoPath Designer 2013: Schritt-für-Schritt-Anleitung für ein fertig einsetzbares SharePoint Layout (Teil 1 von 2)

Der InfoPath Designer 2013 ist und bleibt das Mittel der Wahl zur Erstellung von SharePoint-Formularen – auch für SharePoint 2016. Wir verraten Ihnen, wie Sie mit dem InfoPath Designer 2013 und ohne Code ein universelles Layout für Ihren SharePoint entwickeln, dass Sie sofort einsetzen können.

Ein Beitrag von Daniel Mönch, SharePoint Consultant

Inhaltsverzeichnis

  1. InfoPath als Formular für SharePoint Listen
  2. InfoPath als Formular in SharePoint Formularbibliotheken
  3. No-Code Ansatz
  4. Anforderungskatalog und InfoPath Designer
  5. InfoPath: Layout Best Practice (Teil 1 von 2)
  6. Ausblick auf Teil 2

InfoPath ist nach wie vor die erste Wahl als DAS Microsoft Formulartool in SharePoint. Die weite Verbreitung und der Einsatz in der beliebten Plattform SharePoint lässt mit Blick in die Zukunft aber Unklarheiten zu einem Nachfolgeprodukt aufkommen, da der InfoPath Support seitens Microsoft zum Jahr 2026 (vormals 2023) auslaufen wird. Dennoch verbleiben damit noch einige Jahre, in denen InfoPath als Formulartool für SharePoint seinen festen Platz im System haben wird. InfoPath wird weiterhin auch in SharePoint 2016 voll unterstützt, auch wenn es vorerst kein InfoPath 2016 Designer geben wird.

Es sind zahllose InfoPath Formulare im Einsatz und es werden auch weiterhin neue entwickelt werden. InfoPath als Formulartool wird also nicht so schnell vom Markt entschwinden, wie vielleicht angenommen wird. Zwar gibt es Drittanbieterlösungen, auf die man umschwenken könnte, jedoch verfügen diese über zumeist gänzlich andere Herangehensweisen und Techniken zur Abbildung gleichwertiger Prozesse. Dies wiederum hat zur Folge, dass alle vorhandenen Formulare neu entwickelt werden müssten, was für viele Anwender einen enormen Aufwand bedeuten würde. Also warum bleiben Sie nicht einfach bei InfoPath und warten noch ein wenig?

Erfahren Sie mehr über InfoPath und SharePoint 2016

Formulare mit SharePoint 2016: Was passiert mit InfoPath? Welche Alternativen gibt es?

Beitrag lesen »

Microsoft ist sich wohl bewusst, dass InfoPath nicht sang und klanglos gestrichen werden kann und erste Nachfolger waren ja auch schon angekündigt, jedoch wieder zurückgezogen worden. Der nun nochmals verlängerte Auslauf des Produktsupports lässt vermuten, dass es hoher Wahrscheinlichkeit zu einer Lösung ohne vollständige Neuentwicklung bestehender Formulare kommen wird.

Aus meiner eigenen jahrelangen Erfahrung mit InfoPath Formularentwicklungen und der Tatsache, dass InfoPath auch fester Bestandteil der Funktionalität von SharePoint 2016 sein wird, möchte ich in einer Beitragsserie konkrete und bewährte Vorgehensweisen zur Erstellung und Weiterentwicklung von InfoPath Formularen geben, die Sie sofort einsetzen können. Die Serie wird sich auf den InfoPath Designer 2013 beziehen, der auch im SharePoint 2016 das Mittel der Wahl sein wird.

InfoPath als Formular für SharePoint Listen

Die einfachste Form InfoPath im SharePoint zu nutzen, ist eine vorhanden Liste des SharePoint mit dem InfoPath Designer zu bearbeiten und nach Einbringung der gewünschten Funktionalität zu veröffentlichen. Hierbei wird einfachen Anwendungsfällen bereits genüge getan, jedoch kann InfoPath mehr.

InfoPath als Formular in SharePoint Formularbibliotheken

Den erweiterten Funktionsumfang nutzen Sie, wenn Sie Ihr Formular vollständig von der grünen Wiese auf neu entwickeln. Für komplexe Anforderungen ist dies unabdingbar. Die so entwickelten Formulare sind so flexibel, wie Sie es wünschen. In dieser Form haben Sie auch die Möglichkeit, ein so entwickeltes Formular als wiederverwendbare Solution im SharePoint einzubringen. Für voll vertrauenswürdige Formulare mit Code Behind im Formular ist dies generell Pflicht.

No-Code Ansatz

InfoPath kann den Großteil seiner Funktionalitäten auch ohne zusätzlichen Code bereitstellen, was jedoch Erfahrungen mit den Möglichkeiten des Produkts voraussetzt und für den Beginner zumeist im Verborgenen liegt. Diese Beitragsserie beleuchtet ausschließlich Tipps und Tricks zum „No-Code“ Ansatz. Und hier ist auch gleich der erste Tipp: Wann immer es geht, verzichten Sie auf zusätzlichen Code und betrachten Sie Ihre Anforderungen hinsichtlich der Möglichkeiten der Umsetzung ohne Code Behind, also mit den Bordmitteln von InfoPath. Ist dies möglich? Dann verzichten Sie auf Code Behind!

Anforderungskatalog und InfoPath Designer

Zu Beginn besitzen Sie optimaler Weise klare Anforderungen und Anwendungsfälle, für die Sie ein Formular entwickeln (lassen) müssen. Diese gilt es nun in ein funktionales Formular umzusetzen. Eine klare Empfehlung ist, diesen Arbeitsschritt zu planen.

Grundlegend sollte die Planung vor dem ersten öffnen des InfoPath Designers erfolgen und mindestens folgende Punkte einschließen:

  • Erstellen Sie ein Prozessmodell über die Anwendungsfälle (Use Cases), mit dem Sie die einzelnen Schritte des Prozesses gut gegeneinander abgrenzen können.

  • Erfassen Sie in einem Datenmodell, welche Eingabe- und auch Anzeigefelder Sie für jeden dieser Prozessschritte benötigen.

  • Sie benötigen ein Berechtigungsmodell? Ergänzen Sie das Prozess- und Datenmodell mit den erforderlichen Berechtigungen hinsichtlich Wer? (Person/Gruppe) darf Was? (Anwendungsfall) und vor allem Wann? (Prozessschritt).

  • In einem mehrstufigen, formularbasiertem Prozess über viele Anwendungsfälle hinweg gliedern Sie in Ihre Modelle Ebenen zur späteren Abschnittsbildung. Das empfiehlt sich vor allem bei komplexen Anwendungsszenarien.

  • Sie benötigen neben der direkten Benutzerangabe (dynamische) Daten von externen Quellen? Nehmen Sie die Details hierzu in Ihrer Planung auf.

Haben Sie die initiale Planung abgeschlossen, sollte sich ein recht klares Bild über Ihre benötigten Felder ergeben, die Sie nun als „interne Datenquelle“ im InfoPath Designer anlegen können. Doch bevor Sie beginnen, können Sie späteren aufwändigen Nachformatierungen Ihres Formular-Layouts vorbeugen, wenn Sie sich im Vorfeld um ein klares Layout bemühen

InfoPath: Layout Best Practice (1 von 2)

Im ersten Teil der Serie erstellen wir uns ein universelles Layout für InfoPath Formulare und möchten dabei folgendes erreichen:

  1. Wiederverwendbare Layout-Abschnitte für Eingabefelder

  2. Die Möglichkeit Fehleingaben am Feld zu signalisieren ohne die Standardfunktion der Pflichtfeldeingabe zu nutzen. (Der Standard ist bei komplexen Szenarien meist unbrauchbar)

  3. Button-Leiste zum Speichern, Abrechen, etc.

  4. Harte Einschränkung, dass der Anwender nur mit den dargebotenen Buttons das Formular bedienen und auch verlassen kann.

Die nachfolgenden Ausführungen erklären Ihnen Schritt für Schritt, wie Sie in kurzer Zeit zu Ihrem universellen Layout gelangen. Außerdem helfen Sie Ihnen, ein grundlegendes Problem zu umgehen, welches darin besteht, dass Sie am Ende der Formularentwicklung an vielen Stellen die Formatierung für Ihr Layout nachbessern müssen, weil Linien nicht übereinander liegen, Teilungen nicht homogen gesetzt sind, Innen-Abstände uneinheitlich aussehen, und im schlechtesten Fall das gesamte Layout immer leicht verrutscht aussieht. Dies in größeren Formularen auszubessern kostet Kraft und Zeit, die Sie nicht wirklich opfern müssen.

Öffnen Sie den InfoPath 2013 Designer und starten Sie mit der Vorlage „Leeres Formular“.

Löschen Sie gleich als nächstes alles aus der visuellen Anzeige, so dass nur noch eine leere Seite erscheint:

SharePoint InfoPath Designer leere Seite

Ziehen Sie den Ordner „meine Felder“ per Drag und Drop in den Layout-Bereich und entfernen Sie alle Leerzeilen aus dem Abschnitt:

SharePoint InfoPath Designer Leerzeilen löschen

Stellen Sie die Eigenschaften für diesen Abschnitt folgend ein:

InfoPath Designer Eigenschaften einstellen
Höhe und Breite: 5px und 630px
Textabstände und Ränder: alle 0px

Erzeugen Sie eine Tabelle mit nur einer einzelnen Zelle im obigen Abschnitt und stellen Sie die Tabelleneigenschaften wie folgt ein:

InfoPath Designer Tabelleneigenschaften

Zeilenhöhe: 5px

InfoPath Tabellen Zeilenhöhe

Spaltenbreite: 630px (für passenden Din A40 Hochkant-Druck)

InfoPath Designer Spaltenbreite einstellen

Vertikale Ausrichtung: Oben
Textabstände: 0px

Als Ergebnis erhalten Sie folgendes Layout, welches selbst keine Rahmengröße oder Innenabstände besitzt:

InfoPath Tabellen Layout

Teilen Sie dann die Tabelle entsprechend in Spalten, um ein einspaltiges und zweispaltiges Layout zu erzeugen. Hierbei planen Sie bereits ein, dass Sie jeweils einen Feldtitel, das Eingabefeld selbst und einen Platzhalter zur Anzeige von Fehleingaben in Form eines roten Ausrufezeichens bereitstellen wollen.

Die folgende Abbildung zeigt die Spaltenteilung und Pixelbreiten der einzelnen Zellen. Die schmalste Zelle hat 10px und ist bewusst nicht auf einen Innenabstand von 10px zur benachbarten Zelle gesetzt:

Tabelle Spaltenaufteilung

Zur Signalisierung von Fehleingaben wird ein Ausrufezeichen verwendet, welches Sie mittels des Datentyps „fx Berechneter Wert“ in das Layout einbringen. Es wird bewusst keine Grafik verwendet, da wir an dieser zukünftig keine Regeln anbringen können, die wir aber vorsehen wollen. Fügen Sie in einer der Zellen mit 20px Breite den Datentyp „fx Berechneter Wert“ ein und stellen Sie folgende Eigenschaften ein:

InfoPath Eigenschaften für Berechneter Wert

Option Text: ! (ein Ausrufezeichen eintragen)

Infopath Tabelleneigenschaften

Breite: 12px
Textabstände und Ränder: alle 0px, außer Textabstand links und rechts, je 1px und Rand oben 2px

Je nach Schriftart und Schriftgröße, die Sie einsetzten, müssen Sie ggf. Anpassungen an den Maßen von „fx Berechneter Wert“ vornehmen. In unserem Beispiel verwende ich Arial, 10px, bold.

Weiterhin stellen Sie Rahmen und Schattierung auf eine Hintergrundfarbe ein und die Schrift auf bspw. weiß:

Infopath Tabellen Rahmen und Schattierungen

Schattierung: Rot als Signalfarbe

Kopieren Sie den so erstellten berechneten Wert in alle Zellen mit 20px Breite:

Infopath Tabelle

Im Moment konzentrieren wir uns nur auf das zukünftige Layout und belassen die signalgebenden Ausrufezeichen daher einfach im Layout und versehen diese nicht mit Regeln.

Die spätere Befüllung mit Feldern ermöglicht Ihnen danach folgende Feldverteilung, die beliebig durch Zeilenteilung (oder -Löschung) vervielfältigt (angepasst) werden kann:

Infopath Designer Feldverteilung
Falls Sie mit vielen Feldern arbeiten müssen, lohnt es sich, diese in Formularabschnitten zu organisieren. Diese Abschnitte sollten für den Anwender natürlich gut erkennbar sein und wir können dies im Layout hervorheben und auch vorbereiten:

Erstellen wir uns zunächst eine Kopie unseres existierenden Abschnitts und behalten die einspaltige Datenzeile (löschen Sie die anderen Zeilen einfach weg). Fassen Sie die linken Zellen einfach zusammen und entfernen deren Inhalt, so dass die rechte 20px breite Zelle bestehen bleibt und formatieren Sie die linke Zelle mit Farbe im Hintergrund und Beschriftung im Vordergrund (ignorieren Sie die Duplikat-Warnungen einfach). Der Titel ist dann etwas zu linksbündig. Also legen wir zusätzlich für alle ganz links am Formularrand liegenden Zellen einen Linksabstand von 5px fest:

Infopath Designer Titel eingeben

Fehlt noch eine Buttonleiste. Duplizieren Sie den Abschnitt mit den Feldern und erzeugen Sie sich davon folgenden Abschnitt und fügen Buttons ein, die Sie wiederum Ihren Wünschen entsprechend formatieren:

Buttonleiste unter Formular

Als Ergebnis haben Sie jetzt 3 Layout-Bausteine, die Sie entsprechend neuer Anforderungen einsetzen können. Um dies effektiv zu tun, empfiehlt es sich, die aktuelle Ansicht in „Template“ umzubenennen:

InfoPath Layout Bausteine

Dann legen Sie eine neue leere Ansicht als „Standardformularseite“ an und legen diese als Standardansicht fest:

InfoPath Standardformularseite

Entfernen Sie aus der Layout-Anzeige Ihrer neuen Standardansicht zusätzlich den Inhalt und fügen Sie nun nach Ihren Bedürfnissen das Formular aus den Bausteinen der Ansicht „Template“ ein. Erweitern Sie die Ansicht „Template“ ggf. um einen wiederverwendbaren Abschnitt für den Formularkopf, mit Logo und Titel oder weiteren für Sie geeigneten Bausteinen, die Sie oft einsetzen.


Natürlich sollten Sie auch die grundlegendenden Formularoptionen berücksichtigen, um die volle Kontrolle über den Ablauf Ihrer Formularlogik zu behalten. Wollen Sie, dass Ihre Anwender das Formular nur mit den von Ihnen dargebotenen Buttons verlassen können, dann deaktivieren Sie in der Kategorie „Webbrowser“, im Menü „Datei > Formularoptionen“ die Option „InfoPath-Befehle im Menüband anzeigen“:

InfoPath Formularlogik

Speichern Sie sich das InfoPath Projekt als XSN Datei ab und verwenden Sie es zukünftig für neue Formulare zur Erzeugung folgender beispielhaft dargestellter Formularseite:

Infopath fertige Formularseite

Ausblick auf Teil 2

Im zweiten Teil der Serie widmen wir uns Themen der Dynamik bei der Eingabe durch den Anwender und zeigen Ihnen, wie einfach Sie sich die Funktionen von Regeln an Abschnitten und Eingabefeldern hierfür zunutze machen können, um mehr aus InfoPath herauszuholen:
 

  • Volle Kontrolle über Fehleingabenprüfung und Pflichtfelder

  • Abbruch mit doppelter Bestätigung: Wollen Sie wirklich … ?

  • Mehr Übersicht oder mehr Details? Überlassen Sie diese Entscheidung doch dem Anwender!

  • Navigation durch mehrseitige Formulare (Vor- und Zurück Buttons)

  • Wie setzt man die Abbildung von Registerkarten in Formularen um?

Diesen Artikel teilen

Artikel vom:
10.03.2016

geschrieben von:

TAGS:
Formular-Layout, InfoPath, Tutorial

Thema:
 

Kommentare

  • BBB kommentierte vor 3 Monaten
    Hallo, der erste Teil ist wirklich sehr gelungen. Bin schon auf den zweiten Teil sehr gespannt. Wenn er denn kommt :-( Viele Grüße

Kommtar abgeben

© COMPAREX AG
Zurück nach oben