Benutzeroberfläche des Formular Designers

Formular Mapping

module guide 889 0

Im Register Formular Mapping legen Sie fest, wie eine XML-Eingangsnachricht auf den XML-Request abgebildet wird, aus dem das Formular zur Anzeige in der INUBIT Workbench oder Browser erzeugt wird.

Siehe Formular-Mapping erstellen 1: Beschriftungen für Eingabefelder einfügen

  1. Abbildungstabelle

    Zeigt das XSLT-Stylesheet an, das Sie zum Abbilden der XML-Eingangsnachricht auf die XML-Response erstellen:

    • XML-Quelle

      Enthält Werte, XPath-Ausdrücke und Funktionen. Diese stammen meist aus dem Bereich XML-Quelle und werden per Drag’n’Drop in die Spalte gezogen.

    • XML-Ziel

      Enthält XSLT-Anweisungen (Elemente und Attribute), die das Ergebnis der Drag’n’Drop-Aktionen im Designer sind.

  2. Eingabe

    • Eigenschaften

      Zum Festlegen der Eigenschaften des Formular-Elements, das im Register Designer oder im Bereich XML-Ziel ausgewählt ist.

      Eingaben werden mit der Eingabetaste abgeschlossen. Standardwerte stellen Sie über das Kontextmenü wieder her.

      Siehe Eigenschaften von Formular-Elementen

    • Quelle

      Zum Laden und Anzeigen der Eingangsnachricht.

  3. Ausgabe

    • Designer

      Zum Erstellen des Formulars per Drag’n’Drop aus der Werkzeugleiste in den Designer.

      Siehe Formular-Elemente in der Werkzeugleiste

    • Ergebnis

      Zeigt das Ergebnis nach dem Testen des Mappings an.

    • Templates

      Enthält alle Formular-Elemente als XML.

Mapping der Quelle auf Elemente im Designer

  • Beim Mappen eines Quellelements auf ein Designerelement, das ein Label-Attribut enthält, können Sie wählen, ob Sie den Namen oder den Wert des Quellelements übernehmen wollen.

  • Beim Mappen auf Designer-Elemente erscheint derselbe Dialog, wie beim direkten Mappen in die Mapping-Tabelle. Hier können Sie entscheiden, ob Sie for-each, if, value-of oder copy verwendet werden wollen. Somit kann ein mehrfach vorkommendes Elemente mit for-each direkt auf die Gruppe im Designer gemappt werden können.

Absolutes Layout im Designer

  • Elemente können direkt zwischen Gruppen mit verschiedenem Layout per Drag-and-Drop hin- und hergezogen werden, ohne sie zuvor in eine Gruppe platzieren zu müssen.

  • Im absoluten Layout werden an der rechten oder unteren Kante des Elements bzw. an der rechten unteren Ecke Doppelpfeile (←→) zum Skalieren des Elementes angeboten.

    In allen anderen Layouts erscheinen diese Doppelpfeile, wenn Sie die Umschalttaste (Shift) drücken, bevor Sie die Maus über das Element bewegen.

  • Standardmäßig rasten Elemente beim Bewegen an einem Raster ein. Dies können Sie verhindern, um das Element frei zu platzieren, indem Sie beim Loslassen des Elements die Tasten Strg+Umschalt bzw. Ctrl+Shift drücken.

Ausgangsmapping

module guide 891 0

Im Register Ausgangsmapping legen Sie fest, wie die XML-Response aus dem geänderten Formular auf das XML-Format abgebildet werden, welches das nächste Modul im Workflow erwartet.

  1. Abbildungstabelle

    Zeigt das XSLT-Stylesheet an, das Sie zum Abbilden der XML-Response auf das Ausgangs-XML-Format erstellen.

  2. XML-Quelldatei

    Zeigt den Original-Request und die Response an, die der Browser nach dem Bearbeiten und Absenden des Formulars wieder an den Task Generator gesendet hat.

  3. XML-Zieldatei

    • Zielstruktur

      Zum Laden einer XML-Datei, die bereits so strukturiert ist, wie vom nachfolgenden Modul erwartet.

    • Ergebnis des Mappings

      Struktur und Inhalt der Ausgangsnachricht des Task Generators.

