By Cord Jastram, Software Developer at DXC.

SAPUI5 offers a large set of controls ranging from simple ones like the Label to complex controls like the PlanningCalendar control. The available set of SAPUI5 controls covers most use cases for SAPUI5, but sometimes the requirements for a developer go beyond the scope of the existing controls. One example of these advanced use cases is when you want to edit and annotate PDF files using a SAPUI5 application. There is a control available from SAP for viewing PDF files, but it is a viewing only control. But SAPUI5 has a feature that comes to the rescue: SAPUI5 Custom controls.

The custom control approach allows a developer to create a bespoke SAPUI5 control in such a way that it plays nicely with the SAPUI5 framework. There are two different approaches to create custom controls. The first approach builds a control from scratch, whereas the second approach wraps an already existing non-UI5 control. In my article, I show an example for the second approach, where I wrap a commercial JavaScript-based control for editing PDF files.

I wrap a control named WebViewer, which is developed by PDFTron, a company from Canada. WebViewer is a JavaScript library for viewing, annotating, and editing PDF documents. Wrapped as a SAPUI5 custom control, it allows the utilization of two interactive elements of PDF files, namely annotations and form-fields, in a SAPUI5 application. But the real value emerges when the data of a PDF file can also be processed in an SAP system, and therefore, I also implement an OData interface for PDF files and their annotations and form data.

I will not cover every detail of my SAPUI5 application in this article as it covers a lot of SAPUI5 development tasks, but the source code of the client and the source code of the OData services are available at GitHub. This allows a developer to set up the solution for testing purposes and to have a closer look at details of the implementation.

This is a series of articles consisting of three major parts. In this first part, I show a sample application that demonstrates the use of the new custom control. In the second part, I will show how the WebViewer control is wrapped as a SAPUI5 custom control. In the third and last part, I will develop a set of OData services that allows to read and update PDF files on the server from my SAPUI5 application. You can read the other part by clicking the following links:

• Demo of SAPUI5 application with custom control
• Creating and modifying the SAPUI5 Custom Control
• Connecting the custom control to OData services

Part 1: Demo of SAPUI5 application with custom control

My development environment

Figure 1 outlines my development environment. As a backend system, I use the developer edition of the ABAP Application Server 7.52 running in a virtual machine. This system provides the OData services for my SAPUI5 application, which is running on a local webserver. For the development of the SAPUI5 application, I use Visual Studio Code from Microsoft in combination with a set of plugins for SAPUI5 development provided by SAP. The ABAP part is developed using the Eclipse-based ABAP Development Tools. Sai Nithesh Gajula has written two excellent articles on installing VS Code and on setting up a SAPUI5 development environment. The articles give a very detailed step-by-step description of both activities and for any question regarding these activities, just look at the articles.

Figure 1: The setup of my development environment

The SAPUI5 demo application

The demo application I have developed consists of two views. The first view (Figure 2) shows a worklist of PDF files and allows to upload files from the local computer to an SAP system using the upload button in the upper right corner. There is also a button available at the left of each list item, which allows to delete an already uploaded file.

Figure 2: File list view for the demo application

The second view is an object page that shows a detailed view of an uploaded file. There are three sections. The first section, PDF EDITOR, consists of custom control and allows to edit the PDF file. The second section, FORM DATA, shows the form field data, and the third section, ANNOTATIONS, shows the content of the PDF annotations in a document. An annotation can be a comment for another annotation, and therefore I display annotations in a SAPUI5 TreeTable control in order to visualize this hierarchical relationship.

For Figure 3, I have uploaded a simple PDF file with several form fields, which I created using LibreOffice. LibreOffice is a free office suite with an option to create PDF forms. In the upper right corner of the PDF editor, I have added two buttons which allow to store the modified file in the SAP system and to get info on the loaded PDF file as shown in Figure 4.

When you save a PDF file, all data from the form fields and annotations are saved to database tables in the SAP system via OData services, and the option Flatten File allows to create a read-only version of the file. All form fields and annotations are removed and replaced by their visual representation. For example, I have filled the form from Figure 3, added annotation, and saved it without flattening (Fig. 5). The changes made to the file have been saved, and you can also see that the data from the form fields and the annotation are shown in their corresponding sections.

As the last step, I use the Flatten File option and save the file, which results in the flattened PDF file shown in Fig. 6. When a file has been flattened, the save button and the tools for annotating the file have been removed from the user interface to avoid any further modification.

The demo application uses only a small subset of the API, which is exposed by the PDFTron viewer, but it can be used as a starting point for more advanced use cases like PDF-based workflow applications.

Figure 3: Object page for a PDF file

Figure 4: FileSave and FileInfo dialog for a PDF file

Figure 5: Filled and annotated PDF form after saving the document

Figure 6: PDF file after flattening annotations and form fields