Ansicht im Web

[HarryB]

Hi Folks,

ich habe ein sehr spezielles Problem mit einer Webansicht.

In der ersten Spalte der Ansicht stelle ich eine Kategorie dar, die selbst wieder aus drei Kategorien besteht. Das sieht aus wie folgt:

Fakultät 1
  Lehrstuhl A
    Name 1
    Name 2
  Lehrstuhl B
    Name 3
Fakultät 2
  Lehrstuhl C
    Name 4

usw.

Der Feldinhalt des entsprechenden Feldes sieht wie folgt aus:

Fakultät 1\Lehrstuhl A\Name 1; Fakultät  1\Lehstuhl A\Name 2

Das sieht etwas wild aus, hat aber zur Folge, dass ich eine eindeutige Zuordnung von Namen zu Lehrstühlen und Fakultäten in einer Ansicht hierarchisch darstellen kann. Das klappt innerhalb des Notes Client auch hervorragend, im Web gibt es mit einer entsprechenden Ansicht jedoch Darstellungsprobleme.

Unterhalb der Namen gibt es eine weitere Kategorie "Typ" und darunter erst das eigentliche Dokument. Wenn ich nun die Kategorien alle schön ausklappe, dann rutscht die Kategorie Typ, sobald ich diese ausgeklappt habe, nach vorne, vor die Namen. Das sieht aus wie folgt:

Kategorie Typ nicht ausgeklappt:

Fakultät 1
  Lehrstuhl A
    Name 1
      Typ 1
      Typ 2
    Name 2
      Typ 1

Kategrie Typ ausgeklappt:

Fakultät 1
  Lehrstuhl A
    Name 1
   Typ 1
      Dokument 1
      Dokument 2
   Typ 2
    Name 2
      Typ 1

Das hat zur Folge, das die Namen nahezu unleserlich werden und man Namen und Typen kaum noch unterscheiden kann. Die Hierarchie ist optisch nun leider nicht mehr zu erkennen.

Die Umsetzung einer View im Web erfolgt mit Tabellen. Hat einer eine Idee, wie ich die Umsetzung in die Tabellen beeinflussen kann, indem ich zum Beispiel bestimmte Mindestbreiten für bestimmte Tabellenzellen erzwingen kann? Oder hat einer eine ganz andere Idee, wie mir zu helfen ist?

Viele Grüße
Harry

[datenbanken24]

Hier ein Demo-Beipiel im Web mit einem Ansichtsaufbau, der genau Deinem entspricht.

Auch hier sind in einigen Ansichten die Feldwerte in der Form:
"Oberkategorie 1\Unterkategorie 1"
mit danach noch einer dritten folgenden Kategorie aufgebaut:
Unterkategorie 2 zu Ober-Unterkategorie 1.

Im Beispiel:
"Kurz-Report\2004"
"Kredit"

http://www.manetu-03.de/volksbank

Login: "volksbank"
Pw: "volksbank"


Die Ansichten beruhen alle auf dem einfachen Prinzip,

dass die Notes-Ansicht im Web genutzt wird,
selbst aber unsichtbar bleibt und immer wieder ein Javascript aufruft
und an dieses Javascript die Feldwerte übergibt.

Dieses Javascript wird also einfach durch die Notes-Ansicht
für jede Kategoriezeile und jedes Dokument in der Ansicht
neu aufgerufen und schreibt dann mittels document.writeln() das HTML für die Webansicht,
so, wie man es gerne möchte.

Es gibt ein Javascript für Kategoriezeilen (WriteCategory)
und eines für Dokumentzeilen (WriteTable)


Kategoriespalte in der Notes-Ansicht:

_CategorySort := @Word(@ReplaceSubstring( Feldwert; "<" :  ">"  ; ""); "--Sort--"; 2);
_CategoryClear := @Word(Feldwert; "--Sort--"; 1);

"[" +
"<x" + _CategorySort + "> " +
"<script language=JavaScript>" + @NewLine +
"WriteCategory(  \"" +
@DocNumber + "\", \"" +
@DocNumber + "\", \"" +
_CategoryClear + "\", \"" +
"1" +
"\" ) "  + @NewLine +
"</script>]" + @NewLine