Formular-Elemente in der Werkzeugleiste

Die Werkzeugleiste im Designer enthält folgende Buttons zum Erstellen von Formularelementen:

module guide 892 0

Die Erläuterungen in der folgenden Tabelle beziehen sich auf die Buttons in der Werkzeugleiste von links nach rechts:

Button Bezeichnung Verwendung
module guide 892 9

Button

Zum Auslösen einer Aktion
module guide 892 10

Checkbox

Zum Aktivieren/Deaktivieren genau einer Option in einem Gruppen-Element
module guide 892 11

Radiobutton

Zum Auswählen von einer Option aus mehreren; es werden immer alle Optionen in einem Gruppen-Element betrachtet
module guide 892 12

Label

Beschriftung, z.B. eines Textfields
module guide 892 13

Textfield

Texteingabefeld
module guide 892 14

Passwordfield

Passwort-Eingabefeld; alle eingegebenen Zeichen werden aus Sicherheitsgründen als Asterisk (*) dargestellt.
module guide 892 15

FileField

Erzeugt Formularfelder zum Upload einer Datei (Eingabefeld und Button mit dem Label Durchsuchen). Beim Submit des Formulars werden die hochgeladenen Dateien mit base64-kodiert und in die XML-Response geschrieben.
module guide 892 16

Textarea

Eingabefeld für längere Texte.
module guide 892 1

Combobox

Aufklappbare Liste zur Auswahl von Optionen, eine der Optionen kann standardmäßig vorausgewählt sein und daher immer angezeigt werden. Die Liste ist optional auch bearbeitbar.
module guide 892 2

List

Liste, aus der eine Option gewählt werden kann.
module guide 892 3

Tree

Baumdarstellung von Elementen, die geöffnet und geschlossen werden können.
module guide 892 4

Group - Absolute Layout

Ordnet alle Formular-Elemente in dieser Gruppe pixelgenau so an, wie vom Benutzer angeordnet. Die Größe der absoluten Gruppe passt sich nicht automatisch ihrem Inhalt an; daher sollte ggf. der Scrollbar aktiviert werden (Attribut scrollable). Gruppen können geschachtelt werden
module guide 892 5

Group - Table Layout

Erzeugt eine Tabelle mit initial drei Spalten und drei Zeilen. Gut geeignet, um darin Formularelemente auszurichten. Gruppen können geschachtelt werden
module guide 892 6

Group - Horizontal Layout

Ordnet alle Formular-Elemente, die in diese Gruppe gezogen werden, horizontal untereinander an; Gruppen können geschachtelt werden
module guide 892 7

Group - Vertical Layout

Ordnet alle Formular-Elemente, die in diese Gruppe gezogen werden, vertikal untereinander an; Gruppen können geschachtelt werden
module guide 892 8

Filler

Erzeugt eine quadratische Fläche, deren Kantenlänge angegeben werden kann
module guide 893 0

Filler h

Erzeugt einen horizontalen Abstand, dessen Breite angegeben werden kann
module guide 893 1

Filler v

Erzeugt einen vertikalen Abstand, dessen Höhe angegeben werden kann
module guide 893 2

Separator

Horizontale oder vertikale Trennlinie, abhängig vom Wert des Attributs orientation
module guide 893 3

Image

Zum Einbinden einer Grafik in das Formular. Sie haben folgende Optionen:

  • Legen Sie die Grafik im Dateisystem ab und geben Sie den absoluten Pfad als Wert des Attributs url an.

  • Speichern Sie die Grafik im INUBIT-Repository und binden Sie diese ein. Dabei werden die Grafiken über einen internen Proxy geroutet. Diese Option hat folgende Vorteile:

    • Die Grafiken werden auch im Designer angezeigt

    • Die Grafiken werden auch dann noch geladen, wenn die INUBIT-Software auf einem anderen Rechner als dem Portalerver installiert ist.

      Siehe Repositorydateien über URL oder Pfad ansprechen

      Sie können die Größe des Image bei width und height in Prozent angeben (z.B. 50 %) und die border in der angegebenen Weise mit 4 Werten für oben, unten, rechts und links.
