Introduction
This PDF File Add Image Tool plugin is used to add uploaded images on every page of an uploaded PDF File.
Get Started
To see how the PDF File Add Image Tool actually functions, we should first create an app. Here are the steps for this process:
Steps To Import This Plugin
1. Go to the website https://github.com/jogetoss/pdf-file-add-image-tool
2. Go to the "Releases" page (See Figure 1).
Figure 1
3. Click on the .jar file to initiate the download (see Figure 2).
Figure 2
4. Go to your Joget localhost or server and login as admin.
5. In Joget Console navigate to "Admin Bar>Systems Settings>Manage Plugins" and click the "Upload Plugins" button.
6. In "Upload Plugin", select the plugin .jar file you downloaded, then click "Upload".
7. You should be able to view the newly installed plugin under the Installed Plugins tab.
8. Remember to always uninstall the old plugin before uploading a new version.
The Joget Knowledge Base has more information on managing and developing plugins.
Steps to use the Plugin
1. Start the Joget server and open the App Center.
2. Login as admin and click on Design New App or click on existing application (See Figure 3).
Figure 3
3. For new applications, fill up the App ID and App Name then proceed to click on the Save button (See Figure 4).
Figure 4
4. Let's start with creating a form that'll serve for uploading the original PDF and obtaining the edited PDF, fill up the form ID and form name and Save the form (See Figure 5).
Figure 5
5. Add 2 File Upload elements to the form and name the PDF Upload and PDF Output, then Save the form (See Figure 6).
Figure 6
6. After saving the form, use the Generate menu to Generate a List for this form (Figure 7).
Figure 7
7. Now let's create another Form to upload the image that shall be added to the PDF, fill up the form ID and form name and Save the form (Figure 7).
Figure 8
8. Add a File Upload element to the form and name it Image Upload (Figure 8). Save the form, and then from the Generate menu, generate a List (Figure 9).
Figure 9
Figure 10
9. Go to the List that has just been created (List - Add Images), and add the ID column to the list (Figure 10).
Figure 10
10. Navigate back to the Add PDF Form, and select Settings > Advanced. Select PDF Add Image File as the Post From Submission Processing Tool (Figure 11).
Figure 11
11. Configure the plugin as shown in Figure 12.
Figure 12
12. Now let's create a UI to interact with all the components we just created. After creating the UI, Create 2 UI Categories, Name one PDF Setup and the other Image Setup (Figure 11).
Figure 13
13. Add a Form UI Menu (Figure 12) and a CRUD UI menu (Figure 13) to the PDF Setup Category, and configure them as shown in Figure 14 and Figure 15.
Figure 14
Figure 15
14. In the Image Setup Category, add a Form UI Menu and a List UI Menu. Configure them as shown in Figure 15 & 16.
Figure 15
Figure 16
15. Save the UI, and Launch the Application.
16. Start with uploading your chosen image to add to the PDF in the Add Image Form (Figure 17), Take note of the Record ID and save it to your clipboard.
Figure 17
17. Navigate back to the Add PDF Form, and add the saved Record ID to the plugin settings as shown in Figure 18.
Figure 18
18. In the Application, navigate to the Add PDF Form UI menu and upload your chosen PDF to the PDF Upload element (Figure 19) and Save your addition.
Figure 19
19. Navigate to the PDF List CRUD Menu, and select the record you have just created. There you should see the edited PDF in the PDF Output element Figure 20.
Figure 20
Below, You can download the completed sample application created in this guide.