Dokumentspalte in der Notes-Ansicht:

"[<script language=JavaScript>" + @NewLine +
"WriteTable(  \"" +
_UNID + "\", \"" +
@DocNumber + "\", \"" +
_C1_L1 + "\", \"" +
_C1_L2 + "\", \"" +
_C2_L1 + "\", \"" +
_C2_L2 + "\", \"" +
_HasAttachments + "\", \"" +
_HasCommunity + "\", \"" +
_PATHDIA  + "\", \"" +
_ReadAccess +
"\" ) "  + @NewLine +
"</script>]"


wobei Cx_Lx Feldwerte aus den Dokumenten sind, die in der Ansicht dargestellt werden sollen, die anderen Werte kannst ignorieren.

Die zwei Javascript-Funktionen sind hierbei im $$WebViewTemplate hinterlegt,
und sind im Quelletext des o.g. Beipiels frei sichtbar.


Mit dieser Form, Webansichten zu schreiben,
läßt sich so ziemlich alles im Web realisieren, was man sich wünschen kann:

- beliebig Kategorie-Ebenen
- genau definierte, feste Spaltenbreiten mit Umbruch (Mindestbreiten)
- kein Verrutschen der Ansichtsspalten beim Navigieren
- Klicken auf die Kategoriespalten und nicht auf die Mini-Twisties
- Alternative Kategorie- und Zeilenfarben
- völlig freies Layout und Formatierung mittels CSS
- Kategoriesummen
- Grafikeinbindung (Thumbnails)
- Nutzung der @DocNumber
- etc.


Die Performance ist rasend schnell, auch weil der Server hierbei sehr wenig zu tun hat,
da die meiste Arbeit an den Browser abgegeben wird, der das Javascript ausführt.

Ob 10 oder 10.000 Dokumente in der Ansicht sind, spielt eigentlich keine Rolle,
die Ansichtsberechnung für Notes ist sehr einfach und im Web werden sowieso immer nur ca. 50 Dokumente angezeigt.

Mit diesem Prinzip kann so ziemlich jede Notes-Ansicht sehr schnell ins Web umgesetzt werden,
und das sieht sicher bedeutend besser aus, als die Standard-notesgerenderten grausamen "Webansichten".


Hoffe es hilft Dir weiter,
Gruss,
Uwe

[umi]

VIELEN Danke für deinen Beitrag Uwe.
Sowas hab ich schon länger gesucht.....

gruss umi

[HarryB]

Hallo Uwe,

vielen Dank für deinen tollen Beitrag. Ich werde die Umsetzung meiner Webansichten entsprechend programmieren. Wenn's fertig ist, zeige ich es dir auch.

Viele Grüße
Harry

[HarryB]

...allerdings habe ich noch eine Rückfrage:

Die Tags "<xKategorie>" haben die eine andere Funktion als die der Dokumentation?

Viele Grüße
Harry

[datenbanken24]

Ja, haben Sie:

1.)
Die Tags "<xKategorie>" sortieren die Ansicht.

Das "<x" soll dabei nur bewirken, dass der eigentliche Sortierwert nicht im Web sichtbar ist.

So steht bei <xKategorie> manchmal z.B.

"2004-11"
wenn in der Ansicht zur Anzeige
"November 2004"
steht, (bzw. an die JS-Funktion übergeben wird.)

2.)
Gleichzeitig nutzen wir das für die Schnellsuche.

Es ist lästig im Web, wenn man z.B bei 10.000 Dokumenten
ca. 200 mal auf

"Nächstes"

klicken muss, um in der Ansicht nach unten zu kommen bzw. zu navigieren.

Mit dieser Ansichtsform ist es auch einfach möglich,
eine Schnellsuche analog Notes zu machen,
man gibt den oder die Anfangsbuchstaben ein,
und die Ansicht springt zu dieser Kategorie.

Hier ist so ein Beispiel mit über 10.000 Dokumenten:
http://www.werbetruck-onlinekatalog.de

Gib einfach "W" oder "Zlat" ein,
und die Ansicht springt auf den gewünschten Eintrag - sonst müßte man hier im Beispiel ca. 200 mal "Next" klicken.

