2. Working with WebDav Components

At this stage of development, the application features a knowledge base management system represented by the Knowledge base view.

In this chapter, you will:

Enhance the webDav document wrapper data grid to display a link to the WebDAV document instead of the document identifier.
Utilize the webdavDocumentUpload component on the webDav document wrapper detail view to upload the WebDAV document into the system.

Adding WebdavDocumentUploadField on View

Locate webdav-document-wrapper-detail-view.xml in the Jmix tool window and double-click it. The view designer will appear:

You’ll notice that the entityPicker component is being used to show the webdavDocument attribute. If you want to display the special component designed to work with documents, you should include the WebdavDocumentUploadField UI component in the XML descriptor.

Remove the entityPicker component description from the XML descriptor and place the cursor after the departmentField. Next, click Add Component in the actions panel, then find the WebdavDocumentUploadField item and double-click it.

The new webdavDocumentUpload element will be added beneath the formLayout element in both the Jmix UI structure panel and in the XML. Configure the id, colspan, and property attributes as shown below.

<formLayout id="form" dataContainer="webdavDocumentWrapperDc">
    <textField id="descriptionField" property="description"
               colspan="2"/>
    <entityPicker id="departmentField" property="department"
                  colspan="2">
        <actions>
            <action id="entityLookup" type="entity_lookup"/>
            <action id="entityClear" type="entity_clear"/>
        </actions>
    </entityPicker>
    <webdav:webdavDocumentUpload id="webdavDocumentField"
                                 property="webdavDocument"
                                 colspan="2"/>
</formLayout>

Displaying WebdavDocumentLink in Data Grid

Let’s display a link to the document in the data grid instead of its identifier.

Open webdav-document-wrapper-list-view.xml and find webdavDocumentWrappersDataGrid.

Select the webdavDocument column, switch to the Handlers tab of the component inspector and create the renderer handler method:

@Supply(to = "webdavDocumentWrappersDataGrid.webdavDocument", subject = "renderer")
private Renderer<WebdavDocumentWrapper> webdavDocumentWrappersDataGridWebdavDocumentRenderer() {
    return null;
}

Inject UiComponents object into controller class:

@Autowired
private UiComponents uiComponents;

You can use the Inject button in the top actions panel of the editor to inject dependencies into view controllers and Spring beans.

Implement the webdavDocumentWrappersDataGridWebdavDocumentRenderer method:

@Supply(to = "webdavDocumentWrappersDataGrid.webdavDocument", subject = "renderer")
private Renderer<WebdavDocumentWrapper> webdavDocumentWrappersDataGridWebdavDocumentRenderer() {
    return new ComponentRenderer<>( (1)
            () -> uiComponents.create(WebdavDocumentLink.class), (2)
            (link, wrapper) -> {
                WebdavDocument webdavDocument = wrapper.getWebdavDocument();
                if (webdavDocument != null) {
                    link.setWebdavDocument(webdavDocument);
                }
            });
}

1	The method returns a `Renderer` object that creates a UI component to be rendered in the column.
2	The WebdavDocumentLink component instance is created using the `UiComponents` factory.

Running the Application

Let’s run the application to observe the new feature in action.

Navigate to http://localhost:8080 using your web browser and sign in to the application with the credentials admin/admin.

Choose the Knowledge base item from the Application menu. You will see the Webdav document wrappers.list view.

The Webdav document column contains a link to the WebDav document and a button allowing you to open the standard WebDAV document versions view.

Click Create. The Webdav document wrappers.detail view will open. Besides the text field used for a file description, and the picker for a department, you may notice the built-in WebDAV add-on component for file upload. Try uploading a file using this component:

After clicking the OK button, you will be redirected to the list view.

Hover your mouse over the WebDAV document name. In the bottom left corner, you will see the link where the document is located on the WebDAV server.

However, when attempting to open the document, the browser will display a message indicating that it failed to establish a connection to the site.

This situation occurs because the necessary configurations have not been made yet. We will discuss this in the next section.

Summary

In this section, you have learned how to utilize components provided by the WebDAV add-on.

You have learned that:

The WebDAVDocumentUploadField component includes convenient built-in tools for viewing and uploading WebDAV documents.
You can use the WebDavDocumentLink component in a data grid by providing a ComponentRenderer for a column.