BlueSpice Helpdesk - Benutzerbeiträge [de]

Sandbox5.2.5

2026-06-23T09:32:01Z

Bhuber:

'''''This is a test. Everything seems to work well?'''''

* Let met
* give you

{| class="wikitable sortable mw-collapsible bs-exportable filterable mw-sticky-header"
|+
!this
!is
!a
!table
|-
|I can write
|and edit
|and
|change
|-
|it
| style="" class="col-purple-bg" |
|
|
|-
|
|
|
|
|-
|
| style="border-bottom-width:2px;border-bottom-color:#e49c00;" |
|
|
|-
| style="border-right-width:2px;border-right-color:#e49c00;" |
| style="border-left-width:2px;border-right-width:2px;border-top-width:2px;border-bottom-width:2px;border-left-color:#e49c00;border-right-color:#e49c00;border-top-color:#e49c00;border-bottom-color:#e49c00;" |
| style="border-left-width:2px;border-left-color:#e49c00;" |
|
|}
<drawio filename="Sandbox5_2_5-74220376" /><math>\exp_\lg\log_{10}</math>

Datei:Sandbox5 2 5-74220376.svg

2026-06-23T09:31:30Z

Bhuber: DrawioEditor

Sandbox5.2.5

2026-06-23T09:30:55Z

Bhuber:

2026-06-02T14:33:12Z

Bhuber:

Handbuch:Erweiterung/Forms/Fortschrittsbalken

2026-06-02T14:33:03Z

Bhuber:

Der Fortschrittsbalken zeigt einen berechneten Fortschrittswert basierend auf den ausgewählten Optionen in einem Formular an. In diesem Beispiel wird er für eine Checkliste verwendet, kann jedoch auch für andere Anwendungsfälle eingesetzt werden.

== Hinzufügen eines Fortschrittsbalkens ==
Dieses Beispiel zeigt eine mögliche Implementierung eines Fortschrittsbalkens für eine Checkliste.

[[Datei:Extension Forms Progress bar example.png|alt=Checkliste mit zwei Gruppen von Kontrollkästchen für Onboarding-Aufgaben|center|thumb|550x550px|Beispiel eines Fortschrittsbalkens für Checklistenpunkte]]

Um dieses Formular nachzubilden, werden folgende Komponenten benötigt:

# '''Bereitstellen der JavaScript-Logik''' in ''MediaWiki:Common.js''
# '''Definition''' der passenden Syntax für Kontrollkästchenfelder und deren '''Optionen'''
# '''Hinzufügen eines Event-Listeners''' in den Formulareigenschaften

