How to create a searchable catalog using the PDF Widget
This article shows you an example for creating a catalog using an existing PDF catalog and implementing the search feature.
Introduction
You will need:
- A catalog or some sort of content in PDF format (with text)
- An input widget
- (Optional) Shape and text boxes to make your content more user-friendly
Placing the PDF Widget and importing your PDF File
First let's place the PDF Widget by dragging and dropping it on our content page.
To add a source for our widget click on the blue + icon on the right side.
A new window appears where you can upload your file. After you've uploaded your pdf, click on it then click the blue Choose files button.
After successfully adding your catalog we can resize the widget to the desired size. In this example we've resized it so only two elements (rubber ducks) of the list are visible at once.
Placing the Input Widget and setting up search function
Next we're adding the Input Widget and assigning a touch action to make it a searchbar.
Turn the touch actions option on then click the blue EDIT TOUCH EVENTS button under it.
Here we have to add a new touch event and configure it as follows:
- Action type: Interact widget
- Page: Default (or the content page your PDF Widget is located at)
- Widget: pdf1 (the name of your PDF Widget)
- Special: Search
- Value orgin: Received value (so that the search is based on the user's input)
The search function should now work properly. When the user starts typing the closest search results will appear on top. We can also add a box(shape widget) behind the input field and some text next to it so that it's more user-friendly.
You can choose which widget is in front or behind by dragging them in the Layers menu on the right side of the editor.
The end result looks like this:
If you have further questions please do not hesitate to contact us at support@wallboard.info. Happy editing!
