# Snippets & Rezepte
Fertige Code-Bausteine für häufige Aufgaben.
# Action-Parameter anlegen
Es kann sein, daß man innerhalb eines Actions Parameter benötigt, die im Request nicht übergeben wurden. Hierzu kann man den Action-Baustein "[Batix Quelltext ausführen](/books/cms-handbuch-entwickler/page/batix-quelltext-ausfuhren)" im Zusammenhang mit dem Tag "[bx:pagedata.setscriptattribute](/books/cms-handbuch-entwickler/page/bxpagedata)" benutzen. Hierzu ein paar Beispiele:
**Umwidmen eines Request-Parameters**
```xml
```
Bestandteil einer Botfalle
**Quelltext der Seite**
```xml
```
Wenn man im nachfolgenden Action die Email braucht, diese aber nicht übergeben wurde (z.B. für Email-Versand-Action)
**Link für Weiterleitung zusammenbasteln**
```xml
/test/naechsteSeite.htm/test/gleicheSeite.htm
```
Im anschließenden Weiterleitungsaction kann der Parameter mit [[abgeschlossen]] eingesetzt werden.
# Blättern (Pagination)
## Einfaches Listenblättern
sieht so aus:
Die Leiste oben und unten kann in Bausteine ausgegliedert werden. Dann kann Sie für jede Liste im Web genutzt werden. Voraussetzung: die Liste heißt dann immer "Liste", also ``
**HTML in der Seite**
```xml
style="margin-bottom:0;">
```
**ausgelagertes Include "blaetternOben"**
```xml
- von Einträgen
```
**ausgelagertes Include "blaetternUnten"**
```xml
<< zurück<< zurück
| Seite:
|
weiter >>weiter >>
```
**wenn nichts zum Blättern da ist, nicht anzeigen**
```xml
springe zu:
```
sieht dann so aus:
Dieser Quelltext-Schnipsel kann beliebig außerhalb des recorddata.nav-Blocks in das HTML-Template eingebunden werden (auf Wunsch auch innerhalb, kein Ding) und baut eine SELECT-Box in den HTML-Quellcode ein inkl. aller verfügbaren Seitenergebnisse und dem entsprechenden Blätter-Parameter.
**Hinweis:**
Man muss abschließend nur noch die SELECT-Box via JavaScript animieren etwas zu tun, wenn eine Auswahl getroffen wurde (Parameter versteckt setzen+Form abschicken oder URL-Aufruf …)
Zusätzlich kann eine kleine Abfrage um die Select-Box gebaut werden, dass diese bspw. nur angezeigt wird, wenn es mehr als 5 Seiten zu blättern gibt. Somit bleibt die Webseite schön clean und wenn es wirklich mehrere Suchseiten gibt die auch nicht mehr über die bisherige Darstellung sinnvoll angezeigt werden, dann ist die Springe-zu-Funktion hilfreich. Bei 2 Seiten ist diese neue Erweiterung nicht so hilfreich wie bei 15 Suchergebnisseiten.
## Bootstrap4-Pagination
```xml
```
# CSS-Menü
Beispielcode für ein einfaches Menü
```xml
Batix Testmenü mit CSS
```
Beispiel für die dazugehörige css-Datei
```xml
.BX_cssmenue {
width:600px;
height:25px;
border:1px solid #98b1c4;
background:#bdcedc;
z-index:100;
position:relative;
}
.BX_cssmenue ul {
float:left;
list-style-type:none;
position:relative;
margin:0;
padding:0;
}
.BX_cssmenue li {
float:left;
}
.BX_cssmenue li:hover,.BX_cssmenue li a:hover {
position:relative;
}
.BX_cssmenue a {
display:block;
float:left;
height:25px;
white-space:nowrap;
padding:0 10px 0 10px;
line-height:25px;
font-size:12px;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
text-align:center;
color:#293d6b;
text-decoration:none;
}
.BX_cssmenue li:hover a,.BX_cssmenue a:hover {
background:#98b1c4;
}
.BX_cssmenue a.submenue {
background:url(/static/dev/css-menu/top-sub.gif) no-repeat center right;
padding:0 20px 0 10px;
}
.BX_cssmenue li:hover a.submenue,.BX_cssmenue a.submenue:hover {
background:#98b1c4 url(/static/dev/css-menu/top-sub.gif) no-repeat center right;
}
.BX_cssmenue ul ul {
position:absolute;left:-5000px;
top:-5000px;
width:202px;
height:auto;
border:none;
background:#bdcedc;
}
.BX_cssmenue table {
margin-top:-1px;
border-collapse:collapse;
}
.BX_cssmenue ul :hover ul {
left:0px;
top:25px;
}
.BX_cssmenue li li {
width:200px;
border:1px solid #98b1c4;
border-width:0 1px;
padding:0
}
.BX_cssmenue li li.firstitem {
border-top:1px solid #98b1c4;
}
.BX_cssmenue li li.lastitem {
border-bottom:1px solid #98b1c4;
}
.BX_cssmenue ul ul a,.BX_cssmenue ul :hover ul a,.BX_cssmenue ul :hover ul :hover ul a {
float:none;
margin:0;
width:180px;
height:auto;
white-space:normal;
padding:4px 10px 5px 10px;
font:bold 12px Arial,Helvetica,sans-serif;
text-decoration:none;
text-align:left;
color:#293d6b;
background:none;
}
.BX_cssmenue ul ul :hover a,.BX_cssmenue ul ul a:hover,.BX_cssmenue ul ul :hover ul :hover a,.BX_cssmenue ul ul :hover ul a:hover {
background:#98b1c4;
}
.BX_cssmenue ul ul a.submenue,.BX_cssmenue ul :hover ul a.submenue {
width:180px;
padding:4px 10px 5px 10px;
background:url(/static/dev/css-menu/sub-sub.gif) no-repeat center right;
}
.BX_cssmenue ul ul :hover a.submenue,.BX_cssmenue ul ul a.submenue:hover {
background:#98b1c4 url(/static/dev/css-menu/sub-sub.gif) no-repeat center right;
}
.BX_cssmenue ul :hover ul ul {
position:absolute;
left:-5000px;
top:-5000px;
}
.BX_cssmenue ul :hover ul :hover ul {
left:190px;
top:-1px;
}
.BX_cssmenue br {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
```
Link zur Demo-Seite mit diesem Code http://dev.batix.local/www/dev/purecssmenu/
# CSV-Import in Container
Die Daten einer zuvor hochgeladene CSV-Datei werden in einen Container gespeichert. Es ist auch möglich, eine ZIP-Datei mit verschiedenen CSV-Dateien hochzuladen.
Datei
Feldname der zuvor hochgeladenen Datei
ID_ZielContainer
Angabe der ID, wenn der Name nicht anderweitig ermittelt werden kann (z.B. durch Dateiname oder 1. Zeile in der Datei)
ZielContainer_aus_Datei
noch nicht benutzt
ZielContainer_aus_Dateiname
wenn angehakt, dann wird als Zielcontainer der Name der Datei genommen.
ZielContainer_in_Zeile
Angabe der Zeile, in der der Name des Zielcontainers steht (im Beispiel unten wäre das die 1)
Feldnamen_in_Zeile
Zeilennummer der Zeile, in der die Feldname stehen (im Beispiel unten wäre das die 2)
Trennzeichen
Trennzeichen, mit der die Dateifelder getrennt sind (z.B. , )
Daten_ab_Zeile
Nummer der Zeile, ab der die Daten beginnen (im Beispiel unten wäre das die 3)
Feldnamenliste
Wenn in der Importdatei keine Feldnamen enthalten sind, dann können diese hier angegeben werden.
Namens-Umwandlung
Zeilenweise Liste: CSV-Feldname=Feldname im Container oder Dateiname=ZielContainerID
Beispielaufbau einer CSV-Datei:
Kontakt
Name,Vorname,Abteilung,Telefon,Email
Mustermann,Paul,Datensicherheit,03671/223344,test@batix.com
Wurst,Hans,Marketing,090/345678,hawu@dotcom.com
...
# Eingeloggt bleiben
## Variante 1 - über Sessiongültigkeit
Im Login-Action trägt man im Baustein "Login" im Feld "minimale Sessionlänge" ein, wie lange die Session haltbar ist (in Minuten, 1 Monat = 43200 Minuten).
Danach legt man einen Groovy-Baustein an, wo geprüft wird, ob das Häkchen "eingeloggt bleiben" gesetzt ist. Wenn ja, wird ein Cookie "JSESSIONID" geschrieben, der dann im Browser mit der gleichen Haltbarkeit wie im vorherigen Login-Baustein gespeichert wird (in Sekunden, 1 Monat = 2592000 Sekunden).
```xml
import javax.servlet.http.Cookie;
if (action.getParameter("remember") == "j") {
Cookie c = new Cookie("JSESSIONID", session.id)
c.maxAge = 2592000 // Sekunden
c.path ="/"
action.originalResponse.addCookie(c)
}
```
Allerding liegen dann viele offene Sessions auf dem Server rum - ist dann wohl eher für kleinere Projekte interessant.
# Formularversand mit Ajax
Dieses Beispiel veranschaulicht die Möglichkeit Formulardaten mittels jQuery per Ajax versenden. Voraussetzung hierfür ist das Einbinden des jQuery-Frameworks und des speziellen Scriptes jquery.form.js
```xml
Beispieldokument
Hier landet das Ergebnis der Suche
```
Es sind noch wesentlich mehr Optionen für diese Funktion verfügbar.
Mehr Informationen und Script-Download unter http://jquery.malsup.com/form/#getting-started
# Google-Sitemap Datei erzeugen
Diese Beispiel realisiert folgende Funktionen:
- eine dynamische Sitemap im XML-Format generieren, die Suchmaschinen beim Indizieren hilft
Folgende Tags wurde verwendet:
- [Bx:pagedata](/books/cms-handbuch-entwickler/page/bxpagedata)
- [Bx:sitemap](/books/cms-handbuch-entwickler/page/bxsitemap)
- [Bx:tools](/books/cms-handbuch-entwickler/page/bxtools)
## Quellcode
Dieser Code wird als Designtemplate gespeichert und im Startseiten-Menüpunkt z.B. als sitemap.xml eingebunden. Es ist wichtig, dass diese Datei im obersten Verzeichnis des Projektes liegt, da immer nur URLs unterhalb des Pfades dieser Datei indiziert werden.
```xml
http:///www///T+00:00weekly1http:///www///T+00:00weekly0.75http:///www///T+00:00weekly0.5http:///www///weekly0.25http:///www///weekly0.20
```
Es werden alle Menüpunkte bis zu einer Tiefe von 5 Ordnern ausgegeben. `priority` ist lediglich eine relative, projekt-interne Angabe und wird von Suchmaschinen genutzt, um bestimmte Links bei einer Auswahl von mehreren Links im Projekt zu priorisieren, diese Angabe hat keine Auswirkung auf das Ranking in der Suchmaschine.
Bei `lastmod` wurden 2 verschiedene Implementierungen genutzt. Mittels [bx:tools.lastmodified](/books/cms-handbuch-entwickler/page/bxtools) wird allerdings nur das Bearbeitungsdatum des Hauptmenüpunktes zurückgegeben (nicht das der einzelnen Menüpunkte), [bx:tools.datum](/books/cms-handbuch-entwickler/page/bxtools) dagegen liefert immer "Heute - 3 Tage". Welche Möglichkeit genutzt wird, kann nicht verallgemeinert werden (optimal wäre das Bearbeitungsdatum des jeweiligen Menüpunktes).
# HTML-Mails für MS-Outlook
E-Mails im HTML-Format benötigen ein sehr spezielles Design, um in Outlook korrekt angezeigt zu werden. Es gibt eine ganze Reihe HTML- und CSS-Elemente, die nicht erlaubt sind (z.B. Div's, Hintergrundbilder, Positionierungen etc.).
Eine komplette Liste aller erlaubten/nicht erlaubten Elemente und Parameter finden Sie unter http://msdn.microsoft.com/en-us/library/aa338201.aspx.
Die große Kunst beim HTML-Mail-Design besteht darin, dass die Mails nicht nur in allen Browsern, sondern auch in allen E-Mail-Clients aussehen müssen. Während fast alle Mail-Clients und Webmailer keine Probleme mit der Darstellung haben, kommt Outlook mit modernem HTML-Design überhaupt nicht zurecht und verlangt nach Quellcode, wie er in den frühen 90er Jahren zu finden war. Mail-Designs müssen für Outlook wieder umständlich mit Tabellen, zerschnippelten Bildern und Platzhalter-GIF's erzeugt werden.
Wer hierfür Beispiele braucht, sollte die Newsletter von ALTEC Solartechnik oder Waldbad Brunn abonnieren.
# Kalender bauen
Benutzt werden die beiden Tags [`bx:calendarloop`](/books/cms-handbuch-entwickler/page/bxcalendarloop) und [`bx:calenderfield`](/books/cms-handbuch-entwickler/page/bx-calenderfield)
```xml
```
**zugehöriges CSS**
```css
table.calendar1 a{color:#555555;}
table.calendar1 td{width:20px;height:20px;text-align:center;}
table.calendar1 .head td{background-color:#FFB689;}
table.calendar1 .head .month{float:left;padding-left:5px;}
table.calendar1 .head .year{float:right;padding-right:5px;}
table.calendar1 .daynames td{background-color:#aaaaaa;}
table.calendar1 .daynames .we{color:#962420;font-weight:bold;}
table.calendar1 .days td{background-color:#cccccc;}
table.calendar1 .days td.marked{background-color:#FBD9CA;}
table.calendar1 .days td.today{outline:1px solid red;}
table.calendar1 .days td.active{outline:1px solid green;}
table.calendar1 .days td.othermonth{background-color:#eeeeee;}
table.calendar1 .days td.othermonth a{color:#ffffff !important;}
table.calendar1 .days td.we a{color:#962420;font-weight:bold;}
table.calendar1 .footer td{background-color:#FFB689;}
```
# Locale bei Date-Pattern hinzufügen
1. Projekt auswählen
2. bei **Dokumentvorlagen** rechts unter Tools auf **Quelltext ersetzen** klicken
3. in das erste Textfeld (**Suchbegriff**) eintragen:
`pattern="([^"]*(?:MMM|E)[^"]*)"(?! locale)`
4. in das zweite Textfeld (**Ersetzen durch**) eintragen:
`pattern="$1" locale="de"`
5. Haken **regulärer Ausdruck** setzen
6. auf **Vorschau** klicken und prüfen, ob alles passt
7. auf **jetzt ersetzen** klicken
8. ggf. Schritte 6 und 7 wiederholen, falls viele Quelltexte betroffen sind
# Manipulationsgeschützte Formulare mit Secureform
Vom System generierte Werte in Formularen sind leicht veränderbar. Falls in den Aktionen keine Überprüfungen dieser Werte vorhanden sind, entstehen schnell Sicherheitslecks. Parameter können dann beliebig manipuliert werden und die Aktionsbausteine verrichten unbedarft ihren Dienst mit gefälschten Daten. So können z.B. IDs ausgetauscht werden und somit fremde Datensätze überschrieben werden.
Damit nicht in jeder Aktion selbst eine Überprüfung in JSP oder Groovy geschrieben werden muss, gibt es das Tag [`bx:secureform`](/books/cms-handbuch-entwickler/page/bxsecureform) und die Aktion [Sicheres Formular überprüfen (SecureformAction)](/books/cms-handbuch-entwickler/page/sicheres-formular-uberprufen-secureformaction-secureformaction). Im Zusammenspiel stellen diese beiden Komponenten sicher, dass ausgewählte Parameter nicht manipuliert werden können.
Dieser Artikel bietet eine detaillierte Erklärung der Funktion und Vorgehensweise. Es sollten zusätzlich die Seiten des Tags und der Aktion durchgelesen werden.
## Parameter sammeln
### Im Formular
Im ersten Schritt werden die zu sichernden Formularelemente gesammelt. Das sind jene Parameter, die später an das Action geschickt werden. Es müssen nicht alle Parameter abgesichert werden, nur jene die im Action als zu sichern angegeben wurden.
Zunächst wird um das gesamte Formular ein `` Tag gesetzt. Dies definiert einen Bereich, in dem Parameter gesammelt werden. Dadurch können auf einer Seite mehrere solche Bereiche definiert werden, falls es mehrere Formulare gibt.
**Bereich definieren**
```xml
```
Danach werden die zu schützenden Parameterwerte gesammelt. In den meisten Fällen wird der `value` eines `` einfach mit `` umschlossen.
**Parameter sammeln**
```xml
">
```
Falls ein Parameter im Formular geschützt wird, muss er auf jeden Fall auch in den Aktionseinstellungen angegeben werden (s.u.) - da die Prüfung im Baustein sonst fehlschlägt.
Parameter, die nicht mitgesendet werden, falls sie keinen Wert haben, dürfen nicht mit zur Hashbildung herangezogen werden. Das sind z.B. Datensatz-ID Felder, die nur bei fehlerhaften Validierungen gefüllt werden, damit beim erneuten Absenden des Formulars kein neuer Datensatz erzeugt wird. Meist kommt dabei `` oder `` zum Einsatz. Der Parameter `hidden-when-empty` bewirkt, dass ein Feld mit leerem Wert von `` ignoriert wird.
**hidden-when-empty**
```xml
">
">
```
Zum Schluss wird der Hash generiert und in das Formular geschrieben. Die einfachste Methode ist vom System direkt ein `` generieren zu lassen.
**Hash ausgeben**
```xml
```
Dies erzeugt ein verstecktes Formularfeld mit passendem Name und Wert. Alternativ kann der Name oder Wert auch einzeln ausgegeben werden, siehe dazu die [Tag Doku](/books/cms-handbuch-entwickler/page/bxsecureform).
### Im Link
Das Tag kann auch benutzt werden, um einen Link / Button abzusichern:
```xml
&=">löschen
```
Hier werden die Parameter `name` und `value` von `bx:securefom.hash` benutzt, denn beide Werte sind dynamisch.
Falls URL-Parameter mit z.B. `bx:if` umschlossen sind, muss auch wieder `hidden-when-empty` benutzt werden (s.o.).
## Erlaubte Werte festlegen
Falls ein Parameter mehrere, bestimmte Werte annehmen darf, ist dies mit `bx:secureform.values` abbildbar. In diesem Fall wird nicht das Feld mit dem Wert gehasht (da es vom Nutzer ja geändert werden kann), sondern ein zweites Feld eingefügt. Es enthält die erlaubten Werte und wird anstelle des veränderlichen Feldes mitgehasht.
So kann sich der Inhalt des Feldes (z.B. ein `