1. Develop a Web Application that modifies PDF documents
  2. Develop the Web Application

Develop the Web Application

Developing a web application requires completing these tasks:

  1. Create a Visual Builder Application.
  2. Create a New web application.
  3. Include the external library.
  4. Create a user interface.
  5. Update the uploaded PDF document.
  6. Create a new PDF document.
  7. Download the PDF file.

Create a Visual Builder Application

A Visual Builder application is a collection of resources that you use to develop web and mobile applications. A Visual Builder application includes metadata in JSON files that describe data sources and business objects. It also includes HTML and JavaScript files for the web and mobile applications.

To create a new Visual Builder application
  1. :On the Visual Applications home page, click New.
  2. In the Create Application dialog box, type the application name. The Application ID field is automatically populated based on the application name that you provide.
    • You can modify the application ID if necessary, but the ID must be unique in your identity domain.
    • Leave the default selection of Empty Application unchanged. This template does not create any artifacts, apps or other resources.
  3. Click Finish.

    A new Visual Builder application opens automatically after you create it and displays the Welcome screen. The new application will not contain any artifacts, but the wizard does create, by default, the application's file structure and some resources and files you will need.

You can use the Welcome screen to help you determine which artifacts you want to create first. Click any of the tiles in the Welcome screen to open its associated panel in the Navigator on which you can create and manage the artifacts. You can add multiple web and mobile applications, all of which can access the data sources, resources, and services that you expose in your Visual Builder application.

Create a New Web Application

The web apps in your Visual Builder application are independent of each other, but they can all use the data sources defined in the application.

To create a new web application within a Visual Builder application:
  1. Click the Web Applications icon in the Navigator to open the Web Apps pane.
    The Web Apps panel displays structural representations of each of the web applications in your Visual Builder application. If no web applications have been created, you will see a message in the pane and a + Web Application button. Click this to open the Create Web Application wizard.
  2. Click the Create Web Application icon in the Navigator.
  3. On the General Information page of the Create Web Application wizard, specify a name for the web application you are about to create. You can also choose from three navigation styles:
    • The Horizontal navigation style, with three navigation items.
    • A Vertical navigation style that allows you to create a root page that contains a navigation drawer panel with a header with an avatar, navigation items in the middle, and a footer with the application name.
    • A page flow, with a starter page, which is generated for each navigation item.
    The default selection is None.
  4. Click Create to create and generate the web application along with all its necessary artifacts.

Include External Libraries

To generate, modify, and download a PDF document, as specified in “Before you Begin", you need to include two external libraries: pdf-lib and downloadj.

  • pdf-lib, manages the PDF document.
  • downloadj, downloads the PDF document that has been generated.
The artifacts created for this application are accessible through the source icon. Use the following lines to insert the sources for both librarie inτο the index.html file: 
<script src="https://unpkg.com/pdf-lib@1.4.0"></script> 
<script src="https://unpkg.com/downloadjs@1.4.7"></script>

Create a User Interface

Now, you create a user interface. This interface should contain such components as containers, headers, buttons, text fields, JavaScript code, and HTML code and will allow users to:

  • Upload a file.
  • Enter into a field text that will appear in the PDF document.
  • Click a button to update the uploaded PDF document with the text they entered.
  • Click a button to create a new PDF document that contains the text they entered.
  • Click a button to download the prepared document.

Drag and Drop the File and Display the PDF Document

First, you need to drag and drop essential components into the UI you're building.

  1. From the components palette, drag and drop onto the page designer a Flex Row and into this component a Heading,you label Upload PDF Document. Then add a File Picker and a File Picker button that will be used to upload a PDF document.
  2. Create a variable of type String with the name fileURL. This variable will store at the page level the URL of the PDF document that will later display on the page.
  3. Create a variable of type Any with the name holdFile. This variable will store at the page level the content of the PDF document.
  4. On the File Picker properties palette, create the new event on Select Files. This event will create a new action chain called FilePickerSelectChain.
  5. Define and implement the action chain FilePickerSelectChain along with a JavaScript that will read the contents of the upload blob object. This JavaScript function will be implemented at the page level and will store two variables: one that will convert the PDF file into a base64 string and the second one containing the document URL that will appear on the page. The action chain comprises three steps:
    1. Initialize and reset the fileURL variable.
    2. Call a function addPDFDocument with input parameter the file that has been uploaded.
    3. Assign the outcome of the addPDFDocument function to the fileURL and the holdFile variables.

