Anzeigen von ECM-Dokumenten in d.velop documents (On-Premises)
In diesem Beispielszenario erfahren Sie, wie Sie Dokumente, die sich in d.velop documents-System (On-Premises) befinden, in Ihrer App suchen und anzeigen können.
Die zu erstellende View ist zweispaltig aufgebaut:
In der ersten Spalte geben die Anwender:innen ihr Suchwort ein und haben einen Button, der die Suche triggert. Unterhalb dieses Abschnitts wird eine Tabelle für das Suchergebnis mit den wichtigsten ECM-Daten angezeigt.
In der zweiten Spalte wird das ECM-Dokument mithilfe der Viewer-Komponente angezeigt.
Voraussetzungen für dieses Beispielszenario
Sie haben bereits eine App erstellt und kennen die grundlegenden Funktionen von edoc automate.
Sie haben bereits eine Verbindung mit dem lokalen ECM-System von d.velop documents mit einer Datenquelle (z.B. mit der Bezeichnung d3) in Ihrer App hergestellt.
Erstellen der View mit Komponenten zum Suchen und Anzeigen der ECM-Dokumente
Erstellen Sie eine neue View mit verschiedenen Komponenten. Informationen zum Erstellen einer neuen View und zum Hinzufügen von Komponenten finden Sie hier: Erstellen und Verwenden einer View in edoc automate
Gut zu wissen
Jeder Name darf auf der gleichen Ebene nur einmal vorkommen. Sie können jedoch den Namen für eine Unterkomponente erneut verwenden.
Fügen Sie in der View folgende Komponenten der Reihe nach hinzu und geben die entsprechenden Eigenschaften für jede Komponente ein:
Komponente Title mit folgenden Details: Unter Value tragen Sie Dokumentensuche ein. Legen Sie den Wert für Size auf 1 fest.
Komponente Columns mit den folgenden Komponenten:
Fügen Sie die Komponente Columns zur ersten Spalte hinzu.
Fügen Sie in die erste Spalte der soeben hinzugefügten Columns-Komponente die Komponente Input hinzu.
Fügen Sie in die zweite Spalte der soeben hinzugefügten Columns-Komponente die Komponente Button hinzu. Tragen Sie unter Value den Wert Suchen ein.
Fügen Sie unterhalb der Columns-Komponente die Komponente Table ein und ziehen Sie mit Drag&Drop die Komponente in die erste Spalte der Columns-Komponente.
Geben Sie unter Columns den Wert 5 ein, um fünf Spalten anzuzeigen.
Geben Sie unter Head Rows den Wert 1 ein, um eine Titelspalte anzuzeigen.
Geben Sie unter Data Rows den Wert 1 ein, um eine Zeile anzuzeigen.
Fügen Sie in den ersten 4 Spalten der ERSTEN Tabellenzeile jeweils die Komponente Text hinzu, um Spaltennamen für das Suchergebnis darzustellen.
Geben Sie folgende Titel für die jeweiligen Spalten unter Value ein: Dok-ID, Dateiname, Dok-Art, Dok-Art (kurz).
Fügen Sie in den ersten 4 Spalten der ZWEITEN Tabellenzeile jeweils die Komponente Text hinzu, um die technischen Namen für das Suchergebnis darzustellen.
Geben Sie folgende Parameternamen für die jeweiligen Spalten unter Name ein: doc_id, orig_filename, doc_type, doc_type_short. (Im Screenshot sind die Namen auch unter Value eingetragen und dienen der besseren Nachvollziehbarkeit.)
Fügen Sie in der 5. Spalte der zweiten Tabellenzeile die Komponente Button hinzu und geben unter Value den Wert Anzeigen ein.
Fügen Sie in die Viewer-Komponente zur zweiten Spalte hinzu, um das gefundene Dokument anzuzeigen.
View zum Finden und Anzeigen von ECM-Dokumenten
Speichern Sie unbedingt die View, bevor Sie weitermachen. Als Nächstes fügen Sie zur Button-Komponente die Aktionen zum Suchen der ECM-Dokumente hinzu.
Hinzufügen von Aktionen zum Suchen der Dokumente
Zum Suchen der Dokumente benötigen Sie eine Aktion, die die Daten im d.velop documents-System sucht und ausliest.
Informationen zum Hinzufügen von Aktionen finden Sie hier: Erstellen von Aktionen für eine View
So geht’s
Wählen Sie den Button Suchen in der Columns-Komponente aus.
Erstellen Sie eine neue Aktion mit dem Event click.
Wählen Sie als Typ der Aktion default\SetDataset aus.
Geben Sie für die Aktion den Namen Dokumente suchen ein.
Fügen Sie als Parameter eine neue Aktion mit dem Icon zum Hinzufügen von Aktionen hinzu, die die Daten aus der Datenbank ausliest:
Wählen Sie als Typ für die Aktion d3\SearchDocument aus.
Geben Sie unter datasource die erstellte Datenquelle d3 an.
Geben Sie im Abschnitt Importparams unter key z.B. searchtext_expression als Parameter ein.
Fügen Sie unter value für Importparams die Aktion default\GetValue hinzu. Mit dieser Aktion lesen Sie den Wert des Eingabefelds aus.
Klicken Sie auf Apply, bis Sie den Edit Action-Dialog mit dem click-Event sehen.
Wählen Sie für das click-Event unter Returnfields die Tabelle in der View aus.
Klicken Sie auf Apply.
Als Importparams der Aktion können Sie auch andere Werte angeben. Mögliche Werte können Sie in der Dokumentation zur d.3-API (On-Premises) finden.
Speichern Sie unbedingt die View, bevor Sie weitermachen. Als Nächstes fügen Sie zur Button-Komponente die Aktionen zum Anzeigen eines ECM-Dokuments hinzu.
Hinzufügen von Aktionen zum Anzeigen eines Dokuments
Um die gefundenen Dokumente anzuzeigen, benötigen Sie Aktionen, die das Dokument in der Viewer-Komponente anzeigen.
So geht’s
Wählen Sie den Button Anzeigen in der Table-Komponente aus.
Erstellen Sie eine neue Aktion mit dem Event click.
Wählen Sie als Typ der Aktion default\SetDataset.
Geben Sie für die Aktion den Namen Dokument anzeigen ein.
Fügen Sie als Parameter eine neue Aktion mit dem Icon zum Hinzufügen von Aktionen hinzu, die die Daten aus der Datenbank ausliest:
Wählen Sie als Typ für die Aktion d3\ViewDocument aus.
Geben Sie unter datasource die erstellte Datenquelle d3 an.
Geben Sie für den Parameter docid die Aktion default\GetValue an. Mit dieser Aktion lesen Sie den Wert der Text-Komponenten doc_id in der Table-Komponente auslesen.
Klicken Sie auf Apply, bis Sie den Edit Action-Dialog mit dem click-Event sehen.
Wählen Sie für das click-Event unter Returnfields die Viewer-Komponente in der View aus.
Klicken Sie auf Apply.
Speichern Sie unbedingt die View, bevor Sie weitermachen.
Als Nächstes bereiten Sie das Ausführen der View vor, indem Sie eine Route erstellen.
Erstellen einer Route für die View “Dokumentensuche”
Damit Sie die View ausführen können, müssen Sie noch eine Route angeben.
So geht’s
Klicken Sie in der App in der Menüleiste auf Routes.
Klicken Sie im Dialog auf Add Route.
Geben Sie im Feld Path eine beliebige Route ein, und zwar immer mit einem führenden Schrägstrich, z.B.: /d3docsearch.
Klicken Sie auf Apply, um die neue Route für die View zu übernehmen.
Schließend Sie den Dialog Routes mit Close.
Sie haben für die View eine eigene Route erstellt. Speichern Sie unbedingt die View, bevor Sie weitermachen.
Jetzt können Sie Ihre View testen.
Praxistest: Ausführen der View “Dokumentensuche”
Nachdem Sie die View Dokumentensuche erstellt haben und verschiedene Aktionen hinzugefügt haben, können Sie die View im Browser testen: Klicken Sie in der App in der Menüleiste auf Execute.
Ihre View wird als Webansicht im Browser geöffnet.
Wenn Sie mehrere Routen angelegt haben, können Sie in einem Dialog die entsprechende Route auswählen.