Printed Packaging Intake Check

In spring of 2023 a new procedure at my work was implemented for logistics administrators to do. Upon receiving specified packaging, samples of it must be delivered to office and then we, logistics administrators, must check these samples match data sheets. That’s when I thought I can use my web development skills to make this process easier.

How It Works

When we receive these samples in our office, we need to compare it with our data sheets. All the data sheets are kept in a folder, however they are separated into sub folders by factory and client (a total of 18 folders and subfolders), so searching for the correct data sheet might take some time, and you have to jump back and forward between these folders when checking several samples. So I created a simple website with input field, where you just enter a code for the packaging, press “Load” button and it loads the file on that website.

This way it finding the correct data sheet is effortless.

Problems Printed Packaging Intake Check solved for me

As all datasheets are stored in MS Word documents I could not create a website, where I can just load them. My first idea was to take print screens of every data sheet and when a user click’s “Load” button on the page, a function would change the image’s “SRC” attribute to the entered p-code and would load the image on the website. However this approach didn’t work well, as the quality of images was poor. Later I tried a pdf format and it worked just fine. So what I did is I converted all the word files (>170) to pdf files, stored them in a folder. Every time a code is entered and the “Load” button is clicked, pdf data attribute is changed to the specified input and a pdf file is loaded.

Besides allowing to find correct data sheet faster, this website provided another beneficial feature: if a pdf file is embedded into website, it can bee zoomed in and zoomed out. As some data sheets have small print, this helps to do the check better!

What I learned while developing Printed Packaging Intake Check

The first thing I looked for was a way to embed MS Word file into website, as there was no way to do it, I finally figured out that the best way to do it is to convert MS Word files into PDF files. ilovepdf.com helped me to do that.

Another issue I ran into, was when a script would try to load a pdf file that doesn’t exist (for example a user types wrong product code), no pdf file would be loaded. After that even if you type in a product code that has an existing PDF file it would still not load it, unless the page gets refreshed. In order to get around it, I created a JavaScript array and stored all the existing product codes in it, so every time a user presses “load” button, I run a loop through the array, and load pdf file only if there is match in it, otherwise an alert box is activated to inform user that the pdf file for that product does not exist.

All the code for this project can be found on my GitHub.