Der zugehörige Schnellsuche-Agent macht grob nix weiter, als mit

Set entry = view.getEntryByKey(Query, False)
                  
den Eintrag in der Notes-Ansicht zu finden und über

pos = entry.getPosition(".")

die URL-Parameter "Start, "Expand", etc) zu berechnen, die die Ansicht an der richtigen stelle aufmachen.

Gruss,
Uwe

[HarryB]

Hm, ich habe noch eine weitere Frage: wie liest du den Parameter "Expand=..." aus, den du offensichtlich in die drei Variablen CurrentOpenCategoryX schreibst?

Viele Grüße
Harry

[datenbanken24]

Wir nutzen der Einfachheit halber nur den "Expand"-Parameter.
Damit läßt sich alles erreichen, was man braucht,
den "Collapse"-Parameter braucht man eigentlich nicht wirklich.

Eine Ansicht wird z.B. geöffnet mit

...view?OpenView&Start=1&Count=30&Expand=2.4#2.4

Wenn man die aufgeklappte Kategorie wieder schließen will,
läßt man den Expand-Parameter einfach weg.

Die JS-Variablen:

var CurrentOpenedCategory1 = "2";
var CurrentOpenedCategory2 = "2.4";
var CurrentOpenedCategory3 = "2";

brauchen wir, um für jeden Katagorie-Link
den richtigen dahinterliegenden URL zu berechnen.
Ist die Kategorie offen,
soll Sie bei Anklicken zu gehen
und umgekehrt.

Wann immer aber die Kategorien auf oder zugeklappt werden,
wird eine neue Ansichts-URL abgesetzt, also die Ansicht neu geladen:

view?OpenView&Start=1&Count=30&Expand=2.4#2.4

Diesen String nimmst Du in der Maske
WebViewTemplate ($$ViewTemplateForXXX) der entsprechenden View,
z.B im "HTML Head Content"
auseinander:


_CurrentOpenedCategory1 :=
   @Word(@Word(
      @UrlQueryString("Expand");
      "#";
      1);
      ".";
      1)
;
_CurrentOpenedCategory2 :=
   @Word(
      @UrlQueryString("Expand");
      "#";
      1)
;
_CurrentOpenedCategory3 :=@LeftBack( _CurrentOpenedCategory2 ; ".");

@If(
   WebParameters_ = "ExpandView";
   @Set( "_CurrentOpenedCategory1"; "All");
   ""
);

wobei WebParameters_
nur ein computed for display Listenfeld ist, welches alle Parameter aus der URL liest,
über die Formel:


@ReplaceSubstring(
  @Explode(@Right(Query_String_Decoded; "&"); "&");
  "+" : "[Plus]" : "[Amp]" : "[Quot]" : "[Deg]" : "[Hash]" : "[Sect]" : "[AE]"  : "[OE]" : "[UE]" : "[ae]" : "[oe]" :  "[ue]" : "[sz]" : "[eacc1]" : "[eacc2]" : "[eacc3]": "[eacc4]" : "[aacc2]": "[uacc2]";
  " " : "+" : "&" : "\"" : "°" : "#" : "§" : "Ä" : "Ö" : "Ü" : "ä" : "ö" : "ü" : "ß" : "é" : "è" : "ê" : "ë" : "à" : "ù"
)


Der "HTML Head Content" schreibt dann diese @-Variablen als JS-variablen mit in den HTML-Quelltext.

@NewLine +
"<script language=JavaScript>" + @NewLine +

"var CurrentOpenedCategory1 = \"" + _CurrentOpenedCategory1 + "\";" +  @NewLine +
"var CurrentOpenedCategory2 = \"" + _CurrentOpenedCategory2 + "\";" +  @NewLine +
"var CurrentOpenedCategory3 = \"" + _CurrentOpenedCategory3 + "\";" +  @NewLine +

@NewLine +

"</script>" + @NewLine


wo sie die Funktion "WriteCategory" dann nutzt,
um die neuen URLs hinter die Kategorien zu setzen.


