Projekt

Allgemein

Profil

Webmasken individuell anpassen » Historie » Revision 4

Revision 3 (Andreas Rudin, 20.12.2016 21:33) → Revision 4/8 (Andreas Rudin, 20.12.2016 22:02)

h1. Webmasken individuell anpassen

Ich zeige hier einige Beispiele, wie Eingabemasken in kivitendo den eigenen Bedürfnissen angepasst werden können.
Ziel dabei:
* bessere Übersicht
* weniger Eingabefehler
* schnelleres Arbeiten

Als Beispiel verwende ich die Maske zum Erfassen und Editieren von KundInnen/LieferantInnen.
Die dafür benötigten Dateien finden wir im Pfad
@templates/webpages/customer_vendor/@

h2. Nicht benötigte Felder ausblenden:

Fax-Nummern von KundInnen und LieferantInnen werden nicht benötigt, da kein Fax vorhanden ist:

@./tabs/billing.html, Zeilen 140ff:@
<pre>
<!-- Fax auskommentiert
<tr>
<th align="right" nowrap>[% 'Fax' | $T8 %]</th>

<td>
[% L.input_tag('cv.fax', SELF.cv.fax, size = 30) %]
</td>
</tr>
-->
</pre>

h2. Felder umplatzieren:

Der Kundentyp soll direkt unter dem Kundennamen erscheinen, damit nicht vergessen wird, diesen auszufüllen:

1. ./tabs/billing.html, Zeilen 269ff auskommentieren und <tr> und </tr> Tags versetzen, um "Sprache" und "Lieferbedingungen" eine Zeile nach oben zu verschieben:

@./tabs/billing.html, Zeilen 257ff:@
<pre>
<!-- Tabellenzeilenbeginn nach oben verschoben -->
<tr>
[% IF ( SELF.all_currencies.size ) %]
<!-- <tr> -->
<th align="right">[% 'Currency' | $T8 %]</th>

<td>
[% L.select_tag('cv.currency_id', SELF.all_currencies, title_key = 'name', value_key = 'id', default = SELF.cv.currency_id) %]
</td>
<!-- </tr> -->
[% END %]

<!-- <tr> -->
<!-- Kunden- bzw. Lieferantentyp nach oben verschoben
[% IF ( !INSTANCE_CONF.get_vertreter ) %]
<th align="right">
[% IF ( SELF.is_vendor() ) %]
[% 'Type of Vendor' | $T8 %]
[% ELSE %]
[% 'Type of Customer' | $T8 %]
[% END %]
</th>

<td>
[% L.select_tag('cv.business_id', SELF.all_business, default = SELF.cv.business_id, value_key = 'id', title_key = 'description', with_empty = 1) %]
</td>
[% END %]
-->
<th align="right">[% 'Language' | $T8 %]</th>
</pre>

2. Kundentypfeld hinter Kundennamen einfügen:

@./tabs/billing.html, Zeilen 75ff:@
<pre>
<!-- Kundentyp hier eingefuegt -->
<tr>
[% IF ( !INSTANCE_CONF.get_vertreter ) %]
<th align="right">
[% IF ( SELF.is_vendor() ) %]
[% 'Type of Vendor' | $T8 %]
[% ELSE %]
[% 'Type of Customer' | $T8 %]
[% END %]
</th>

<td>
[% L.select_tag('cv.business_id', SELF.all_business, default = SELF.cv.business_id, value_key = 'id', title_key = 'description', with_empty = 1) %]
</td>
[% END %]
</tr>
</pre>

h2. Benutzerdefinierte Variablen in Hauptseite integrieren

Als benutzerdefinierte Variable wurde definiert: Datenfeldbezeichnung: "Vorname", Datenfeldname: "vorname", Typ: "Textzeile"
Diese soll unter dem Kundennamen, aber über dem neu platzierten Kundentyp eingefügt werden.

1. Benutzerdefinierte Variable "Vorname" in ./tabs/billing.html einfügen:

@./tabs/billing.html, Zeilen 75ff:@
<pre>
<!-- Vorname hier eingefuegt -->
[% FOREACH var = SELF.cv.cvars_by_config %]
[% IF ( var.config.name == 'vorname' ) %]
<tr>
<th align="right" valign="top" nowrap>[% var.config.description | html %]</th>

<td valign="top">
[% INCLUDE 'common/render_cvar_input.html'
cvar_name_prefix = 'cv_cvars.'
var_name = ''
%]
</td>
</tr>
[% END %]
[% END %]
</pre>

=> Da die Ausgabe der benutzerdefinierten Variablen in einer FOREACH-Schleife erfolgt, wird innerhalb der FOREACH-Schleife mit einer IF-Abfrage der gewüschte Datenfeldname abgefragt und nur dann der entsprechende HTML-Code erzeugt.

2. Benutzerdefinierte Variable "Vorname" im Tab "Benutzerdefinierte Variablen" nicht mehr anzeigen:
Dies ist wichtig, da sonst beim Speichern der Wert, der hier in der Maske steht die Eingabe im Haupt-Tab wieder überschreibt!

@./tabs/custom_variables.html, Zeilen 6ff:@
<pre>
[% FOREACH var = SELF.cv.cvars_by_config %]
<!-- Vorname ausschliessen -->
[% IF ( var.config.name != 'vorname' ) %]
<tr>
<th align="right" valign="top" nowrap>[% var.config.description | html %]</th>

<td valign="top">
[% INCLUDE 'common/render_cvar_input.html'
cvar_name_prefix = 'cv_cvars.'
var_name = ''
%]
</td>
</tr>
[% END %]
[% END %]
</pre>
=> Umgekehrtes Vorgehen wie oben: HTML-Ausgabe erfolgt nur, wenn der Datenfeldname ungleich 'vorname'.