module guide 893 4

Web

(nur bei Theme Web)

Fügt ein Web-Element in das XSLT-Stylesheet ein. Geben Sie als Inhalt des Elements beliebiges XHTML ein. Das `XHTML `wird direkt in die HTML-Seite kopiert, z.B.

<Web>
  <div align="center">
  <object type="application/x-shockwave-flash" data="inubit.swf" width="700" height="400" title="Virtimo">
      <param name="movie" value="inubit.swf"/>
      <param name="quality" value="high"/>
    </object>
  </div>
</Web>
module guide 893 5

Panel

Fügt ein neues Panel ein.

Siehe Formular-Layout festlegen und Elemente auf Panels positionieren

Theme

Legt fest, wie das Formular dargestellt wird:

  • Web ist geeignet für browser-basierte Formulare.

Eigenschaften von Formular-Elementen

Im Register Eigenschaften werden die Eigenschaften des aktuell im Formular markierten Elements angezeigt. Die Eigenschaften sind in folgende Bereiche gruppiert:

  • Bereich Allgemein

  • Bereich Spezifisch

  • Bereich Abhängig

Bereich Allgemein

  • name

    Zum Referenzieren des Elements über dessen Namen. Der Name darf nur XML-konforme Zeichen enthalten, weil der Name als XML-Tag in der Response verwendet wird.

    Solange kein Name vergeben ist, wird automatisch eine ID vergeben, z.B. CheckBox_7592354.

    Sie können Elemente alternativ über deren Position referenzieren, siehe path.

    Sie können das name-Attribut nur dann nutzen, wenn das Element kein path-Attribut hat.

  • path

    Zum Referenzieren des Elements über dessen Position.

    Mit dem path-Attribut können Sie z.B. mehrdimensionale Strukturen aufbauen, da die Felder in der Response in der entsprechenden XML Struktur erzeugt werden.

    Beispiel:

    • path=/Bestellung|0/Waren|0/Buch|1.

    • In der Response wird folgende Struktur ausgegeben:

      <Path>
 <Bestellung>
  <Waren>
   <Buch>false</Buch>
  </Waren>
 </Bestellung>
</Path>

      Der Index bezieht sich nicht auf das Element dieses Namens wie bei XPath, sondern auf alle Elemente auf dieser Ebene. Damit wird die komplette Reihenfolge wiederhergestellt.

      Sie können Elemente alternativ über deren Namen referenzieren, siehe name.

      Sie können das path-Attribut nur dann nutzen, wenn das Element kein name-Attribut hat.

  • enabled

    Zum Aktivieren/Deaktivieren des Formularelements.

  • foreground

    Wenn Sie in dieses Feld klicken, erscheint am Ende der Eingabezeile ein Button. Ein Klick auf diesen Button öffnet einen Farbwähler. Mit dieser Farbe bestimmen Sie die Textfarbe.

  • background

    Hintergrundfarbe des Elements.

  • width

    Breite des Elements (ganze Zahl). Bei einer unzulässigen Eingabe wird die Breite auf 1 gesetzt.

  • height

    Höhe des Elements (ganze Zahl).

  • border

    Breite des Rahmens, der um das Element gezeichnet werden soll (ganze Zahl). Die Farbe des Rahmens entspricht der Farbe, die als Hintergrundfarbe des Panels angegeben wurde.

  • tooltip Text, der angezeigt wird, wenn der Mauszeiger im Formular auf das Element zeigt. Ein Tooltip besteht aus nicht mehr als 80 Zeichen, da einige Web-Browser längere Texte nicht anzeigen können.

  • halign

    Waagerechte Ausrichtung: linksbündig (left), zentriert (center) oder rechtsbündig (right).

  • valign

    Senkrechte Ausrichtung, oben (top), zentriert (center) oder unten (bottom).

