EAT DesignScope-Documentation | DesignBase / ConfigTemplate

Vorlagen für Anzeige- und Bearbeitungs-Formularen (HTML)

HTML-Dokumente als Vorlagen zum Ansehen und Editieren von Daten

DefineForm: Darf HTML Formulare definieren
ViewForm: Darf HTML Formulare sehen
CommitForm: Darf in Formularen Daten quittieren / Daten eingeben

In der DesignBase ist es einfach die vorhandenen Daten der Dateien mittels vorgefertigter HTML-Vorlagen anzuzeigen und zu bearbeiten. Das HTML-Format der Vorlagen erlaubt ein sehr einfaches Erstellen und Verwalten der anzuzeigende bzw. zu editierende Daten sowie das Einbinden vieler interaktiver Möglichkeiten um aus diesen Vorlagen heraus einiges steuern zu können. Die HTML-Vorlagen können oder besser sollten das MainForm ersetzen, da dadurch die Menge der angezeigten oder zu editierenden Daten pro Benutzer / Gruppe gut steuerbar, d.h. einschränkbar sind.

Eine Vorlage erstellen

Configure aufrufen

Begonnen wird das Erstellen einer HTML-Vorlage mit der Auswahl des Configure-Icons (ConfigureIcon, Standard-Icon: ), das alle vorhandene Templates anzeigt.

Help.html

Wenn noch keine Templates vorhanden sind, wird nur das help.html, das nur Administratoren sehen können und der Button zum MainForm angezeigt, der eine eigene Permission besitzt um die Sichtbarkeit zu steuern.

Verfügbare Platzhalter

Klickt man auf help.html, bekommt man eine Auflistung aller möglichen Platzhalter. Die Liste enthält

unter der ersten Spalte (help ist als erster Eintrag zu sehen) die Funktions-Wörter
unter der zweiten (Show this help Page) eine Beschreibung wofür die sind und welche Paramter die nehmen können
und unter der dritten Spalte sieht man wie diese in den Vorlagen benutzt/eingesetzt werden (mit Beispielwerten)

Eine Bearbeitungs-Vorlage

FileDataSheet_edit.html im Browser

Nun fügt man die nötigen Platzhalter (wie in der 3. Spalte des help.html zu sehen sind) in einem nach belieben gestaltetes HTML-Dokument ein.

Wichtig dabei ist, dass die editierbare Parameter (Attribute oder Kategorien) immer ein "Edit." beinhalten und dass die editierbare Formulare immer die Platzhalter #(Form) (am Anfang, nach dem <body>) und #(EndForm) (am Ende, vor dem </body>) haben sollten (siehe HTML-Code unten).
Der HTML-Code des Beispiels (Datei FileDataSheet_edit.html) sieht folgernder massen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>File Data Sheet - Edit</title>
</head>
<body>
#(Form)
<h1 align="center">File Data Sheet</h1>
<table width="100%" border="1" cellspacing="0" cellpadding="5">
  <tr>
    <td>
      <strong>File name:</strong> #(FileName)<br>
      <strong>File size:</strong> #(FileSize)<br>
      <strong>File date:</strong> #(FileDate)<br>
      <strong>Size X:</strong> #(SizeX)<br>
      <strong>Size Y:</strong> #(SizeY)
    </td>
    <td align="center" valign="middle">#(detail|50)</td>
  </tr>
</table>
<br>
<table width="100%" border="1" cellspacing="0" cellpadding="5">
  <tr align="center" bgcolor="#DDDDDD">
    <td colspan="2"><strong>Attributes</strong></td>
  </tr>
  <tr>
    <td><strong>Width:</strong> #(Edit.attr_Breite) [mm]</td>
    <td><strong>Height:</strong> #(Edit.attr_Hoehe) [mm]</td>
  </tr>
  <tr align="center" bgcolor="#DDDDDD">
    <td colspan="2"><strong>Categories</strong></td>
  </tr>
  <tr>
    <td colspan="2"><strong>Type of image:</strong> #(Edit.cat_ColorOrBW)</td>
  </tr>
  <tr>
    <td colspan="2"><strong>Colors used:</strong> #(Edit.cat_Color)</td>
  </tr>
</table>
<p>Save changes: #(Commit)</p>
#(EndForm)
</body>
</html>

Gespeichert sollte dieses Dokument in der Entwickluns- und Test-Phase unter

C:\HTTPD\FileDB\EditTemplate\

wo auch das help.html bei einer Standard-Installation der DesignBase zu finden ist.

Eine Anzeige-Vorlage

FileDataSheet_view.html im Browser

Für eine Vorlage zum Anzeigen von Daten aus der DesignBase fügt man die nötigen Platzhalter (wie in der 3. Spalte des help.html zu sehen sind) in einem nach belieben gestaltetes HTML-Dokument ein.

Wichtig dabei ist, dass die Parameter (für Attribute oder Kategorien) ohne ein "Edit." oder "Set." benutzt werden und dass diese Formulare eigentlich kein #(Form) undd #(EndForm) brauchen.

Oft reicht es aus und verringert den Aufwand, wenn man zuerst die HTML-Vorlage (Formular) zum Editieren der Daten anfertigt, dieses dann unter einen anderen Namen kopiert und die Platzhalter entsprechend anpasst:
Also Entfernen von

#(Form) und #(EndForm)
alle "Edit." und "Set."
und die sonstige Funktionen wie z.B. die zum Speichern #(Commit)

