This tutorial shows how to add HTML formatted descriptions to hyperlinks in FSI Pages using CSV or MS Excel files linked to hyperlinks in a source PDF document. If you have access to a product database, this method is recommended. Alternatively to CSV or Excel files you can use annotations in the PDF document itself to feed FSI Pages Converter with the descriptive texts for hyperlinks.
In the “/Samples” directory of your FSI Pages Converter Installation you will find a sample PDF,
named “Sample Catalog.pdf”.
This PDF contains links on the images only and no sticky notes. Now we will set up FSI Pages Converter to get the description of each item from an external data source, eg. a Comma Seperated Value file, CSV in short. The CSV file for this sample is located in the “/Samples” folder as well, named “Sample CSV.csv”.
Examining both the PDF and the CSV file you will notice that the link target set in the PDF file corresponds to the first data column in the CSV data. These represent custom unique IDs for each product in the catalog. This way FSI Pages Converter knows which dataset to use for which hyperlink.
Configuring FSI Pages Converter
Once FSI Pages Converter is loaded, select the PDF file and set an output path, then take a look at the “Links” section in the preferences tab.
Please check the “Include Links” box at the top. This will detect the shape and position of any links included in the PDF file and transfer the information to the TIF files Meta Data.
There is nothing else to set in this tab, just tell FSI Pages Converter to get the links shapes and target IDs from the PDF.
Next is the “External Data” preferences tab:
Linking external Data
In the “External Data” preferences tab check the “Use external data source” box. Then click the “Select” button at the top right and load the sample CSV file. Now you should see something similar to this:
You can use the “Show data” button to check the CSV file contents any time. Please click the button now.
The first line of the CSV data contains the columns description. These are shown in the “Text Fields” list now, named ‘Link’, ‘Headline’ and ‘Text’:
Close the preview. First let’s enhance the FSI Pages tooltip display of the product description from plain text to a nicely formatted field.
In the “Text Template” area shown in the screen shot above, we have set the ‘Headline’ to be bold-italic and aligned right, followed by the ‘Text’ field, completed by the Articlenumber, contained in the ‘Link’ data column. A preview of how the tooltip will look like is shown right next to the text area.
A list of valid HTML tags that can be used to format the text is shown in the live help (not shown on screenshot) if you hover your mouse over the “Text Template” field.
The next important step is to set the “Link Field” below. Choose the ‘Link’ column here, as this column contains the unique product IDs, referring to the links in the PDF file. If you are about to work with the URL Prefix and Suffix parameters of FSI Pages, there is no need to configure anything else. For demonstration purposes the Link template (see the large sreen shot above) is set to let Google search for the ID-number here, when a hypelink is being clicked in the FSI Pages catalog.
Once the conversion has finished and the newly created TIFF files have been uploaded to the Image server, you can select the folder from the interface and click the “Publish as FSI Pages”. Now choose the “Catalog with Links” option.
To set FSI Pages to open any link clicked in a new window, add the line “pages_DefaultLinkTarget=_blank” to the “Additional Parameters” field as shown below:
If you preview the catalog now, hover your mouse over one of the items in the catalog. You will see the LargeTooltip plugin bringing up the info from the CSV data, that is equal to the ID of the link in the PDF file.
Note how the tooltip is displayed the way it was formatted in the FSI Pages converter. Clicking any link will open up a google-search for the article number.
You might want to refer to the tutorial “Formatting CSV data and enabling search” for detailed information on formatting the external data by means of a template.