Auf die gleiche Art und Weise
kann man sich auch CSS-Styles, Ansichtskonstanten, Thumbnails, usw
aus Notes-Konfigurationsdokumenten holen und die alle als JS-Variablen zur Verfügung stellen
ohne dass die Notes-Ansicht "was davon mitbekommt" bzw. damit belastet wird.

Gruss,
Uwe

[HarryB]

Ich wollte nur nachholen: vielen Dank für die Tipps. Sie haben mir sehr geholfen.

Das Ergebnis kann hier bewundert werden, aber leider nur zum lesen.

Viele Grüße
Harry

[datenbanken24]

Sieht doch richtig gut aus.

Noch ein Hinweis:
Du hast noch ein Javascript-Fehler auf der Seite, den ich auch noch gut kenne:
Beim Aufklappen einiger Kategorien, z.B.

Studium fundamentale
  Soziologie
   Baecker, Dirk
    Beitrag in Zeitschrift

kommt der JS-Fehler.

Und zwar passiert das immer, wenn der Zeilentext ein Apostroph oder Anführungszeichen enthält.
hier z.B. wegen:
Lenin's Twist, or the R-Factor of Communication

Der Apostroph macht dann fälschlicherweise einen anderen Apostroph aus dem Code zu.
Am besten Du "replacedsubstringst" diese Zeichen bereist in der Ansicht mittels JS- bzw. HTML -Maskierung,
&xyz;

Habe einen Screenshot vom Fehler beigefügt.

Gruß,
Uwe

[HarryB]

Vielen Dank, das war mir so noch nicht aufgefallen. Gestört hatten bisher nur Zeilenumbrüche und ".

Viele Grüße
Harry

[CLI_Andreas_Schmidt]

Sag mal "Datenbank 24". Hättest Du mal ein kleines Beispiel in einer nsf ? Deine Lösung scheint sehr gut und schnell zu sein. Ich bin mir nur nicht sicher, ob ich es für meine Anforderung nutzen kann. Ich arbeite ja nicht mit Kategorien, sondern nur mit Dokumenten. Und mit der Formelsprache arbeite ich so gut wie gar nicht mehr.

Ich würde es mir dennoch gerne ansehen. Wäre echt nett.

Gruss
Andreas

[datenbanken24]

Leider nein, Andreas,
da wir diese Datenbanken verkaufen, kann ich keine NSF frei ins Forum stellen.

Wenn Du Dir das oben verlinkte Volksbank-Beispiel anschaust, siehst Du, dass diese Technik auch ohne Kategorien gut funktioniert. Das ganze ist oben sehr detailliert beschrieben und damit kann das ein guter Notes-Entwickler schnell nachbauen. Wenn Du es als fertige Lösung mit Sourcecode haben möchtest - sehr gerne - das kostet dann halt ein paar Euro.

Übrigens,
die Web-Picklist, die Du in einem anderen Thread suchst, ist genau mit der oben beschriebenen Technik auch leicht machbar.

Hier ein Beispiel:
Klicke auf den "Bearbeiten"-Button
Dann gibt es ein Feld "Automatischer Doc-Link".
Der öffnet die Web-Picklist, (zur Vereinfachung auf die gleiche Datenbank)
Dann "Lesemodus" und Du hast eine DocLink.

http://www.manetu-03.de/immotreff?id=020709-63859-uu-194121243245

Login:   atnotes
Pw   atnotes

Diese Sache ist aber zur Abwechslung mal nicht ganz so trivial, wie Sie aussieht, zumindest kann ich Sie hier nicht in 3 Sätzen vollständig erklären. Aber im Grund-Prinzip nichts anderes, als die eigentliche Ansicht selbst.

Gruß,
Uwe

[Speedy]

Hallo zusammen,

ich würde gerne in meinem $$ViewTemplate eine "Schnellsuche" implementieren.
Leider habe ich keinen Plan, wie das gehen soll.
Diese "Schnellsuche" soll sich so verhalten, wie von datenbank24 beschrieben.

Vielleicht kann mir ja mal jemand eine Übersicht geben, was alles so benötigt wird, und wie die Parameter vom Suchagenten zurück an die Maske gegeben werden.

Lieben Gruß
Speedy

[Binser]

Hab nun auch alles hinbekommen bis auf die Schnellsuche. Vielen dank nochmals!