Bereich Spezifisch

Wenn ein Element Panel markiert ist, werden über die spezifischen Attribute die Eigenschaften aller Elemente beeinflusst, für die keine Werte angegeben sind.

Darüber hinaus gibt es noch eine Reihe weiterer spezifischer Attribute. Die folgende Aufzählung listet die Attribute und Werte, die nicht selbsterklärend sind:

  • label

    Beschriftung eines Elements, z.B. eines Buttons.

  • escape

    • true: Sonder- und Steuerzeichen werden HTML-kodiert bzw. entwertet.

    • false: Sonder- und Steuerzeichen werden nicht HTML-kodiert bzw. entwertet. Das Formatieren mit HTML-Tags wie <b>fett</b>, <i>kursiv</i> ist damit im Attribut label eines Label-Elements möglich.

  • event

    Wählen Sie ein Event aus oder geben Sie den Namen des Panels ein, das angezeigt werden soll, wenn das Event ausgelöst wird. Es gibt folgende Events:

    • <Panel_Name>

      Zum Navigieren von einem Panel zum Nächsten. Wird z.B. an einem Weiter-Button verwendet.

      Siehe Formular-Layout festlegen und Elemente auf Panels positionieren

    • back()

      Sprung zurück zum zuletzt angezeigten Panel.

    • submit(value)

      Zum Absenden des Formulars. Die im Formular enthaltenen Daten werden als XML-Nachricht an den Task Generator übergeben.

      Wenn in einem Formular mehrere Buttons vorhanden sind, dann ersetzen Sie value durch eine beliebige Zeichenkette, damit Sie den Auslöser des Events identifizieren und Folgeaktionen bestimmen können. Die Zeichenkette wird als Wert des Attributs submitter in der Response ausgegeben.

    • cancel()

      Bricht die Anzeige des Formulars ab. Die Task wird weiterhin in der Taskliste angezeigt.

    • get(componentName)

      Sucht das Element, dessen Name in Klammern angegeben ist und wertet den aktuell angezeigten Inhalt des Elements aus.

      Beispiel:

      Die Combobox CB enthält eine Liste mit den Namen aller vorhandenen Panels. Für den Button Show ist das Event get(CB) definiert. Wenn Benutzer einen Listeneintrag auswählen und dann auf den Button klicken, dann wird der aktuell angezeigte Wert der Combobox ausgewertet und das dazugehörige Panel angezeigt.

      module guide 896 2

    • browse()

      Öffnet einen Datei-Explorer.

      Es wird der Pfad und Dateiname der ausgewählten Datei zurückgeliefert und in ein Textfeld geschrieben. Nur für Formulare, die in der INUBIT Workbench angezeigt werden!

    • execute(profileName|URL)

      Bei Formularen, die von der INUBIT Workbench angezeigt werden, muss der Name eines Profils angegeben werden, das ausgeführt werden soll. Der Profilname muss dem Namen eines der Applikationsprofile entsprechen, die im Register Konfiguration über den Menüpunkt Konfiguration > Applikationsprofile definiert sind.

      Bei Formularen, die im Web-Browser angezeigt werden, muss eine URL angegeben werden.

  • validate

    Siehe Server-seitige Validierung von Benutzereingaben per AJAX

  • stateChange

    Ändert nach Absenden des Formulars die Größe des Portlets entsprechend dem gewählten Wert. Diese Funktion kann z.B. genutzt werden, um ein Portlet minimiert und damit platzsparend anzubieten und es erst nach einer Benutzereingabe auf die vollständige Größe zu skalieren.

  • ajax

    Aktualisiert den Inhalt des Formulars, in dem sich der Button befindet, ohne die komplette Webseite neu zu laden.

    Diese Funktion beschleunigt die Reaktion von Webanwendungen auf Benutzeraktionen und verhindert, dass statische Daten erneut übertragen werden müssen, die sich nicht geändert haben.

    Verwenden Sie die Optionen ajax und ajaxGroup nicht in Gruppen, die ein FileField zum Hochladen einer Datei enthalten! Die Optionen sind in diesen Kontexten nicht funktional.

    Mit dem Ajax-Submit können Sie Formulare auch teilweise statt vollständig aktualisieren lassen, siehe Portlets und Formularabschnitte mit Ajax aktualisieren.

  • ajaxGroup

    Um den Inhalt der ausgewählten Formular-Gruppe zu aktualisieren, ohne die komplette Webseite neu zu laden.

    Siehe Portlets und Formularabschnitte mit Ajax aktualisieren

  • jump Zum Festlegen der Einsprungstelle in dem Technical Workflow, ab welcher die Daten für die Ajax-Gruppen-Aktualisierung aufbereitet werden.

    Siehe Formularabschnitt mit Ajax aktualisieren

  • mnenomic

    (Nur für Formulare, die in der Tasklist der INUBIT Workbench angezeigt werden)

    Elemente, die Ereignisse auslösen können, wie z.B. Buttons, werden automatisch mit einem Shortcut belegt. Dabei wird der Buchstabe des Element-Labels unterstrichen, mit dem das Ereignis ohne Mausklick, nur über die Tastatur ausgelöst werden kann. Bei Linux wird der unterstrichene Buchstabe immer angezeigt. Bei Windows müssen Sie erst die Alt-Taste drücken, damit die Shortcuts angezeigt werden.

  • scrollable

    Standardmäßig liegt das Panel in einem Container, der automatisch mit horizontalem und vertikalem Scrollbalken ausgestattet ist (scrollable="true"). So kann immer das ganze Formular bearbeitet werden, auch wenn der Bildschirm kleiner als das Panel ist.

    Mit scrollable="false" werden die Scrollbalken abgeschaltet.

  • mandatory

    Kennzeichnet das Element als Pflichtfeld.

  • maxlength (nur für Text- und Dateifelder)

    Maximale Länge des Feldinhalts

  • tabindex (nur für editierbare und auswählbare Elemente)

    Reihenfolge, in der die Felder mit der Tabulatortaste erreicht werden können

  • pattern

    Enthält einen regulären Ausdruck, der das Muster der erlaubten Benutzereingaben definiert.

    So können Sie z.B. die Struktur einer Nummer mit zwischengeschalteten Sonderzeichen und einer bestimmten Anzahl von Zahlen definieren.

    Siehe Client-seitige Validierung von Benutzereingaben über Pattern

  • TextArea searchText='Suchstring'

    (Nur für die Taskanzeige in der INUBIT Workbench)

    Sucht und markiert den Text in der Komponente

  • TextArea Highlight

    (Nur für die Taskanzeige in der INUBIT Workbench)

    Unter TextArea kann beliebig oft das Element Highlight stehen. Dies hat folgende Attribute:

    • start='Ganzzahl'

    • stop='Ganzzahl'

      Sie können entweder stop oder length benutzen!

    • length='Zahl'

    • color='#xxxxxx'

  • Tree searchXPath='Expression'

    (Nur für die Taskanzeige in der INUBIT Workbench)

    Sucht und markiert den entsprechenden XPath, z.B. /*/Row[3]

  • disableBack

    Attribut des Form-Elements. Wenn die Option markiert ist, dann wird in einer Formularfolge die Nutzung des Back-Buttons verhindert. Nach einem Klick auf den Back-Button versucht der Browser, sofort wieder das Formular anzuzeigen, das den angeklickten Back-Button enthält.

    Für diese Funktion muss JavaScript aktiviert sein.

Bereich Abhängig

Press Esc to exit full screen
Modal image placeholder
Press Esc to exit full screen