Display the Uploaded PDF File to the Main Page Screen

In the main page's source HTML, add an object with its source the previously assigned page variable fileURL. Add the fileURL object to the main HTML page. At this stage, the application can upload and display a PDF file.

Assign the Output of the addPDFDocument Function to the Page Variables fileURL and holdFile

Assign the returned addPDFDocument function properties URL and data to the page variables fileURL and holdFile, respectively.

Assign the Input Variable of the addPDFDocument Function

On the GUI, assign the uploaded file variable to the function's arg1 parameter.

Create addPDFDocument function

Create the function addPDFDocument at the page level. The application will receive one input parameter. The function will instantiate a URL variable based on the input file parameter and then will read the uploaded document and convert it to a base64 string. You can use this code sample to define the function: 
    PageModule.prototype.addPDFDocument = function(arg1) {
      return new Promise(
        resolve=>{
          const blobURL = URL.createObjectURL(arg1);
          const reader  = new FileReader();
          reader.addEventListener("load", function () {
            // convert image file to base64 string         
            resolve({ data: reader.result, url: blobURL });
          }, false);
          if (arg1) {
            reader.readAsDataURL(arg1);
          }
        }
      );      
    };

Update Uploaded PDF Document

From the components palette drag and drop into the page designer a Text Field component and, below this, a new button.

  1. Create a page variable textIncludedIntoPDF to store the content of the text field. This variable will insert the content and update the PDF document with it.
  2. Assign this variable to the Input Text component.
Update and Display PDF
Create a new event on action for the Update PDF button. The event will create a new action chain labeled update_display_pdf.
The new action chain uses a JavaScript function to update the uploaded PDF and then, through a temporary page variable, a second JavaScript function will regenerate and display the new PDF document.
Create the UpdatePDF Function

Next, create the JavaScript function createUpdatePDF. This is an asynchronous function with two input parameters (the uploaded PDF document and the text that the user has previously entered on the main page). It returns a byte array.

When executed, this function::
  1. Declares constants from the pdf-lib API.
  2. Creates of a PDFDocument entity and loads the input pdf byte array.
  3. Gets an array of all the pages contained in the document.
  4. Identifies the first page rendered at the index = 0 of the document.
  5. Calculates the page’s width and height.
  6. Writes the text that you had entered (in red color and with and angle of 45 degrees).
  7. Saves, serializes, and returns the PDFDocument to bytes (a Uint8Array).
    The following code sample can be used to simulate the above functionality:
      PageModule.prototype.createUpdatePDF = async function (arg1 , inputText ) {
    // declare constants from the pdf-lib API.
    const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
    console.log("createUpdatePDF: input file " + arg1);
    console.log("createUpdatePDF: input argument " + inputText);
    const existingPdfBytes = arg1;
    // create a PDFDocument entity and load the input pdf byte array 
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    // get an array of all the pages contained in this document. The pages are stored in the array in the     
    // same order that they are rendered in the document with the first page page in the 0 position. 
    const pages = pdfDoc.getPages();
    // get the first page rendered at the index = 0 of the document
    const firstPage = pages[0];
    // get the first page width and height
    const { width, height } = firstPage.getSize();
    console.log("createUpdatePDF: The width : " + width + "and height : " + height +" of the first page");
    // Embed a Helvetica font into the pdf document
    const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
    // write the text that you had entered and draw a rectangle 
    firstPage.drawText(inputText, {
      x: 5,
      y: height / 2 + 300,
      size: 50,
      font: helveticaFont,
      color: rgb(0.95, 0.1, 0.1),
      rotate: degrees(-45),
    });
    // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
    const pdfBytes = await pdfDoc.save();
    return pdfBytes;
  };
Display the Updated PDF Document

The outcome of UpdatePDF function will be assigned to the temporary page variable tmpPDFBytes. Following this assignment, a JavaScript function will receive the base64 byte array and it will instantiate a new blob entity from this byte array. Finally, the function will create and return a URL that correspond to this PDF document.

