Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

2. Login as admin and click on Design New App or click on existing application (See Figure 3).

Image Added

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).

Image Added

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).

Image Added

Figure 5


5. Add 2 File Upload elements to the form and name the them PDF Upload and PDF Output, then Save the form (See Figure 6).

Image Added

Figure 6


6. After saving the form, use the Generate menu to Generate a List for this form (Figure 7).

Image Added

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 78).

Image Added

Figure 8


8. Add a File Upload element to the form and name it Image Upload (Figure 89). Save the form, and then from the Generate menu, generate a List (Figure 910).

Image Added

Figure 9


Image Added

Figure 10


9. Go to the List that has just been created (List - Add Images), and add the ID column to the list and then Save the List (Figure 1011). 

Image Added

Figure

...

11


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 1112).

Image Added

Figure

...

12


11. Configure the plugin as shown in Figure 1213.

Image Added

Figure

...

13


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 1114).

Image Added

Figure

...

14


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 15Figures 15 &16

Image Added

Figure 15


Image Added 14

Figure

...

16


14. In the Image Setup Category, add a Form UI Menu and a List UI Menu. Configure them as shown in Figure 15 Figures 17 & 1618.

Image Added

Figure 17


Image Added 15

Figure

...

18


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)19). 

Image Added

Figure 19


17. Navigate to the Images List, Take note of the Record ID and save it to your clipboard (Figure 20).

Image Added

Figure

...

20


1718. Navigate back to the Add PDF Form, and add the saved Record ID to the plugin settings as shown in Figure 1821. Save the Form.

Image Added

Figure

...

21


1819. In the Application, navigate to the Add PDF Form UI menu and , upload your chosen PDF to the PDF Upload element (Figure 1922) and Save your addition.

Image Added

Figure

...

22


1920. 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 2023.

Image Added

Figure

...

23


Below, You can download the completed sample application created in this guide.

...