Der HTML-Code des Beispiels (Datei FileDataSheet_view.html) sieht folgernder massen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>File Data Sheet - View</title>
</head>
<body>
<h1 align="center">File Data Sheet</h1>
<table width="100%" border="1" cellspacing="0" cellpadding="5">
  <tr>
    <td>
      <strong>File name:</strong> #(FileName)<br>
      <strong>File size:</strong> #(FileSize)<br>
      <strong>File date:</strong> #(FileDate)<br>
      <strong>Size X:</strong> #(SizeX)<br>
      <strong>Size Y:</strong> #(SizeY)
    </td>
    <td align="center" valign="middle">#(detail|50)</td>
  </tr>
</table>
<br>
<table width="100%" border="1" cellspacing="0" cellpadding="5">
  <tr align="center" bgcolor="#DDDDDD">
    <td colspan="2"><strong>Attributes</strong></td>
  </tr>
  <tr>
    <td><strong>Width:</strong> #(attr_Breite) [mm]</td>
    <td><strong>Height:</strong> #(attr_Hoehe) [mm]</td>
  </tr>
  <tr align="center" bgcolor="#DDDDDD">
    <td colspan="2"><strong>Categories</strong></td>
  </tr>
  <tr>
    <td colspan="2"><strong>Type of image:</strong> #(cat_ColorOrBW)</td>
  </tr>
  <tr>
    <td colspan="2"><strong>Colors used:</strong> #(cat_Color)</td>
  </tr>
</table>
</body>
</html>

Gespeichert sollte dieses Dokument in der Entwickluns- und Test-Phase unter

C:\HTTPD\FileDB\EditTemplate\

wo auch das help.html bei einer Standard-Installation der DesignBase zu finden ist.

Temporäre HTMLs für Admin

Jetzt erscheinen die neu erstellten Templates beim Klick auf das Configure-Icon unter dem schon vorhandenen help.html. All diese Templates unter Test Edit Pages können nur Administratoren sehen.

Ein Klick auf die neuen Templates (FileDataSheet_edit.html oder FileDataSheet_view.html) öffnet diese in der DesignBase.

Edit-HTML: Ergebnis

Beim Edit-Formular sieht man, wie alle Platzhalter durch Formular-Felder zum Editieren ersetzt wurden (sofern es sich um editierbare Felder handelt, was nur bei Attributen und Kategorien der Fall ist) und den Button zum Speichern.

View-HTML: Ergebnis

Beim View-Formular sieht man, wie alle Platzhalter durch die entsprechende Daten / Werte der Datei aus der DesignBase ersetzt wurden.

Eine Vorlage für Benutzer oder Benutzer-Gruppen zugänglich machen

Das Vorgehen nach der oberen Beschreibung ist dafür gedacht, die Templates als Administrator zu erstellen und zu testen. Wenn diese zufrieden gestaltet sind und fehlerfrei funktionieren, müssen sie für bestimmte Benutzer oder Benutzer-Gruppen zugänglich gemacht werden.

Ein HTML hochladen

Zuerst muss das entsprechende Template mittels der File Upload-Funktion in die DesignBase importiert werden.

Nach dem Hochladen

Danach erscheint das ConfigTemplate-Test-Fenster (in der Standard-Ansicht nur mit den Einträgen help.html und MainForm, jetzt aber mit den zwei Test-Vorlagen).

Klick auf MainForm.

MainForm

Im MainForm sieht man oben rechts, dass der Benutzer (Eigentümer) der Datei der Admin ist und der Gruppe Admin angehört. Diese Werte können verändert werden - müssen aber nicht. Man könnte z.B. den Benutzer auf aviewer und die Benutzer-Gruppe auf viewer stellen und auf Permission klicken. Dann hätte nur der Benutzer aviewer Zugriff auf dieses Template, da er dann der Eigentümer wäre. Ist aber nicht die eleganteste Lösung - der Admin wäre somit für weitere Änderungen ausgesperrt...

Sichtbar / Zugänglich machen

Um das Template einem bestimmten Benutzer oder Benutzer-Gruppe zugänglich zu machen, wählt man unter der Box Visible By User or Group einen Benutzer (User) oder Benutzer-Gruppe (Group) und klickt auf Add user or group. So können hintereinander mehrere Berechtigungen erteilt werden.

Alle erteilte Berechtigungen erscheinen dann in der Tabelle unter Visible By User or Group. Gelöscht können diese Berechtigungen wenn die Checkbox neben einer solchen (unter Select) ausgewählt wird und auf Delete user or group geklickt wird.

ConfigTemplate: Liste

Um das Template jetzt noch endgültig als solches zu veröffentlichen muss dieses in der Construction unter dem Menüpunkt ConfigTemplate eingetragen werden.

ConfigTemplate: Hinzufügen

Dazu wählt man in der Documentation List das Template aus der DropDown-Box FileName aus und gibt im leeren Textfeld links daneben einen eindeutigen, gut beschreibenden Namen ein und klick auf NEW.

Ansicht aller Templates

Die so eingetragene Templates erscheinen dann beim wählen des Configure-Icons in der Liste Edit Pages. Wie schon vorher erwähnt, die untere Auflistung "Test Edit Pages" können nur Administratoren sehen.

Keywords: Tagger('Template, Vorlage, Daten-Anzeige, Daten-Eingabe, HTML, Formular, Bearbeiten, Edit ')

<< DocuTemplate | Construction | >>

Kommentare

''.Keep(str_replace(array('$Chrono','$PostTo','$AccessCode','$CaptchaValue'), array('','',RandomAccess(), CaptchaValueRelay()), FmtPageName($GLOBALS['CommentBoxFmt'],$pagename)))