The following code sample can be used to simulate the above functionality: 
PageModule.prototype.displayPDFDocument = function (arg1) { 
    const bytes = new Uint8Array( arg1 ); 
    // create a new blobfrom the byte array with type of application: pdf 
    const blob = new Blob( [ bytes ], { type: "application/pdf" } ); 
    // create the url of the generated blob entity 
    const newdocURL = URL.createObjectURL(blob); 
    // return the updated pdf's url 
    return newdocURL; 
    };
This function's output will be assigned to the page variable fileURL, which will be used to display the updated PDF document in the page.

At this point the application is ready to upload a PDF document, modify it with the text the user has entered in the screen's text field and then display the updated PDF document on the screen.

Create a New PDF Document

At this point the application is ready to create a PDF document, modify it with a text that the user has entered in the text field of the screen, and then display the newly created PDF document on the screen. To generate a new PDF document that will include the text that has been entered by the application user, from the components palette, drag and drop a button component onto the page designer.
Create and Display Document

Create a new event to define the action launched by the Create new PDF button. The event will create a new action chain with the label create_display_pdf.

The new action chain will use a JavaScript function to create a new PDF (which will include text previously entered in the text field) and then, through a temporary page variable, a second JavaScript function will regenerate and display the new PDF document.

Create the PDF Function

Next, create the JavaScript function createPDF. This is an asynchronous function that takes text that the user has previously entered on the main page as its one input parameter and returns a byte array.

When executed, this function:
  1. Declares constants from the pdf-lib API.
  2. Creates a PDFDocument entity.
  3. Embeds the Times Roman font.
  4. Adds a blank page to the PDF document object.
  5. Calculates the page’s width and height.
  6. Writes the text that the user entered.
  7. Saves, serializes, and returns the PDFDocument to bytes (a Uint8Array).
    Use this code sample to simulate the above functionality: 
    PageModule.prototype.createPDF = async function (arg1) {
    const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
    console.log("createPDF: input file " + arg1);
    // create a PDFDocument entity and load the input pdf byte array 
    const pdfDoc2 = await PDFDocument.create();
    // Embed the Times Roman font
    const timesRomanFont = await pdfDoc2.embedFont(StandardFonts.TimesRoman);
    // Add a blank page to the document
    const page2 = pdfDoc2.addPage();
    // Get the width and height of the page
    const { width2, height2 } = page2.getSize();
    // Draw a string of text toward the top of the page
    const fontSize2 = 30;
    page2.drawText(arg1, {
      x: 50,
      y: 450,
      size: fontSize2,
      font: timesRomanFont,
      color: rgb(0, 0.53, 0.71),
    });
    // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
    const pdfBytes2 = await pdfDoc2.save();
    return pdfBytes2;
Display the Newly Created PDF Document
The createPDF function will be assigned to the temporary page variable tmpPDFBytes. Following this assignment, a JavaScript function will receive the base64 byte array and will instantiate a new blob entity from this byte array. .

The function will then create and return a URL that corresponds to this PDF document. The same function that has been implemented for the update_display_pdf action chain will be reused. The output of this function is then assigned to the page variable fileURL, which will be used to display the new PDF document in the page

Download the PDF File

From the components palette we include into the page designer by drag and dropping a Button component.

Download the Document

Create a new event action for the Download PDF button. The event will create a new action chain, labeled downloadPDF. The new action chain will use a JavaScript function to download a PDF file (containing the text the user entered text in the text field).

Download the PDF File
The JavaScript function downloadPDFfile takes the byte array of the PDF document that was either uploaded and modified or created from scratch as its one input parameter and downloads the document with a predefined name: pdf-lib_modification_example.pdf and of type application/pdf.
The function uses the download() function (from the library downloadj that was initially hidden and then imported into your application). The input arguments for download() can be any of these data types::
  • URL
  • String
  • Blob
  • Typed Array
or, via a dataURL representing the file's data as a base64 or URL-encoded string, the name and type of the new file placed in the browser's download directory.
Use this code sample to simulate the above functionality: 
  PageModule.prototype.downloadPDFFile = function (arg1) {
    download(arg1, "pdf-lib_modification_example.pdf", "application/pdf");
  };