Display ECM documents in d.velop documents (on-premises)

In this example scenario, you will learn how to search and display documents that are located in the d.velop documents system (on-premises) in your app.

The view to be created has a two-column structure:

• In the first column, users enter their search term and have a button that triggers the search. A table for the search result with the most important ECM data is displayed below this section.

• In the second column, the ECM document is displayed using the viewer component.

Create the view with components for searching and displaying ECM documents

Create a new view with various components. For information about creating a new view and adding components see: Create and use a view in edoc automate

Add the following components to the view one after the other and enter the corresponding properties for each component:

1. Title component with the following details: Under Value, enter Document search. Set the value for Size to 1.

2. Columns component with the following components:

   1. Add the Columns component to the first column.

      1. Add the Input component to the first column of the Columns component you have just added.

      2. Add the Button component to the second column of the Columns component you have just added. Enter the value Search under Value.

   2. Insert the Table component below the Columns component drag and drop the component into the first column of the Columns component.

      1. Enter the value 5 under Columns to display five columns.

      2. Enter the value 1 under Head Rows to display a title column.

      3. Enter the value 1 under Data Rows to display a row.

      4. Add the Text component to the first 4 columns of the FIRST table row to display column names for the search result.

      5. Enter the following titles for the respective columns under Value: Doc ID, File name, Doc type, Doc type (short).

      6. In the first 4 columns of the SECOND table row, add the Text component to display the technical names for the search result.

      7. Enter the following parameter names for the respective columns under Name: doc_id, orig_filename, doc_type, doc_type_short. (In the screenshot, the names are also entered under Value for better traceability.)

      8. In the 5th column of the second table row, add the Button component and enter the value Display under Value.

   3. Add the Viewer component to the second column to display the document found.

Be sure to save the view before you continue. Next, add the actions for searching the ECM documents to the Button component.

Add actions to search for documents

To search for documents, you need an action that searches for and reads the data in the d.velop documents system.

For information about adding actions see: Create actions for a view

Here's how

1. Select the Search button in the Columns component.

2. Create a new action with the event click.

3. Select default\SetDataset as the type of action.

4. Enter the name Search documents for the action.

5. Add a new action as a parameter with the icon for adding actions that reads the data from the database:

   1. Select d3\SearchDocument as the type for the action.

   2. Enter the created data source d3 under datasource.

   3. Enter e.g. searchtext_expression as a parameter in the Importparams section under key.

   4. Under value for Importparams, add the action default\GetValue. Use this action to read the value of the input field.

   5. Click on Apply until you see the Edit Action dialog with the click event.

6. Select the table in the view for the click event under Returnfields.

7. Click on Apply.

Be sure to save the view before you continue. Next, add the actions for displaying an ECM document to the Button component.

Add actions to view a document

To display the documents found, you need actions that display the document in the Viewer component.

Here's how

1. Select the Show button in the Table component.

2. Create a new action with the event click.

3. Select default\SetDataset as the type of action.

4. Enter the name Show document for the action.

5. Add a new action as a parameter with the icon for adding actions that reads the data from the database:

   1. Select d3\ViewDocument as the type for the action.

   2. Enter the created data source d3 under datasource.

   3. Specify the action default\GetValue for the docid parameter. Use this action to read the value of the Text component doc_id in the Table component.

   4. Click on Apply until you see the Edit Action dialog with the click event.

6. Select the Viewer component in the view for the click event under Returnfields.

7. Click on Apply.

Be sure to save the view before you continue.

Next, prepare to execute the view by creating a route.

Create a route for the "Document search" view

Before you can execute the view, you must specify a route.

Here's how

1. Click on Routes in the menu bar in the app.

2. Click on Add Route in the dialog.

3. Enter any route in the Path field, always with a leading slash, e.g.: /d3docsearch.

4. Click on Apply to accept the new route for the view.

5. Close the Routes dialog with Close.

You have created your own route for the view. Be sure to save the view before you continue.

Now you can test your view.

Practical test: Execute the "Document search" view

Once you have created the Document search view and added various actions, you can test the view in the browser: Click on Execute in the menu bar in the app.

Your view is opened as a web view in the browser.