=== Bereitstellen der Logik in ''MediaWiki:Common.js'' ===
Fügen Sie die folgende JavaScript-Funktion zu [https://de.wiki.bluespice.com/wiki/Handbuch:Das_Konzept_der_Namensr%C3%A4ume#Namensraum_.22MediaWiki.22 ''MediaWiki:Common.js''] hinzu:

<syntaxhighlight lang="javascript" line="1">
/*Extension:Forms - Add a progress bar for checkbox items */
function CalcProgress( data ) {
var dfd = $.Deferred();
var checked = 0;
var ItemCheckboxes = this.$element.find( 'input[value^=check]' );
var total = ItemCheckboxes.length;
if ( total < 1 ) {
dfd.resolve( data );
return dfd.promise();
}

var items = this.getItems();
for( var name in data ) {
if ( !name.startsWith( 'checkbox_multi-' ) ) {
continue;
}
var checkedCheckboxes = data[name];
for ( var i = 0; i < checkedCheckboxes.length; i++ ) {
checked++;
}
}
data.progress = ( 100 * checked ) / total;
dfd.resolve( data );

return dfd.promise();
}

</syntaxhighlight>

In Zeile 5 wird das Präfix für jedes Kontrollkästchen definiert, das in die Fortschrittsberechnung einbezogen werden soll:

<syntaxhighlight lang="javascript">
input[value^=check]
</syntaxhighlight>

Das bedeutet, dass der Wert ''data'' Ihrer Kontrollkästchen mit ''check'' beginnen muss. Dies bezieht sich auf den ''data''-Wert, der in jeder Kontrollkästchenoption definiert wird:

[[File:checkbox data value check.png|thumb|center|Datendefinition im Formular, hier beginnend mit „check-“]]

In Zeile 14 werden nur diejenigen Felder berücksichtigt, deren Name mit ''checkbox_multi'' beginnt:

<syntaxhighlight lang="javascript">
if ( !name.startsWith( 'checkbox_multi-' ) ) {
</syntaxhighlight>

Basierend auf diesem Implementierungsbeispiel wird eine Kontrollkästchenoption nur dann in die Fortschrittsberechnung einbezogen, wenn der Feldname mit ''checkbox_multi-'' beginnt und der ''data''-Wert der Option mit ''check'' anfängt.

Wenn Sie andere Präfixe für Feldnamen oder Optionswerte verwenden, müssen Sie den JavaScript-Code entsprechend anpassen.

=== Anwenden der Syntax auf die Checklistenpunkte ===
Das folgende Feld vom Typ <code>checkbox_multiselect</code> verwendet sowohl das korrekte Namenspräfix als auch das korrekte ''data''-Präfix. Das Feld wird daher in die Berechnung einbezogen, und alle drei Optionen tragen zum Fortschrittswert bei:

<syntaxhighlight lang="javascript">
{
"name": "checkbox_multi-workplace_setup",
"label": "Workplace setup",
...
"options": [
{
"data": "check-equipment",
"label": "Ausstattung bereitstellen (Laptop, Telefon)"
},
{
"data": "check-access",
"label": "Zugriff auf erforderliche Systeme gewähren"
},
{
"data": "check-intro",
"label": "Vorstellung im Team"
}
],
"type": "checkbox_multiselect"
}

</syntaxhighlight>

=== Erstellen eines Event-Listeners in den Formulareigenschaften ===
Um Ihr Formular mit der JavaScript-Funktion zu verbinden, müssen Sie in den Formulareigenschaften den [https://en.wiki.bluespice.com/wiki/Manual:Extension/Forms/Form_elements_and_settings#Listeners Listener] anlegen:

[[Datei:Extension Forms Progress bar listener.png|center|thumb|650x650px|Hinzufügen des Listeners zu den Formulareigenschaften]]

So fügen Sie den Listener hinzu:

# '''Öffnen''' Sie die Formulareigenschaften.
# '''Klicken''' Sie auf ''Listeners''.
# '''Wählen''' Sie das Ereignis <code>beforeSubmitData</code> aus und geben Sie den Namen Ihrer JavaScript-Funktion ein. In unserem Beispiel lautet dieser <code>CalcProgress</code>.

 
 

Das Ereignis <code>beforeSubmitData</code> wird beim Speichern des Formulars ausgelöst. Änderungen an Kontrollkästchen-Auswahlen werden daher während der Bearbeitung nicht unmittelbar berücksichtigt. Der Fortschrittsbalken wird erst nach dem Speichern des Formulars aktualisiert.

 

=== Vollständiges Implementierungsbeispiel ===
Dieses Beispiel basiert auf der oben beschriebenen JavaScript-Logik (insbesondere den erforderlichen Namenskonventionen). Zusätzlich wird in der untenstehenden JSON-Konfiguration ein Schema für die Seitennamensgebung definiert. Jede Checkliste wird als eigene Wiki-Seite unter dem Präfix ''ExampleChecklist/'' gespeichert, wobei der Name der Checkliste Bestandteil des Seitentitels ist.

Um dieses Beispiel zu verwenden, speichern Sie ein neues Formular (z. B. ''ExampleChecklist.form'') und kopieren Sie die folgende Konfiguration in die Definitionsquelle:

<syntaxhighlight lang="json">
{
"title": "Example Progress Bar",
"showTitle": true,
"showFormName": false,
"buttonsFloat": false,
"categories": [],
"sealAfterCreation": false,
"enableProgressSave": false,
"enableEditSummary": false,
"rlDependencies": [],
"useFormRevs": false,
"includable": false,
"extends": "",
"abstract": false,
"partial": false,
"target": {
"type": "json-on-wikipage",
"predefined_title": "ExampleChecklist/{{checklistname}}"
},
"show_target_afterAction": false,
"listeners": {
"beforeSubmitData": "jscb:CalcProgress"
},
"lang": "json",
"items": [
{
"name": "checklistname",
"label": "Checklist name",
"help": "",
"noLayout": false,
"showOn": [
"create"
],
"editableOn": [
"create"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"type": "text"
},
{
"name": "progress",
"label": "Progress",
"help": "",
"noLayout": true,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "margin:1em auto!important; max-width:100%",
"widgetCustomProps": {
"widget_progress": "0"
},
"widget_listeners": [],
"type": "progress_bar"
},
{
"name": "checkbox_multi-getting_started",
"label": "Getting started",
"help": "",
"noLayout": false,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"horizontal": false,
"options": [
{
"data": "check-profile",
"label": "Provide personal and role information"
},
{
"data": "check-documents",
"label": "Submit required documents"
},
{
"data": "check-intro",
"label": "Review introduction materials"
}
],
"type": "checkbox_multiselect"
},
{
"name": "checkbox_multi-workplace_setup",
"label": "Workplace setup",
"help": "",
"noLayout": false,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"horizontal": false,
"options": [
{
"data": "check-equipment",
"label": "Provide equipment (laptop, phone)"
},
{
"data": "check-access",
"label": "Grant access to required systems"
},
{
"data": "check-intro",
"label": "Meet the team"
}
],
"type": "checkbox_multiselect"
}
]
}

</syntaxhighlight>

Handbuch:Erweiterung/Forms/Fortschrittsbalken

2026-06-02T14:31:06Z

Bhuber:

Der Fortschrittsbalken zeigt einen berechneten Fortschrittswert basierend auf den ausgewählten Optionen in einem Formular an. In diesem Beispiel wird er für eine Checkliste verwendet, kann jedoch auch für andere Anwendungsfälle eingesetzt werden.

== Hinzufügen eines Fortschrittsbalkens ==
Dieses Beispiel zeigt eine mögliche Implementierung eines Fortschrittsbalkens für eine Checkliste.

[[Datei:Extension Forms Progress bar example.png|alt=Checkliste mit zwei Gruppen von Kontrollkästchen für Onboarding-Aufgaben|center|thumb|550x550px|Beispiel eines Fortschrittsbalkens für Checklistenpunkte]]

Um dieses Formular nachzubilden, werden folgende Komponenten benötigt:

# '''Bereitstellen der JavaScript-Logik''' in ''MediaWiki:Common.js''
# '''Definition''' der passenden Syntax für Kontrollkästchenfelder und deren '''Optionen'''
# '''Hinzufügen eines Event-Listeners''' in den Formulareigenschaften

=== Bereitstellen der Logik in ''MediaWiki:Common.js'' ===
Fügen Sie die folgende JavaScript-Funktion zu [https://de.wiki.bluespice.com/wiki/Handbuch:Das_Konzept_der_Namensr%C3%A4ume#Namensraum_.22MediaWiki.22 ''MediaWiki:Common.js''] hinzu:

<syntaxhighlight lang="javascript" line="1">
/*Extension:Forms - Add a progress bar for checkbox items */
function CalcProgress( data ) {
var dfd = $.Deferred();
var checked = 0;
var ItemCheckboxes = this.$element.find( 'input[value^=check]' );
var total = ItemCheckboxes.length;
if ( total < 1 ) {
dfd.resolve( data );
return dfd.promise();
}

var items = this.getItems();
for( var name in data ) {
if ( !name.startsWith( 'checkbox_multi-' ) ) {
continue;
}
var checkedCheckboxes = data[name];
for ( var i = 0; i < checkedCheckboxes.length; i++ ) {
checked++;
}
}
data.progress = ( 100 * checked ) / total;
dfd.resolve( data );

return dfd.promise();
}

</syntaxhighlight>

In Zeile 5 wird das Präfix für jedes Kontrollkästchen definiert, das in die Fortschrittsberechnung einbezogen werden soll:

<syntaxhighlight lang="javascript">
input[value^=check]
</syntaxhighlight>

Das bedeutet, dass der Wert ''data'' Ihrer Kontrollkästchen mit ''check'' beginnen muss. Dies bezieht sich auf den ''data''-Wert, der in jeder Kontrollkästchenoption definiert wird:

[[File:checkbox data value check.png|thumb|center|Datendefinition im Formular, hier beginnend mit „check-“]]

In Zeile 14 werden nur diejenigen Felder berücksichtigt, deren Name mit ''checkbox_multi'' beginnt:

<syntaxhighlight lang="javascript">
if ( !name.startsWith( 'checkbox_multi-' ) ) {
</syntaxhighlight>

Basierend auf diesem Implementierungsbeispiel wird eine Kontrollkästchenoption nur dann in die Fortschrittsberechnung einbezogen, wenn der Feldname mit ''checkbox_multi-'' beginnt und der ''data''-Wert der Option mit ''check'' anfängt.

Wenn Sie andere Präfixe für Feldnamen oder Optionswerte verwenden, müssen Sie den JavaScript-Code entsprechend anpassen.

=== Anwenden der Syntax auf die Checklistenpunkte ===
Das folgende Feld vom Typ <code>checkbox_multiselect</code> verwendet sowohl das korrekte Namenspräfix als auch das korrekte ''data''-Präfix. Das Feld wird daher in die Berechnung einbezogen, und alle drei Optionen tragen zum Fortschrittswert bei:

<syntaxhighlight lang="javascript">
{
"name": "checkbox_multi-workplace_setup",
"label": "Workplace setup",
...
"options": [
{
"data": "check-equipment",
"label": "Ausstattung bereitstellen (Laptop, Telefon)"
},
{
"data": "check-access",
"label": "Zugriff auf erforderliche Systeme gewähren"
},
{
"data": "check-intro",
"label": "Vorstellung im Team"
}
],
"type": "checkbox_multiselect"
}

</syntaxhighlight>

=== Erstellen eines Event-Listeners in den Formulareigenschaften ===
Um Ihr Formular mit der JavaScript-Funktion zu verbinden, müssen Sie in den Formulareigenschaften den [https://en.wiki.bluespice.com/wiki/Manual:Extension/Forms/Form_elements_and_settings#Listeners Listener] anlegen:

[[File:Extension Forms Progress bar listener.png|center|thumb|650x650px|Hinzufügen des Listeners zu den Formulareigenschaften]]

So fügen Sie den Listener hinzu:

# '''Öffnen''' Sie die Formulareigenschaften.
# '''Klicken''' Sie auf ''Listeners''.
# '''Wählen''' Sie das Ereignis <code>beforeSubmitData</code> aus und geben Sie den Namen Ihrer JavaScript-Funktion ein. In unserem Beispiel lautet dieser <code>CalcProgress</code>.

 
 

Das Ereignis <code>beforeSubmitData</code> wird beim Speichern des Formulars ausgelöst. Änderungen an Kontrollkästchen-Auswahlen werden daher während der Bearbeitung nicht unmittelbar berücksichtigt. Der Fortschrittsbalken wird erst nach dem Speichern des Formulars aktualisiert.

 

=== Vollständiges Implementierungsbeispiel ===
Dieses Beispiel basiert auf der oben beschriebenen JavaScript-Logik (insbesondere den erforderlichen Namenskonventionen). Zusätzlich wird in der untenstehenden JSON-Konfiguration ein Schema für die Seitennamensgebung definiert. Jede Checkliste wird als eigene Wiki-Seite unter dem Präfix ''ExampleChecklist/'' gespeichert, wobei der Name der Checkliste Bestandteil des Seitentitels ist.

Um dieses Beispiel zu verwenden, speichern Sie ein neues Formular (z. B. ''ExampleChecklist.form'') und kopieren Sie die folgende Konfiguration in die Definitionsquelle:

<syntaxhighlight lang="json">
{
"title": "Example Progress Bar",
"showTitle": true,
"showFormName": false,
"buttonsFloat": false,
"categories": [],
"sealAfterCreation": false,
"enableProgressSave": false,
"enableEditSummary": false,
"rlDependencies": [],
"useFormRevs": false,
"includable": false,
"extends": "",
"abstract": false,
"partial": false,
"target": {
"type": "json-on-wikipage",
"predefined_title": "ExampleChecklist/{{checklistname}}"
},
"show_target_afterAction": false,
"listeners": {
"beforeSubmitData": "jscb:CalcProgress"
},
"lang": "json",
"items": [
{
"name": "checklistname",
"label": "Checklist name",
"help": "",
"noLayout": false,
"showOn": [
"create"
],
"editableOn": [
"create"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"type": "text"
},
{
"name": "progress",
"label": "Progress",
"help": "",
"noLayout": true,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "margin:1em auto!important; max-width:100%",
"widgetCustomProps": {
"widget_progress": "0"
},
"widget_listeners": [],
"type": "progress_bar"
},
{
"name": "checkbox_multi-getting_started",
"label": "Getting started",
"help": "",
"noLayout": false,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"horizontal": false,
"options": [
{
"data": "check-profile",
"label": "Provide personal and role information"
},
{
"data": "check-documents",
"label": "Submit required documents"
},
{
"data": "check-intro",
"label": "Review introduction materials"
}
],
"type": "checkbox_multiselect"
},
{
"name": "checkbox_multi-workplace_setup",
"label": "Workplace setup",
"help": "",
"noLayout": false,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"horizontal": false,
"options": [
{
"data": "check-equipment",
"label": "Provide equipment (laptop, phone)"
},
{
"data": "check-access",
"label": "Grant access to required systems"
},
{
"data": "check-intro",
"label": "Meet the team"
}
],
"type": "checkbox_multiselect"
}
]
}

</syntaxhighlight>

2026-06-02T14:22:13Z

Bhuber:

Handbuch:Erweiterung/Forms/Fortschrittsbalken

2026-06-02T14:22:03Z

Bhuber:

Der Fortschrittsbalken zeigt einen berechneten Fortschrittswert basierend auf den ausgewählten Optionen in einem Formular an. In diesem Beispiel wird er für eine Checkliste verwendet, kann jedoch auch für andere Anwendungsfälle eingesetzt werden.

== Hinzufügen eines Fortschrittsbalkens ==
Dieses Beispiel zeigt eine mögliche Implementierung eines Fortschrittsbalkens für eine Checkliste.

[[Datei:Extension Forms Progress bar example.png|alt=Checkliste mit zwei Gruppen von Kontrollkästchen für Onboarding-Aufgaben|center|thumb|550x550px|Beispiel eines Fortschrittsbalkens für Checklistenpunkte]]

Um dieses Formular nachzubilden, werden folgende Komponenten benötigt:

# '''Bereitstellen der JavaScript-Logik''' in ''MediaWiki:Common.js''
# '''Definieren''' der passenden Syntax für Kontrollkästchenfelder und deren '''Optionen'''
# '''Hinzufügen eines Event-Listeners''' in den Formulareigenschaften

=== Bereitstellen der Logik in ''MediaWiki:Common.js'' ===
Fügen Sie die folgende JavaScript-Funktion zu [https://en.wiki.bluespice.com/wiki/Manual:The_concept_of_namespaces#Namespace_.22MediaWiki.22 ''MediaWiki:Common.js''] hinzu:

<syntaxhighlight lang="javascript" line="1">
/*Extension:Forms - Add a progress bar for checkbox items */
function CalcProgress( data ) {
var dfd = $.Deferred();
var checked = 0;
var ItemCheckboxes = this.$element.find( 'input[value^=check]' );
var total = ItemCheckboxes.length;
if ( total < 1 ) {
dfd.resolve( data );
return dfd.promise();
}

var items = this.getItems();
for( var name in data ) {
if ( !name.startsWith( 'checkbox_multi-' ) ) {
continue;
}
var checkedCheckboxes = data[name];
for ( var i = 0; i < checkedCheckboxes.length; i++ ) {
checked++;
}
}
data.progress = ( 100 * checked ) / total;
dfd.resolve( data );

return dfd.promise();
}

</syntaxhighlight>

In Zeile 5 wird das Präfix für jedes Kontrollkästchen definiert, das in die Fortschrittsberechnung einbezogen werden soll:

<syntaxhighlight lang="javascript">
input[value^=check]
</syntaxhighlight>

Das bedeutet, dass der Wert ''data'' Ihrer Kontrollkästchen mit ''check'' beginnen muss. Dies bezieht sich auf den ''data''-Wert, der in jeder Kontrollkästchenoption definiert wird:

[[File:Manual:checkbox data value check.jpg|thumb|center|Datendefinition im Formular, hier beginnend mit „check-“]]

In Zeile 14 werden nur diejenigen Felder berücksichtigt, deren Name mit ''checkbox_multi'' beginnt:

<syntaxhighlight lang="javascript">
if ( !name.startsWith( 'checkbox_multi-' ) ) {
</syntaxhighlight>

Basierend auf diesem Implementierungsbeispiel wird eine Kontrollkästchenoption nur dann in die Fortschrittsberechnung einbezogen, wenn der Feldname mit ''checkbox_multi-'' beginnt und der ''data''-Wert der Option mit ''check'' anfängt.

Wenn Sie andere Präfixe für Feldnamen oder Optionswerte verwenden, müssen Sie den JavaScript-Code entsprechend anpassen.

=== Anwenden der Syntax auf die Checklistenpunkte ===
Das folgende Feld vom Typ <code>checkbox_multiselect</code> verwendet sowohl das korrekte Namenspräfix als auch das korrekte ''data''-Präfix. Das Feld wird daher in die Berechnung einbezogen, und alle drei Optionen tragen zum Fortschrittswert bei:

<syntaxhighlight lang="javascript">
{
"name": "checkbox_multi-workplace_setup",
"label": "Workplace setup",
...
"options": [
{
"data": "check-equipment",
"label": "Provide equipment (laptop, phone)"
},
{
"data": "check-access",
"label": "Grant access to required systems"
},
{
"data": "check-intro",
"label": "Meet the team"
}
],
"type": "checkbox_multiselect"
}

</syntaxhighlight>

=== Erstellen eines Event-Listeners in den Formulareigenschaften ===
Um Ihr Formular mit der JavaScript-Funktion zu verbinden, müssen Sie in den Formulareigenschaften den [https://en.wiki.bluespice.com/wiki/Manual:Extension/Forms/Form_elements_and_settings#Listeners Listener] anlegen:

[[File:Extension Forms Progress bar listener.png|center|thumb|650x650px|Hinzufügen des Listeners zu den Formulareigenschaften]]

So fügen Sie den Listener hinzu:

# '''Öffnen''' Sie die Formulareigenschaften.
# '''Klicken''' Sie auf ''Listeners''.
# '''Wählen''' Sie das Ereignis <code>beforeSubmitData</code> aus und geben Sie den Namen Ihrer JavaScript-Funktion ein. In unserem Beispiel lautet dieser <code>CalcProgress</code>.

 
 

Das Ereignis <code>beforeSubmitData</code> wird beim Speichern des Formulars ausgelöst. Änderungen an Kontrollkästchen-Auswahlen werden daher während der Bearbeitung nicht unmittelbar berücksichtigt. Der Fortschrittsbalken wird erst nach dem Speichern des Formulars aktualisiert.

 

=== Vollständiges Implementierungsbeispiel ===
Dieses Beispiel basiert auf der oben beschriebenen JavaScript-Logik (insbesondere den erforderlichen Namenskonventionen). Zusätzlich wird in der untenstehenden JSON-Konfiguration ein Schema für die Seitennamensgebung definiert. Jede Checkliste wird als eigene Wiki-Seite unter dem Präfix ''ExampleChecklist/'' gespeichert, wobei der Name der Checkliste Bestandteil des Seitentitels ist.

Um dieses Beispiel zu verwenden, speichern Sie ein neues Formular (z. B. ''ExampleChecklist.form'') und kopieren Sie die folgende Konfiguration in die Definitionsquelle:

<syntaxhighlight lang="json">
{
"title": "Example Progress Bar",
"showTitle": true,
"showFormName": false,
"buttonsFloat": false,
"categories": [],
"sealAfterCreation": false,
"enableProgressSave": false,
"enableEditSummary": false,
"rlDependencies": [],
"useFormRevs": false,
"includable": false,
"extends": "",
"abstract": false,
"partial": false,
"target": {
"type": "json-on-wikipage",
"predefined_title": "ExampleChecklist/{{checklistname}}"
},
"show_target_afterAction": false,
"listeners": {
"beforeSubmitData": "jscb:CalcProgress"
},
"lang": "json",
"items": [
{
"name": "checklistname",
"label": "Checklist name",
"help": "",
"noLayout": false,
"showOn": [
"create"
],
"editableOn": [
"create"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"type": "text"
},
{
"name": "progress",
"label": "Progress",
"help": "",
"noLayout": true,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "margin:1em auto!important; max-width:100%",
"widgetCustomProps": {
"widget_progress": "0"
},
"widget_listeners": [],
"type": "progress_bar"
},
{
"name": "checkbox_multi-getting_started",
"label": "Getting started",
"help": "",
"noLayout": false,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"horizontal": false,
"options": [
{
"data": "check-profile",
"label": "Provide personal and role information"
},
{
"data": "check-documents",
"label": "Submit required documents"
},
{
"data": "check-intro",
"label": "Review introduction materials"
}
],
"type": "checkbox_multiselect"
},
{
"name": "checkbox_multi-workplace_setup",
"label": "Workplace setup",
"help": "",
"noLayout": false,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"horizontal": false,
"options": [
{
"data": "check-equipment",
"label": "Provide equipment (laptop, phone)"
},
{
"data": "check-access",
"label": "Grant access to required systems"
},
{
"data": "check-intro",
"label": "Meet the team"
}
],
"type": "checkbox_multiselect"
}
]
}

</syntaxhighlight>

Handbuch:Erweiterung/Forms/Fortschrittsbalken

2026-06-02T14:14:38Z

Bhuber: Die Seite wurde neu angelegt: „Der Fortschrittsbalken zeigt einen berechneten Fortschrittswert basierend auf den ausgewählten Optionen in einem Formular an. In diesem Beispiel wird er für eine Checkliste verwendet, kann jedoch auch für andere Anwendungsfälle eingesetzt werden. == Hinzufügen eines Fortschrittsbalkens == Dieses Beispiel zeigt eine mögliche Implementierung eines Fortschrittsbalkens für eine Checkliste. File:Extension Forms Progress bar example.png|alt=Checklist…“

Der Fortschrittsbalken zeigt einen berechneten Fortschrittswert basierend auf den ausgewählten Optionen in einem Formular an. In diesem Beispiel wird er für eine Checkliste verwendet, kann jedoch auch für andere Anwendungsfälle eingesetzt werden.

== Hinzufügen eines Fortschrittsbalkens ==
Dieses Beispiel zeigt eine mögliche Implementierung eines Fortschrittsbalkens für eine Checkliste.

[[File:Extension Forms Progress bar example.png|alt=Checkliste mit zwei Gruppen von Kontrollkästchen für Onboarding-Aufgaben|center|thumb|550x550px|Beispiel eines Fortschrittsbalkens für Checklistenpunkte]]

Um dieses Formular nachzubilden, werden folgende Komponenten benötigt:

# '''Bereitstellen der JavaScript-Logik''' in ''MediaWiki:Common.js''
# '''Definieren''' der passenden Syntax für Kontrollkästchenfelder und deren '''Optionen'''
# '''Hinzufügen eines Event-Listeners''' in den Formulareigenschaften

=== Bereitstellen der Logik in ''MediaWiki:Common.js'' ===
Fügen Sie die folgende JavaScript-Funktion zu [https://en.wiki.bluespice.com/wiki/Manual:The_concept_of_namespaces#Namespace_.22MediaWiki.22 ''MediaWiki:Common.js''] hinzu:

<syntaxhighlight lang="javascript" line="1">
/*Extension:Forms - Add a progress bar for checkbox items */
function CalcProgress( data ) {
var dfd = $.Deferred();
var checked = 0;
var ItemCheckboxes = this.$element.find( 'input[value^=check]' );
var total = ItemCheckboxes.length;
if ( total < 1 ) {
dfd.resolve( data );
return dfd.promise();
}

var items = this.getItems();
for( var name in data ) {
if ( !name.startsWith( 'checkbox_multi-' ) ) {
continue;
}
var checkedCheckboxes = data[name];
for ( var i = 0; i < checkedCheckboxes.length; i++ ) {
checked++;
}
}
data.progress = ( 100 * checked ) / total;
dfd.resolve( data );

return dfd.promise();
}

</syntaxhighlight>

In Zeile 5 wird das Präfix für jedes Kontrollkästchen definiert, das in die Fortschrittsberechnung einbezogen werden soll:

<syntaxhighlight lang="javascript">
input[value^=check]
</syntaxhighlight>

Das bedeutet, dass der Wert ''data'' Ihrer Kontrollkästchen mit ''check'' beginnen muss. Dies bezieht sich auf den ''data''-Wert, der in jeder Kontrollkästchenoption definiert wird:

[[File:Manual:checkbox data value check.jpg|thumb|center|Datendefinition im Formular, hier beginnend mit „check-“]]

In Zeile 14 werden nur diejenigen Felder berücksichtigt, deren Name mit ''checkbox_multi'' beginnt:

<syntaxhighlight lang="javascript">
if ( !name.startsWith( 'checkbox_multi-' ) ) {
</syntaxhighlight>

Basierend auf diesem Implementierungsbeispiel wird eine Kontrollkästchenoption nur dann in die Fortschrittsberechnung einbezogen, wenn der Feldname mit ''checkbox_multi-'' beginnt und der ''data''-Wert der Option mit ''check'' anfängt.

Wenn Sie andere Präfixe für Feldnamen oder Optionswerte verwenden, müssen Sie den JavaScript-Code entsprechend anpassen.

=== Anwenden der Syntax auf die Checklistenpunkte ===
Das folgende Feld vom Typ <code>checkbox_multiselect</code> verwendet sowohl das korrekte Namenspräfix als auch das korrekte ''data''-Präfix. Das Feld wird daher in die Berechnung einbezogen, und alle drei Optionen tragen zum Fortschrittswert bei:

<syntaxhighlight lang="javascript">
{
"name": "checkbox_multi-workplace_setup",
"label": "Workplace setup",
...
"options": [
{
"data": "check-equipment",
"label": "Provide equipment (laptop, phone)"
},
{
"data": "check-access",
"label": "Grant access to required systems"
},
{
"data": "check-intro",
"label": "Meet the team"
}
],
"type": "checkbox_multiselect"
}

</syntaxhighlight>

=== Erstellen eines Event-Listeners in den Formulareigenschaften ===
Um Ihr Formular mit der JavaScript-Funktion zu verbinden, müssen Sie in den Formulareigenschaften den [https://en.wiki.bluespice.com/wiki/Manual:Extension/Forms/Form_elements_and_settings#Listeners Listener] anlegen:

[[File:Extension Forms Progress bar listener.png|center|thumb|650x650px|Hinzufügen des Listeners zu den Formulareigenschaften]]

So fügen Sie den Listener hinzu:

# '''Öffnen''' Sie die Formulareigenschaften.
# '''Klicken''' Sie auf ''Listeners''.
# '''Wählen''' Sie das Ereignis <code>beforeSubmitData</code> aus und geben Sie den Namen Ihrer JavaScript-Funktion ein. In unserem Beispiel lautet dieser <code>CalcProgress</code>.

 
 

Das Ereignis <code>beforeSubmitData</code> wird beim Speichern des Formulars ausgelöst. Änderungen an Kontrollkästchen-Auswahlen werden daher während der Bearbeitung nicht unmittelbar berücksichtigt. Der Fortschrittsbalken wird erst nach dem Speichern des Formulars aktualisiert.

 

=== Vollständiges Implementierungsbeispiel ===
Dieses Beispiel basiert auf der oben beschriebenen JavaScript-Logik (insbesondere den erforderlichen Namenskonventionen). Zusätzlich wird in der untenstehenden JSON-Konfiguration ein Schema für die Seitennamensgebung definiert. Jede Checkliste wird als eigene Wiki-Seite unter dem Präfix ''ExampleChecklist/'' gespeichert, wobei der Name der Checkliste Bestandteil des Seitentitels ist.

Um dieses Beispiel zu verwenden, speichern Sie ein neues Formular (z. B. ''ExampleChecklist.form'') und kopieren Sie die folgende Konfiguration in die Definitionsquelle:

<syntaxhighlight lang="json">
{
"title": "Example Progress Bar",
"showTitle": true,
"showFormName": false,
"buttonsFloat": false,
"categories": [],
"sealAfterCreation": false,
"enableProgressSave": false,
"enableEditSummary": false,
"rlDependencies": [],
"useFormRevs": false,
"includable": false,
"extends": "",
"abstract": false,
"partial": false,
"target": {
"type": "json-on-wikipage",
"predefined_title": "ExampleChecklist/{{checklistname}}"
},
"show_target_afterAction": false,
"listeners": {
"beforeSubmitData": "jscb:CalcProgress"
},
"lang": "json",
"items": [
{
"name": "checklistname",
"label": "Checklist name",
"help": "",
"noLayout": false,
"showOn": [
"create"
],
"editableOn": [
"create"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"type": "text"
},
{
"name": "progress",
"label": "Progress",
"help": "",
"noLayout": true,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "margin:1em auto!important; max-width:100%",
"widgetCustomProps": {
"widget_progress": "0"
},
"widget_listeners": [],
"type": "progress_bar"
},
{
"name": "checkbox_multi-getting_started",
"label": "Getting started",
"help": "",
"noLayout": false,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"horizontal": false,
"options": [
{
"data": "check-profile",
"label": "Provide personal and role information"
},
{
"data": "check-documents",
"label": "Submit required documents"
},
{
"data": "check-intro",
"label": "Review introduction materials"
}
],
"type": "checkbox_multiselect"
},
{
"name": "checkbox_multi-workplace_setup",
"label": "Workplace setup",
"help": "",
"noLayout": false,
"showOn": [
"create",
"edit",
"view"
],
"editableOn": [
"create",
"edit"
],
"widget_classes": [],
"style": "",
"widgetCustomProps": [],
"widget_listeners": [],
"value": "",
"required": false,
"horizontal": false,
"options": [
{
"data": "check-equipment",
"label": "Provide equipment (laptop, phone)"
},
{
"data": "check-access",
"label": "Grant access to required systems"
},
{
"data": "check-intro",
"label": "Meet the team"
}
],
"type": "checkbox_multiselect"
}
]
}

</syntaxhighlight>

Handbuch:Erweiterung/Forms

2026-06-02T14:11:32Z

Bhuber:

Die '''Forms'''-Erweiterung ermöglicht es, eine Wikiseite oder einen Benutzerdialog als Formular zu gestalten. Sie wird außerdem in Verbindung mit der Erweiterung [[Handbuch:Erweiterung/Workflows|Workflows]] verwendet, um Eingabeformulare für Workflow-Daten bereitzustellen.
==Einführung==
Um beispielsweise eine Checkliste als Formular zu erstellen, sind folgende Schritte erforderlich:
#'''Erstellen der Checklisten-Formulardefinition'''
#'''Erstellen von Checklisteninstanzen direkt über die Formulardefinitionsseite'''

Im folgenden Beispiel werden die ersten Felder für eine Veranstaltung erstellt, bei der hygienerelevante Informationen im Zusammenhang mit Lebensmitteln dokumentiert werden müssen.
[[Datei:checklist-event-screenshot.png|alt=Beispiel einer Veranstaltungs-Checkliste|center|thumb|550x550px|Beispiel einer Veranstaltungs-Checkliste]]

==Ein Checklistenformular erstellen==
#'''Erstellen''' der Seite ''EventChecklisteHygiene.form''.
[[Datei:Extension Forms create form.png|center|thumb|400x400px|alt=Dialog zum Erstellen einer Seite|Neue Formularseite erstellen]]
Dadurch wird der Formulareditor geöffnet.
[[Datei:Extension Forms form editor.png|alt=Elemente des Formulareditors|center|thumb|700x700px|Formulareditor]]
#'''Hinzufügen''' eines Formularabschnitts:
##Das Element ''Section label'' unter ''Form Elements > Other'' '''auswählen''' (siehe Markierung 2 im Screenshot) und bei gedrückter linker Maustaste in den interaktiven Formulareditor ziehen.
##Irgendwo in die Zeile ''Section label'' '''klicken'''. Der Feldinspektor wird geöffnet.
##Den ''Name'' '''eingeben'''. Dieser wird als Feld-ID in der Datenbank gespeichert und sollte daher keine Sonderzeichen enthalten.
##Den ''Title'' für die Abschnittsüberschrift '''eingeben'''. Dieser wird als sichtbare Beschriftung angezeigt.
[[Datei:Extension Forms add section header.png|alt=Inspektor für das Element Section label|center|thumb|700x700px|Erste Abschnittsüberschrift hinzufügen]]
#'''Erstellen''' der Formularfelder für den Abschnitt ''Event''. Im folgenden Beispiel wird ein Textfeld hinzugefügt.
##Das Element ''Text'' aus ''Form Elements > Inputs'' unter die Abschnittsüberschrift '''ziehen'''.
##Irgendwo in die Zeile des Textfelds '''klicken'''. Der Feldinspektor wird geöffnet.
##Den ''Name'' '''eingeben'''. Dieser dient als Datenbank-ID für das Feld und sollte daher keine Sonderzeichen enthalten.
##Das ''Label'' '''eingeben''. Dieses wird als sichtbare Feldbeschriftung angezeigt.
##Weitere Formularelemente '''hinzufügen'''.
#Auf ''Speichern'' '''klicken''. Das Formular steht nun als ''EventChecklisteHygiene.form'' zur Verfügung.
[[Datei:Checklist-view.png|alt=Gespeichertes Formular|center|thumb|650x650px|Gespeichertes Formular]]
==Weitere Formularelemente hinzufügen==
Nun können weitere Felder hinzugefügt werden:
[[Handbuch:Erweiterung/Forms/Formularelemente|Übersicht aller Formularelemente, die Formularen hinzugefügt werden können.]]
==Eine Checklisteninstanz erstellen==
Um eine Checkliste aus dem Formular zu erstellen:
# Einen Veranstaltungsnamen '''eingeben'''
# Die Formularfelder '''ausfüllen'''
# Auf ''Abschicken'' '''klicken'''
Die Checkliste wird nun im Wiki gespeichert und kann anschließend weiter bearbeitet werden.
==Alternatives Ziel: E-Mail==
Anstatt beim Speichern des Formulars eine Wikiseite zu erstellen, können die Formulardaten an ein E-Mail-Konto gesendet werden.
('''Hinweis:''' Der E-Mail-Empfänger muss durch einen Serveradministrator auf dem Server konfiguriert werden, damit er in Formularen verfügbar ist.)
[[Datei:E-mail image.png|alt=E-Mail-Ziel|center|thumb|650x650px|E-Mail-Ziel]]
*'''Zieltyp:''' Email
*'''Empfänger:''' Mögliche Empfänger müssen aus Sicherheitsgründen auf dem Server konfiguriert worden sein. Beispiel:<syntaxhighlight lang="text">
'Marketing' => "marketing@example.com",
'Administration' => 'WikiSysop'
];</syntaxhighlight>
*'''Betreff:''' Vorhandene Formularfelder können hier als Variablen verwendet werden. Der jeweilige Wert wird aus dem Formular übernommen.
*'''Inhalt:''' Wie beim Betreff können auch hier vorhandene Formularfelder als Variablen verwendet werden. Der jeweilige Wert wird aus dem Formular übernommen.
[[mediawikiwiki:Help:Magic_words#Localisation|Lokalisierungsnachrichten]] können in Kombination mit Formularfeldern ebenfalls als Betreff oder E-Mail-Inhalt verwendet werden:
==Alternatives Ziel: Vorlage==
Anstatt eine Standard-Wikiseite zu erstellen oder die Formulardaten per E-Mail zu versenden, kann eine [[Handbuch:Vorlagen|Vorlage]] als Ziel für ein Formular verwendet werden. 
In diesem Fall werden die übermittelten Formulardaten genutzt, um auf Basis einer vorhandenen Vorlagen-Struktur eine neue Wikiseite zu erstellen. Die Formularwerte werden dabei in die Platzhalter der Vorlage eingefügt.
*'''Voraussetzungen:''' Bevor ein Vorlagen-Ziel verwendet werden kann, muss bereits eine entsprechende Vorlagen-Seite im Wiki vorhanden sein. Die Vorlage dient als strukturelle Grundlage für die generierte Seite. Formularfelder werden den in der Vorlage definierten Platzhaltern zugeordnet.
[[Datei:Template Target.png|alt=Auswahl von Vorlage als Formularziel|center|thumb|550x550px|Template-Ziel]]
*'''Zieltyp:''' Vorlage
*'''Predefined title:''' Optionaler Standardtitel für die neu erstellte Seite oder zur Vorgabe eines Seitenpfads (z. B. um alle generierten Seiten als Unterseiten einer bestimmten Seite zu erstellen)
*'''Zu verwendende Vorlage:''' Name des vorhandenen Templates, das für die Seitenerstellung verwendet wird
Es wird empfohlen, für Formular und Template identische oder eindeutig zusammengehörige Bezeichnungen zu verwenden. Dies erleichtert die Wartung und macht Konfigurationsabhängigkeiten leichter nachvollziehbar.
Diese Zielart wird typischerweise verwendet, um standardisierte und lesbare Wikiseiten zu erzeugen. JSON-basierte Ziele werden dagegen häufiger für die strukturierte Weiterverarbeitung von Daten eingesetzt.
==Styling anpassen==
===Common.css===
Um einzelne Elemente im Formular zu gestalten, kann im Optionsdialog der Reiter ''Styling'' verwendet werden. Dort lässt sich ein CSS-Klassenname eintragen. Das eigentliche Styling wird anschließend auf der Seite ''MediaWiki:Common.css'' definiert (Administratorrechte erforderlich).
So wird die Abschnittsüberschrift gestaltet:
#Den Reiter ''Styling'' im Optionsmenü des Feldes ''Event heading'' '''öffnen'''
#Eine neue CSS-Klasse '''hinzufügen''' und einen Selektornamen im Feld ''CSS Classes'' eintragen, z. B. ''frm-sectionhd''
[[Datei:forms-css-class-de.png|alt=CSS-Klasse hinzufügen|center|thumb|650x650px|CSS-Klasse hinzufügen]]
#Die folgenden Stildefinitionen auf der Seite ''MediaWiki:Common.css'' '''einfügen''':
[[Datei:forms-css-class-view-de.png|alt=Abschnittsüberschrift mit individuellem Styling|center|thumb|650x650px|Abschnittsüberschrift mit individuellem Styling]] 
Falls keine Berechtigung zum Anzeigen oder Bearbeiten dieser Seite besteht, können Stilinformationen auch direkt über Inline-Styling für einzelne Formularelemente hinterlegt werden.
===Inline-Styling===
Ohne Zugriff auf ''MediaWiki:Common.css'' können Stilinformationen direkt im Formular eingetragen werden. Bei häufig wiederkehrenden Stildefinitionen ist dies jedoch weniger effizient als die Verwendung von CSS-Klassen in ''MediaWiki:Common.css''. Im folgenden Beispiel wird das zuvor verwendete Styling der Abschnittsüberschrift direkt als Inline-Styling angewendet. Dazu erneut das Optionsmenü des Formularelements ''ech-event'' öffnen. Anschließend den folgenden Eintrag im Feld ''Styling'' hinterlegen und die Änderung speichern:
<syntaxhighlight lang="css">
border-bottom: 1px solid #a6a6a7; background:#f1f3f9; padding:6px;margin:30px 0;
</syntaxhighlight>
[[Datei:forms-css-inlinestyling-en.png|alt=Inline-Styling eines Formularelements|center|thumb|650x650px|Inline-Styling eines Formularelements]]

Handbuch:Erweiterung/Forms/Formularelemente

2026-06-02T14:10:05Z

Bhuber: Die Seite wurde neu angelegt: „== Formularelemente == Folgende Formularfelder können zu einem Formular hinzugefügt werden: === Eingabefelder === {| class="wikitable compact" style="width: 100%;" !Feld !Eingabetyp !Funktion |- |Buch |book |Auto-Vervollständigungsfeld zum Finden von Seiten im Namensraum „Book“ |- |Text |text |Standard-Textfeld |- |Textbereich |textarea |Mehrzeiliges Textfeld |- |Wikitext-Eingabe |wikitext |Mehrzeiliges Textfeld für Wikitext-Syntax |- |Kategorie-…“

== Formularelemente ==
Folgende Formularfelder können zu einem Formular hinzugefügt werden:

=== Eingabefelder ===
{| class="wikitable compact" style="width: 100%;"
!Feld
!Eingabetyp
!Funktion
|-
|Buch
|book
|Auto-Vervollständigungsfeld zum Finden von Seiten im Namensraum „Book“
|-
|Text
|text
|Standard-Textfeld
|-
|Textbereich
|textarea
|Mehrzeiliges Textfeld
|-
|Wikitext-Eingabe
|wikitext
|Mehrzeiliges Textfeld für Wikitext-Syntax
|-
|Kategorie-Multiauswahl
|category_multiselect
|Token-Feld zum Hinzufügen einer oder mehrerer Kategorien zur Seite; Werte werden mit der <code>Eingabetaste</code> getrennt
|-
|Kontrollkästchen
|checkbox
|Einzelnes Kontrollkästchen
|-
|Menü-Tag-Multiauswahl
|menutag_multiselect
|Mehrfachwert-Eingabe; Werte werden mit der <code>Eingabetaste</code> getrennt
|-
|Kontrollkästchen-Multiauswahl
|checkbox_multiselect
|Gruppe von Kontrollkästchen (ermöglicht die Auswahl mehrerer Werte)
|-
|Dropdown
|dropdown
|Dropdown-Liste mit vordefinierten Optionen
|-
|Zahl
|number
|Ganzzahlfeld
|-
|Optionsfeld
|radio
|Einzelnes Optionsfeld (wird in manuell ausgefüllten Formularen normalerweise nicht verwendet)
|-
|Optionsfeldgruppe
|radio_multiselect
|Gruppe von Optionsfeldern (ermöglicht die Auswahl genau eines Wertes)
|-
|Dateiauswahl
|select_file
|Wählt eine Datei im Wiki aus
|-
|Titel-Eingabe
|title
|Auto-Vervollständigungsfeld für Wiki-Seiten
|-
|Kombinationsfeld
|combobox
|Kombiniert ein ''Textfeld'' und eine ''Dropdown-Liste''. Benutzer können einen vordefinierten Wert auswählen oder einen eigenen Wert eingeben.
|-
|Passwort-Eingabe
|password
|Erstellt ein Passwortfeld mit Passwort- und Passwort-Wiederholungsfeld. Wird für die Zieltypen <code>JSON on wikipage</code>, <code>Template</code> oder <code>Email</code> nicht verwendet, da das Passwort im Klartext gespeichert wird.
|-
|Tag-Eingabe
|tag
|Token-Feld zum Hinzufügen mehrerer Werte; Werte werden mit der <code>Eingabetaste</code> getrennt
|-
|Datum
|date
|Entspricht ''Date Picker''
|-
|Titel-Eingabe
|title
|Wählt Seitentitel im Wiki aus
|-
|Benutzer-Eingabe
|user_picker
|Im Wiki vorhandener Benutzername
|-
|Gruppen-Eingabe
|group_picker
|Im Wiki vorhandener Gruppenname
|-
|Gruppen-Multiauswahl
|group_multiselect
|Mehrere Gruppennamen
|-
|Benutzer-Multiauswahl
|user_multiselect
|Mehrere Benutzernamen
|-
|Titel-Multiauswahl
|title_multiselect
|Mehrere Seitentitel
|-
|Date Picker
|date_picker
|Kalender-Widget
|-
|Prozent
|percent
|Ganzzahliger Wert
|}

=== Weitere Elemente ===
{| class="wikitable compact" style="width: 100%;"
!Element
!Eingabetyp
!Beschreibung
|-
|Statischer Wikitext
|static_wikitext
|Nicht bearbeitbarer Text
|-
|Schaltfläche
|button
|Löst eine Aktion aus (erfordert einen definierten Event-Listener)
|-
|Meldungsbanner
|message
|Meldung, die an beliebiger Stelle im Formular angezeigt werden kann; der gewählte Typ (Hinweis, Fehler, Warnung, Erfolg) bestimmt die visuelle Darstellung
|-
|Teilformular-Import
|form_input
|Fügt Formularfelder aus einem anderen Formular hinzu
|-
|Symbol
|icon
| -
|-
|Indikator
|indicator
| -
|-
|Beschriftung
|label
| -
|-
|[[Manual:Extension/Forms/Progress bar|Fortschrittsbalken]]
|progress_bar
|Visuelle Darstellung der Anzahl abgeschlossener Schritte in einem Formular, beispielsweise einer Checkliste
|-
|Abschnittsüberschrift
|section_label
|Überschrift eines Formularabschnitts
|-
|Horizontale Linie
|hr
|Visuelle Trennlinie
|}

=== Optionen für Eingabefelder ===
Jedes Eingabefeld kann eine beliebige Kombination der folgenden Optionen besitzen:

{| class="wikitable compact" style="width: 100%;"
|+Allgemein
!Typ
!Feld
!Funktion
|-
| rowspan="6" |(alle)
|Name
|In der Datenbank gespeicherter Feldname (Sonderzeichen vermeiden)
|-
|Beschriftung
|Dem Benutzer angezeigte Feldbezeichnung
|-
|Hilfe
|Erstellt einen Tooltip neben der Beschriftung
|-
|Kein Layout
|Blendet die Beschriftung aus
|-
|Anzeigen bei
|Modus, in dem dieses Feld sichtbar ist
|-
|Bearbeitbar bei
|Legt fest, wann der Feldwert bearbeitet werden kann
|-
|Buch
|Rückgabe-Eigenschaft
|?
|}

{| class="wikitable compact"
|+Darstellung
!Typ
!Feld
!Funktion
|-
| rowspan="2" |(alle)
|CSS-Klassen
|Fügt individuelle CSS-Klassen zur Verwendung in ''MediaWiki:Common.css'' hinzu.
* Die Klasse wird direkt auf das Formularfeld angewendet und umfasst nicht die Beschriftung.
* Mehrere Klassen können gemeinsam oder einzeln angegeben werden.
|-
|Stil
|Definiert einen Inline-Stil, der nur dieses Feld betrifft. Der Stil wird auf den Wrapper angewendet und umfasst sowohl die Beschriftung als auch das Feld.
|-
| rowspan="2" |Textbereich, Wikitext-Eingabe
|Anzahl Zeilen
|Wird für Textbereiche verwendet
|-
|Platzhalter
|Text, der angezeigt wird, bevor der Benutzer einen Wert eingibt (hat keine Wirkung, wenn bereits ein Standardwert definiert ist)
|-
|Optionsfeldgruppe
|Kein Standardwert
|Stellt sicher, dass kein Optionsfeld vorausgewählt ist, wenn eine Vorauswahl nicht sinnvoll wäre
|-
|Optionsfeldgruppe, Kontrollkästchen-Multiauswahl
|Horizontales Layout
|Ordnet Kontrollkästchen oder Optionsfelder horizontal an
|-
| rowspan="3" |Schaltfläche
|Symbol
|Zeigt ein Symbol vor dem Text an (z. B. ein Bootstrap-Icon wie <code>bi bi-calendar</code>)
|-
|Indikator
|Zeigt ein Symbol nach dem Text an (z. B. ein Bootstrap-Icon wie <code>bi bi-arrow-right</code>)
|-
|Mit Rahmen
|Wenn deaktiviert, wird die Schaltfläche wie normaler Text dargestellt (und kann über CSS-Klassen wie <code>btn button-warning</code> gestaltet werden)
|}

{| class="wikitable compact"
|+Weitere Optionen
!Typ
!Feldgruppe
!Feld
!Funktion
|-
| rowspan="6" |(alle)
| rowspan="2" |Benutzerdefinierte Widget-Eigenschaften
|Schlüssel
|
|-
|Wert
|
|-
| rowspan="2" |Listener
|Ereignis
|Von [https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.html OO.ui-Widgets] unterstütztes Ereignis, z. B. ''change'', ''enter'', ''focus'', ''blur''
|-
|Callback
|Funktion, die beim Auftreten des Ereignisses aufgerufen wird (kann beispielsweise in MediaWiki:Common.js definiert werden)
|-
| rowspan="2" |
|Standardwert / Vorausgewählt
|Wert, der verwendet wird, wenn der Benutzer keinen Wert angibt; beim Feldtyp ''checkbox'' lautet die Option stattdessen ''Vorausgewählt''
|-
|Pflichtfeld
|Das Formular kann ohne einen Wert in diesem Feld nicht abgesendet werden
|-
|Passwort
|
|Passwortstärke
|schwach: 
mittel: 
stark:
|-
| rowspan="2" |Tag
|
|Eingabeposition
|inline: 
outline:
|-
|
|Beliebige Werte zulassen
|Erlaubt die Eingabe anderer Werte als der definierten zulässigen Werte (nur erforderlich, wenn zulässige Werte definiert wurden)
|}

== Formulareinstellungen ==

=== Darstellung ===
{| class="wikitable compact"
!Feld
!Funktion
|-
|Titel
|Anzeigetitel des Formulars
|-
|Titel anzeigen
|Zeigt den Formulartitel oberhalb jeder Formularinstanz an
|-
|Formularname anzeigen
|Zeigt den Namen des Formulars als erstes Formularelement mit der Beschriftung ''Verwendetes Formular'' an
|}

=== Verhalten ===
{| class="wikitable compact"
!Feld
!Funktion
|-
|Kategorien
|Fügt jeder Formularinstanz Kategorien hinzu; Werte werden mit der <code>Eingabetaste</code> getrennt
|-
|Nach Erstellung versiegeln
|Formularinstanzen können nach dem ersten Speichern nicht mehr bearbeitet werden
|-
|Zwischenspeichern aktivieren
|Formularinstanzen zeigen sowohl eine <code>Speichern</code>- als auch eine <code>Speichern & Schließen</code>-Schaltfläche an;
die Schaltfläche <code>Speichern</code> speichert die aktuellen Formularwerte und belässt das Formular im Bearbeitungsmodus.
|}

=== Infrastruktur ===
{| class="wikitable compact"
!Feld
!Funktion
|-
|Resource-Loader-Abhängigkeiten
|
|-
|Versionen nachverfolgen
|
|-
|Einbindbar
|Erweitert ein Formular
|-
|Abstrakt
|
|-
|Teilformular
|
|}

=== Ziel ===
{| class="wikitable compact"
!Feld
!Funktion
|-
|Zieltyp
|
|-
|Vordefinierter Seitentitel für mit diesem Formular erstellte Seiten
|Verwenden Sie den Feldnamen, um den Wert eines Formularfeldes einzusetzen.
Beispiel: Wenn ein Feld den Namen <code>company_name</code> besitzt, kann <code><nowiki>{{company_name}}</nowiki></code> als Seitentitel oder als Teil des Seitentitels verwendet werden.
|}

=== Listener ===
{| class="wikitable compact"
!Feld
!Funktion
|-
|Ereignis
|Jeder Listener reagiert auf eines der folgenden Ereignisse:

* ''initCompleteForm:'' Das Objekt wurde initialisiert
* ''parseComplete:'' JSON, Schema oder Konfiguration wurden vollständig verarbeitet
* ''renderComplete:'' Die Benutzeroberfläche wurde vollständig im DOM gerendert
* ''beforeSubmitData:'' Direkt vor dem Absenden der Daten
|-
|Callback
|Ruft eine Funktion auf, wenn das Ereignis eintritt;
siehe das Beispiel zum [[Manual:Extension/Forms/Progress bar|Fortschrittsbalken]].
|}

{{translation}}
__FORCETOC__

Datei:forms-css-inlinestyling-en.png

2026-06-02T11:48:52Z

Bhuber:

2026-06-02T11:33:55Z

Bhuber:

Datei:Extension Forms create form.png

2026-06-02T11:32:04Z

Bhuber:

Datei:checklist-event-screenshot.png

2026-06-02T11:27:17Z

Bhuber:

Handbuch:Erweiterung/Forms

2026-06-02T08:55:56Z

Bhuber:

Die '''Forms'''-Erweiterung ermöglicht es, eine Wikiseite oder einen Benutzerdialog als Formular zu gestalten. Sie wird außerdem in Verbindung mit der Erweiterung [[Handbuch:Erweiterung/Workflows|Workflows]] verwendet, um Eingabeformulare für Workflow-Daten bereitzustellen.
==Einführung==
Um beispielsweise eine Checkliste als Formular zu erstellen, sind folgende Schritte erforderlich:
#'''Erstellen der Checklisten-Formulardefinition'''
#'''Erstellen von Checklisteninstanzen direkt über die Formulardefinitionsseite'''

Im folgenden Beispiel werden die ersten Felder für eine Veranstaltung erstellt, bei der hygienerelevante Informationen im Zusammenhang mit Lebensmitteln dokumentiert werden müssen.
[[Datei:checklist-event-screenshot.png|alt=Beispiel einer Veranstaltungs-Checkliste|center|thumb|550x550px|Beispiel einer Veranstaltungs-Checkliste]]

==Ein Checklistenformular erstellen==
#'''Erstellen''' der Seite ''EventChecklisteHygiene.form''.
[[Datei:Extension Forms create form.png|center|thumb|400x400px|alt=Dialog zum Erstellen einer Seite|Neue Formularseite erstellen]]
Dadurch wird der Formulareditor geöffnet.
[[Datei:Extension Forms form editor.png|alt=Elemente des Formulareditors|center|thumb|700x700px|Formulareditor]]
#'''Hinzufügen''' eines Formularabschnitts:
##Das Element ''Section label'' unter ''Form Elements > Other'' '''auswählen''' (siehe Markierung 2 im Screenshot) und bei gedrückter linker Maustaste in den interaktiven Formulareditor ziehen.
##Irgendwo in die Zeile ''Section label'' '''klicken'''. Der Feldinspektor wird geöffnet.
##Den ''Name'' '''eingeben'''. Dieser wird als Feld-ID in der Datenbank gespeichert und sollte daher keine Sonderzeichen enthalten.
##Den ''Title'' für die Abschnittsüberschrift '''eingeben'''. Dieser wird als sichtbare Beschriftung angezeigt.
[[Datei:Extension Forms add section header.png|alt=Inspektor für das Element Section label|center|thumb|700x700px|Erste Abschnittsüberschrift hinzufügen]]
#'''Erstellen''' der Formularfelder für den Abschnitt ''Event''. Im folgenden Beispiel wird ein Textfeld hinzugefügt.
##Das Element ''Text'' aus ''Form Elements > Inputs'' unter die Abschnittsüberschrift '''ziehen'''.
##Irgendwo in die Zeile des Textfelds '''klicken'''. Der Feldinspektor wird geöffnet.
##Den ''Name'' '''eingeben'''. Dieser dient als Datenbank-ID für das Feld und sollte daher keine Sonderzeichen enthalten.
##Das ''Label'' '''eingeben''. Dieses wird als sichtbare Feldbeschriftung angezeigt.
##Weitere Formularelemente '''hinzufügen'''.
#Auf ''Speichern'' '''klicken''. Das Formular steht nun als ''EventChecklisteHygiene.form'' zur Verfügung.
[[Datei:Manual:Checklist-view.png|alt=Gespeichertes Formular|center|thumb|650x650px|Gespeichertes Formular]]
==Weitere Formularelemente hinzufügen==
Nun können weitere Felder hinzugefügt werden:
[[Datei:Extension/Forms/Form elements and settings|Übersicht aller Formularelemente, die Formularen hinzugefügt werden können.]]
==Eine Checklisteninstanz erstellen==
Um eine Checkliste aus dem Formular zu erstellen:
# Einen Veranstaltungsnamen '''eingeben'''
# Die Formularfelder '''ausfüllen'''
# Auf ''Abschicken'' '''klicken'''
Die Checkliste wird nun im Wiki gespeichert und kann anschließend weiter bearbeitet werden.
==Alternatives Ziel: E-Mail==
Anstatt beim Speichern des Formulars eine Wikiseite zu erstellen, können die Formulardaten an ein E-Mail-Konto gesendet werden.
('''Hinweis:''' Der E-Mail-Empfänger muss durch einen Serveradministrator auf dem Server konfiguriert werden, damit er in Formularen verfügbar ist.)
[[Datei:Manual:image.png|alt=E-Mail-Ziel|center|thumb|650x650px|E-Mail-Ziel]]
*'''Zieltyp:''' Email
*'''Empfänger:''' Mögliche Empfänger müssen aus Sicherheitsgründen auf dem Server konfiguriert worden sein. Beispiel:<syntaxhighlight lang="text">
'Marketing' => "marketing@example.com",
'Administration' => 'WikiSysop'
];</syntaxhighlight>
*'''Betreff:''' Vorhandene Formularfelder können hier als Variablen verwendet werden. Der jeweilige Wert wird aus dem Formular übernommen.
*'''Inhalt:''' Wie beim Betreff können auch hier vorhandene Formularfelder als Variablen verwendet werden. Der jeweilige Wert wird aus dem Formular übernommen.
[[mediawikiwiki:Help:Magic_words#Localisation|Lokalisierungsnachrichten]] können in Kombination mit Formularfeldern ebenfalls als Betreff oder E-Mail-Inhalt verwendet werden:
==Alternatives Ziel: Vorlage==
Anstatt eine Standard-Wikiseite zu erstellen oder die Formulardaten per E-Mail zu versenden, kann eine [[Handbuch:Vorlagen|Vorlage]] als Ziel für ein Formular verwendet werden. 
In diesem Fall werden die übermittelten Formulardaten genutzt, um auf Basis einer vorhandenen Vorlagen-Struktur eine neue Wikiseite zu erstellen. Die Formularwerte werden dabei in die Platzhalter der Vorlage eingefügt.
*'''Voraussetzungen:''' Bevor ein Vorlagen-Ziel verwendet werden kann, muss bereits eine entsprechende Vorlagen-Seite im Wiki vorhanden sein. Die Vorlage dient als strukturelle Grundlage für die generierte Seite. Formularfelder werden den in der Vorlage definierten Platzhaltern zugeordnet.
[[Datei:Manual:Template Target.jpg|alt=Auswahl von Vorlage als Formularziel|center|thumb|550x550px|Template-Ziel]]
*'''Zieltyp:''' Vorlage
*'''Predefined title:''' Optionaler Standardtitel für die neu erstellte Seite oder zur Vorgabe eines Seitenpfads (z. B. um alle generierten Seiten als Unterseiten einer bestimmten Seite zu erstellen)
*'''Zu verwendende Vorlage:''' Name des vorhandenen Templates, das für die Seitenerstellung verwendet wird
Es wird empfohlen, für Formular und Template identische oder eindeutig zusammengehörige Bezeichnungen zu verwenden. Dies erleichtert die Wartung und macht Konfigurationsabhängigkeiten leichter nachvollziehbar.
Diese Zielart wird typischerweise verwendet, um standardisierte und lesbare Wikiseiten zu erzeugen. JSON-basierte Ziele werden dagegen häufiger für die strukturierte Weiterverarbeitung von Daten eingesetzt.
==Styling anpassen==
===Common.css===
Um einzelne Elemente im Formular zu gestalten, kann im Optionsdialog der Reiter ''Styling'' verwendet werden. Dort lässt sich ein CSS-Klassenname eintragen. Das eigentliche Styling wird anschließend auf der Seite ''MediaWiki:Common.css'' definiert (Administratorrechte erforderlich).
So wird die Abschnittsüberschrift gestaltet:
#Den Reiter ''Styling'' im Optionsmenü des Feldes ''Event heading'' '''öffnen'''
#Eine neue CSS-Klasse '''hinzufügen''' und einen Selektornamen im Feld ''CSS Classes'' eintragen, z. B. ''frm-sectionhd''
[[Datei:Manual:forms-css-class-en.png|alt=CSS-Klasse hinzufügen|center|thumb|650x650px|CSS-Klasse hinzufügen]]
#Die folgenden Stildefinitionen auf der Seite ''MediaWiki:Common.css'' '''einfügen''':
[[Datei:Manual:forms-css-class-view-en.png|alt=Abschnittsüberschrift mit individuellem Styling|center|thumb|650x650px|Abschnittsüberschrift mit individuellem Styling]] 
Falls keine Berechtigung zum Anzeigen oder Bearbeiten dieser Seite besteht, können Stilinformationen auch direkt über Inline-Styling für einzelne Formularelemente hinterlegt werden.
===Inline-Styling===
Ohne Zugriff auf ''MediaWiki:Common.css'' können Stilinformationen direkt im Formular eingetragen werden. Bei häufig wiederkehrenden Stildefinitionen ist dies jedoch weniger effizient als die Verwendung von CSS-Klassen in ''MediaWiki:Common.css''. Im folgenden Beispiel wird das zuvor verwendete Styling der Abschnittsüberschrift direkt als Inline-Styling angewendet. Dazu erneut das Optionsmenü des Formularelements ''ech-event'' öffnen. Anschließend den folgenden Eintrag im Feld ''Styling'' hinterlegen und die Änderung speichern:
<syntaxhighlight lang="css">
border-bottom: 1px solid #a6a6a7; background:#f1f3f9; padding:6px;margin:30px 0;
</syntaxhighlight>
[[Datei:Manual:forms-css-inlinestyling-en.png|alt=Inline-Styling eines Formularelements|center|thumb|650x650px|Inline-Styling eines Formularelements]]

Handbuch:Erweiterung/Forms

2026-06-02T08:36:27Z

Bhuber: Die Seite wurde neu angelegt: „The '''Forms'''-Erweiterung ermöglicht es, eine Wikiseite oder einen Benutzerdialog als Formular zu gestalten. Sie wird außerdem in Verbindung mit der Erweiterung Workflows verwendet, um Eingabeformulare für Workflow-Daten bereitzustellen. ==Einführung== Um beispielsweise eine Checkliste als Formular zu erstellen, sind folgende Schritte erforderlich: #'''Erstellen der Checklisten-Formulardefinition''' #'''Erstellen v…“

The '''Forms'''-Erweiterung ermöglicht es, eine Wikiseite oder einen Benutzerdialog als Formular zu gestalten. Sie wird außerdem in Verbindung mit der Erweiterung [[Handbuch:Erweiterung/Workflows|Workflows]] verwendet, um Eingabeformulare für Workflow-Daten bereitzustellen.
==Einführung==
Um beispielsweise eine Checkliste als Formular zu erstellen, sind folgende Schritte erforderlich:
#'''Erstellen der Checklisten-Formulardefinition'''
#'''Erstellen von Checklisteninstanzen direkt über die Formulardefinitionsseite'''

Im folgenden Beispiel werden die ersten Felder für eine Veranstaltung erstellt, bei der hygienerelevante Informationen im Zusammenhang mit Lebensmitteln dokumentiert werden müssen.
[[Datei:checklist-event-screenshot.png|alt=Beispiel einer Veranstaltungs-Checkliste|center|thumb|550x550px|Beispiel einer Veranstaltungs-Checkliste]]

==Ein Checklistenformular erstellen==
#'''Erstellen''' der Seite ''EventChecklisteHygiene.form''.
[[Datei:Extension Forms create form.png|center|thumb|400x400px|alt=Dialog zum Erstellen einer Seite|Neue Formularseite erstellen]]
Dadurch wird der Formulareditor geöffnet.
[[Datei:Extension Forms form editor.png|alt=Elemente des Formulareditors|center|thumb|700x700px|Formulareditor]]
#'''Hinzufügen''' eines Formularabschnitts:
##Das Element ''Section label'' unter ''Form Elements > Other'' '''auswählen''' (siehe Markierung 2 im Screenshot) und bei gedrückter linker Maustaste in den interaktiven Formulareditor ziehen.
##Irgendwo in die Zeile ''Section label'' '''klicken'''. Der Feldinspektor wird geöffnet.
##Den ''Name'' '''eingeben'''. Dieser wird als Feld-ID in der Datenbank gespeichert und sollte daher keine Sonderzeichen enthalten.
##Den ''Title'' für die Abschnittsüberschrift '''eingeben'''. Dieser wird als sichtbare Beschriftung angezeigt.
[[Datei:Extension Forms add section header.png|alt=Inspektor für das Element Section label|center|thumb|700x700px|Erste Abschnittsüberschrift hinzufügen]]
#'''Erstellen''' der Formularfelder für den Abschnitt ''Event''. Im folgenden Beispiel wird ein Textfeld hinzugefügt.
##Das Element ''Text'' aus ''Form Elements > Inputs'' unter die Abschnittsüberschrift '''ziehen'''.
##Irgendwo in die Zeile des Textfelds '''klicken'''. Der Feldinspektor wird geöffnet.
##Den ''Name'' '''eingeben'''. Dieser dient als Datenbank-ID für das Feld und sollte daher keine Sonderzeichen enthalten.
##Das ''Label'' '''eingeben''. Dieses wird als sichtbare Feldbeschriftung angezeigt.
##Weitere Formularelemente '''hinzufügen'''.
#Auf ''Speichern'' '''klicken''. Das Formular steht nun als ''EventChecklisteHygiene.form'' zur Verfügung.
[[Datei:Manual:Checklist-view.png|alt=Gespeichertes Formular|center|thumb|650x650px|Gespeichertes Formular]]
==Weitere Formularelemente hinzufügen==
Nun können weitere Felder hinzugefügt werden:
[[Datei:Extension/Forms/Form elements and settings|Übersicht aller Formularelemente, die Formularen hinzugefügt werden können.]]
==Eine Checklisteninstanz erstellen==
Um eine Checkliste aus dem Formular zu erstellen:
# Einen Veranstaltungsnamen '''eingeben'''
# Die Formularfelder '''ausfüllen'''
# Auf ''Abschicken'' '''klicken'''
Die Checkliste wird nun im Wiki gespeichert und kann anschließend weiter bearbeitet werden.
==Alternatives Ziel: E-Mail==
Anstatt beim Speichern des Formulars eine Wikiseite zu erstellen, können die Formulardaten an ein E-Mail-Konto gesendet werden.
('''Hinweis:''' Der E-Mail-Empfänger muss durch einen Serveradministrator auf dem Server konfiguriert werden, damit er in Formularen verfügbar ist.)
[[Datei:Manual:image.png|alt=E-Mail-Ziel|center|thumb|650x650px|E-Mail-Ziel]]
*'''Zieltyp:''' Email
*'''Empfänger:''' Mögliche Empfänger müssen aus Sicherheitsgründen auf dem Server konfiguriert worden sein. Beispiel:<syntaxhighlight lang="text">
'Marketing' => "marketing@example.com",
'Administration' => 'WikiSysop'
];</syntaxhighlight>
*'''Betreff:''' Vorhandene Formularfelder können hier als Variablen verwendet werden. Der jeweilige Wert wird aus dem Formular übernommen.
*'''Inhalt:''' Wie beim Betreff können auch hier vorhandene Formularfelder als Variablen verwendet werden. Der jeweilige Wert wird aus dem Formular übernommen.
[[mediawikiwiki:Help:Magic_words#Localisation|Lokalisierungsnachrichten]] können in Kombination mit Formularfeldern ebenfalls als Betreff oder E-Mail-Inhalt verwendet werden:
==Alternatives Ziel: Vorlage==
Anstatt eine Standard-Wikiseite zu erstellen oder die Formulardaten per E-Mail zu versenden, kann eine [[Handbuch:Vorlagen|Vorlage]] als Ziel für ein Formular verwendet werden. 
In diesem Fall werden die übermittelten Formulardaten genutzt, um auf Basis einer vorhandenen Vorlagen-Struktur eine neue Wikiseite zu erstellen. Die Formularwerte werden dabei in die Platzhalter der Vorlage eingefügt.
*'''Voraussetzungen:''' Bevor ein Vorlagen-Ziel verwendet werden kann, muss bereits eine entsprechende Vorlagen-Seite im Wiki vorhanden sein. Die Vorlage dient als strukturelle Grundlage für die generierte Seite. Formularfelder werden den in der Vorlage definierten Platzhaltern zugeordnet.
[[Datei:Manual:Template Target.jpg|alt=Auswahl von Vorlage als Formularziel|center|thumb|550x550px|Template-Ziel]]
*'''Zieltyp:''' Vorlage
*'''Predefined title:''' Optionaler Standardtitel für die neu erstellte Seite oder zur Vorgabe eines Seitenpfads (z. B. um alle generierten Seiten als Unterseiten einer bestimmten Seite zu erstellen)
*'''Zu verwendende Vorlage:''' Name des vorhandenen Templates, das für die Seitenerstellung verwendet wird
Es wird empfohlen, für Formular und Template identische oder eindeutig zusammengehörige Bezeichnungen zu verwenden. Dies erleichtert die Wartung und macht Konfigurationsabhängigkeiten leichter nachvollziehbar.
Diese Zielart wird typischerweise verwendet, um standardisierte und lesbare Wikiseiten zu erzeugen. JSON-basierte Ziele werden dagegen häufiger für die strukturierte Weiterverarbeitung von Daten eingesetzt.
==Styling anpassen==
===Common.css===
Um einzelne Elemente im Formular zu gestalten, kann im Optionsdialog der Reiter ''Styling'' verwendet werden. Dort lässt sich ein CSS-Klassenname eintragen. Das eigentliche Styling wird anschließend auf der Seite ''MediaWiki:Common.css'' definiert (Administratorrechte erforderlich).
So wird die Abschnittsüberschrift gestaltet:
#Den Reiter ''Styling'' im Optionsmenü des Feldes ''Event heading'' '''öffnen'''
#Eine neue CSS-Klasse '''hinzufügen''' und einen Selektornamen im Feld ''CSS Classes'' eintragen, z. B. ''frm-sectionhd''
[[Datei:Manual:forms-css-class-en.png|alt=CSS-Klasse hinzufügen|center|thumb|650x650px|CSS-Klasse hinzufügen]]
#Die folgenden Stildefinitionen auf der Seite ''MediaWiki:Common.css'' '''einfügen''':
[[Datei:Manual:forms-css-class-view-en.png|alt=Abschnittsüberschrift mit individuellem Styling|center|thumb|650x650px|Abschnittsüberschrift mit individuellem Styling]] 
Falls keine Berechtigung zum Anzeigen oder Bearbeiten dieser Seite besteht, können Stilinformationen auch direkt über Inline-Styling für einzelne Formularelemente hinterlegt werden.
===Inline-Styling===
Ohne Zugriff auf ''MediaWiki:Common.css'' können Stilinformationen direkt im Formular eingetragen werden. Bei häufig wiederkehrenden Stildefinitionen ist dies jedoch weniger effizient als die Verwendung von CSS-Klassen in ''MediaWiki:Common.css''. 
Im folgenden Beispiel wird das zuvor verwendete Styling der Abschnittsüberschrift direkt als Inline-Styling angewendet. Dazu erneut das Optionsmenü des Formularelements ''ech-event'' öffnen. Anschließend den folgenden Eintrag im Feld ''Styling'' hinterlegen und die Änderung speichern:
<syntaxhighlight lang="css">
border-bottom: 1px solid #a6a6a7; background:#f1f3f9; padding:6px;margin:30px 0;
</syntaxhighlight>
[[Datei:Manual:forms-css-inlinestyling-en.png|alt=Inline-Styling eines Formularelements|center|thumb|650x650px|Inline-Styling eines Formularelements]]

Vorlagen Download/Startseite KMU

2026-04-30T09:18:13Z

Bhuber:

{{Hinweisbox|boxtype=Wichtig|icon=ja|Note text=Diese Vorlage wurde für BlueSpice '''4.3+''' konzipiert, da diese Version die nötigen Startseiten-Grundlagen beinhaltet. In früheren Versionen werden die Seiten nicht richtig dargestellt werden.}}
<div class="downloadarea">
[[Medium:HW-Startseite-KMU.zip|Download]]

[[Datei:Startseite KMU.png|450x450px]]
</div>
Die Vorlage ''Startseite KMU'' stellt ein Ausgangslayout für eine Portalseite/Hauptseite für ein Wiki von Klein- und Mittelständischen Unternehmen bereit. Es kann aber auch als Ausgangsvorlage für andere Zwecke verwendet werden. Im Gegensatz zu anderen Seitenvorlagen enthält diese Startseite die Vorlage "Mitarbeiter", die es ermöglicht die Profilbilder und Profilseiten von Benutzern einzubinden.

==Import der Vorlage==
{{Vorlagenimport|namezip=HW-Startseite-KMU.zip|namexml=HW-Startseite-KMU.xml}}

== Enthaltene Importdateien ==
Der xml-Import erstellt folgende Dateien in Ihrem Wiki:

* Hilfe:Startseite KMU
* Hilfe:Startseite KMU/Banner
* Hilfe:Startseite KMU/Iconnav
* Hilfe:Startseite KMU/Kontakt
* Hilfe:Startseite KMU/Letzte Änderungen
* Hilfe:Startseite KMU/Neue Mitarbeiter
* Hilfe:Startseite KMU/Neuigkeiten
* Hilfe:Startseite KMU/Protokolle
* Vorlage:Mitarbeiter
* Vorlage:Mitarbeiter/styles.css

== Verwendung ==
Die Startseitenvorlage kann nun über die Seite ''Vorlage:Startseite'' ausgewählt werden. Die Verwendung und Anpassung der Startseite ist auf der [[Handbuch:Startseitenvorlagen|Hilfeseite zu den Startseitenvorlagen]] dokumentiert. 

__NOTOC__

Datei:HW-Startseite-KMU.zip

2026-04-30T09:17:55Z

Bhuber: Bhuber lud eine neue Version von Datei:HW-Startseite-KMU.zip hoch

Datei:HW-SektionTranskludiert.zip

2026-04-28T14:10:38Z

Bhuber: Bhuber lud eine neue Version von Datei:HW-SektionTranskludiert.zip hoch

Vorlagen Download/Protokolle für Teams

2026-04-28T12:28:38Z

Bhuber:

<div class="downloadarea">
[[Medium:HW-protokolle-de.zip|Download]]

[[Datei:HW-Protokoll-de.png|450x450px]]</div>
Diese Vorlage enthält eine Übersichtsseite zum Erstellen Teams-basierter Protokolle. Eine Standard-Protokoll Seitenvorlage ist ebenfalls enthalten.

Die Vorlage kann mit weiteren Seitenvorlagen für Protokolle erweitert werden.
==Import der Vorlage==
Die benötigte Import-Datei befindet sich im Archiv ''HW-protokolle-de.zip''. Sie enthält die Datei ''HW-protokolle-de.xml''.

Führen Sie auf der Seite Spezial:Import in Ihrem Wiki folgende Schritte durch:

#'''Entpacken''' Sie die zip-Datei.
#'''Klicken''' Sie ''Browse...'' und wählen Sie die Datei ''HW-protokolle-de.xml''.
#'''Geben''' Sie ein Interwiki-Präfix '''an'''. Da dieses Feld erforderlich ist, geben Sie hier einfach ''hw'' (für hallowelt) ein.
#Belassen Sie die Vorauswahl ''Zu den Standard-Speicherorten'' importieren.
#'''Klicken''' Sie ''Datei hochladen...'' .

Die Vorlage ist nun in Ihrem Wiki verfügbar.

==Enthaltene Importdateien==
Der xml-Import erstellt folgende Dateien in Ihrem Wiki:

*Protokolle (im Hauptnamensraum)
*Vorlage:Protokolle
*Vorlage:Protokolle/styles.css
*Vorlage:Protokoll-standard (Seitenvorlage)

==Verwendung der Vorlage==

===Namensraum erstellen===
Im Laufe der Zeit werden Sie viele Seiten erstellen, die Besprechungsprotokolle enthalten. Es ist sinnvoll, die Protokolle in einem eigenen Namensraum abzulegen. Wir gehen davon aus, dass Sie zu diesem Zweck den '''Namensraum "Protokoll"''' erstellen. Die Vorlage für Protokolle setzt voraus, dass dieser Namensraum vorhanden ist.

Wenn Sie den Namensraum "Protokoll" in Ihrem Wiki nicht verwenden möchten, können Sie die Namensraum-Zuordnung auf der Seite
''Vorlage:Protokolle'' anpassen.

Ändern Sie hierfür im Tag ''inputbox'' das Präfix (prefix) ''Protokoll'':
<nowiki>{{#tag:inputbox|</nowiki>
<nowiki> </nowiki>...
<nowiki> </nowiki>prefix=Protokoll:<nowiki>{{{1|{{PAGENAME}}}}}</nowiki>/
auf einen eigenen Namensraum, hier als ''Ihr_Namensraum'' exemplifiziert:
<nowiki>{{#tag:inputbox|
...
prefix=Ihr_Namensraum:</nowiki><nowiki>{{{1|{{PAGENAME}}}}}</nowiki>/

===Navigationslink bereitstellen===
Um Besprechungsprotokolle einfach zu finden und zu erstellen, sollten Sie einen direkten [[Handbuch:Erweiterung/BlueSpiceDiscovery/Hauptnavigation_anpassen|Link zur Seite ''Protokolle'' in der Hauptnavigation bereitstellen]]. Standardmäßig befindet sich die Seite Besprechungsprotokoll im Hauptnamensraum. Sie können diese in jeden beliebigen Namensraum verschieben.

==Anpassung==

===Einzelne Teams erstellen===
Für jedes Teamfeld auf der Hauptseite für Protokolle müssen drei Anpassungen vorgenommen werden:

#Die '''Boxüberschrift''' mit dem Team-Namen.
#'''Der Teamname''' zur Erstellung des Seitenpfads. Dies ist das Hauptseitenpräfix, das für jedes Besprechungstermin für dieses Team vor dem Datum verwendet wird. Zum Beispiel ''Marketing/2021-07-01''.
#Die '''Seitenvorlage''', die Sie für die Besprechungsprotokolle des Teams verwenden möchten. Standardmäßig gibt es nur die Vorlage Vorlage:Protokolle-standard für Sitzungsprotokolle. Erstellen Sie einfach eine neue Seite im Vorlagen-Namensraum und weisen Sie diese hier als zu ladende (preload) Vorlage auf der Seite Protokolle im Hauptnamensraum zu.

Beispiel eines Teams:<syntaxhighlight lang="text">
<div class="block">
== Management==
{{Protokolle|Management|preload=Vorlage:Protokoll Management}}
</div>
</syntaxhighlight>Resultat:[[Datei:HW-protokoll-inputbox.png|alternativtext=Inputbox zum Erstellen eines Team-Protokolls|zentriert|mini|350x350px|Inputbox zum Erstellen eines Team-Protokolls]]

__NOTOC__

Vorlagen Download/Protokolle für Teams

2026-04-27T13:21:46Z

Bhuber: Bhuber lud eine neue Version von Datei:HW-Besprechungstyp.zip hoch

Vorlagen Download/Profilbilder

2026-04-14T09:39:27Z

Bhuber:

{{Textbox|boxtype=warning|header=Achtung|text=Diese Vorlage wird im Moment überarbeitet!|icon=yes}}
<div class="downloadarea">
[[Medium:HW-Profilegallery.zip|Download]]

[[Datei:HW-Profilegallery.png|450x450px]]

</div>
Die Vorlage ''Profilegallery'' erlaubt es, die Profilbilder der Benutzer einer Abteilung auf einer Seite anzuzeigen. Der Abteilungsname muss dabei auf der Profileseite der Benutzer eingetragen sein. Wenn kein Profilbild existiert, wird der Avatar des Benutzers angezeigt.
==Import der Vorlage==
Die benötigte Import-Datei befindet sich im Archiv ''HW-Profilegallery.zip''.

Führen Sie auf der Seite ''Spezial:Import'' in Ihrem Wiki folgende Schritte durch:

#'''Entpacken''' Sie die zip-Datei.
#'''Klicken''' Sie ''Browse...'' und wählen Sie die Datei ''HW-Profilegallery.xml''.
#'''Geben''' Sie ein Interwiki-Präfix '''an'''. Da dieses Feld erforderlich ist, geben Sie hier einfach ''hw'' (für hallowelt) ein.
#Belassen Sie die Vorauswahl ''Zu den Standard-Speicherorten'' importieren.
#'''Klicken''' Sie ''Datei hochladen...'' .

Die Vorlage ist nun in Ihrem Wiki verfügbar und kann über Formular bearbeitet werden.

==Profilbilder anzeigen==

# '''Fügen''' Sie die Vorlage über den visuellen Editor auf einer Seite '''ein'''.
# '''Geben''' Sie den Namen der Abteilung '''an'''.[[Datei:Profilbilder Abteilung.png|alternativtext=Eingabemaske Abteilung|zentriert|mini|550x550px|Angabe der Abteilung aus den Profilseiten]][[Datei:Profilbilder Profilseite mit Abteilung.png|alternativtext=Profilkasten aus der Profilseite|zentriert|mini|550x550px|Auf der Profilseite definierte Abteilung]]

Die Profilbilder werden nun angezeigt. 

__NOTOC__