With our API fully integrated, our data parsed, and our card visuals in place, the next natural progression in our Star Wars Unlimited trading card app is to implement Faceted Search. This feature will refine our ability to filter and view cards based on specific characteristics, making it easier to navigate our collection.
Setting Up Faceted Search
First, create a new Region on our APEX application page and set the Type to Faceted Search. We will also want to set the Filtered Region to Cards. My preference is to use the Blank with Attributes Template for this Faceted Search region but feel free to choose according to your aesthetic preference.
Now we have a search bar at the top of the page. As you can see, it works:
However, I definitely prefer to have the search on the side of the Cards region, so we can move that by changing up the Layout. Set the Faceted Search to Column Span 3 and, on the Cards Region, uncheck Start New Row to align everything neatly. That will get the page looking more like this:
Adding Simple and Complex Facets
Simple Facet: Arenas
Now we can add some Facets. A straightforward Facet to begin with is "Arenas," which, in the Star Wars Unlimited game, there are Ground and Space arenas. We will want to quickly look at cards in each, so this is the perfect use case for a faceted search.
Right-click on Facets and then Create Facet:
Set the Facet Name to P1_ARENAS and the Label to Arena. By naming the Facet ARENAS, it will automatically set the Source to the column Arenas. If you name yours differently, then you will need to set that Source to the column name. Because there are only two types and we do not have to do any calculations or manipulation, we can set the List of Values -> Type to Distinct Values.
Now we have the Facet with the counts of each Arena type:
Complex Facet: Traits
Now, let's add a facet that is a little more difficult. I want to look at Traits. But as you can see from some of the cards, there is more than 1 Trait per card.
Characters like Darth Vader and Luke Skywalker both have three different traits. I don’t want to limit the Facet to the distinct values from each card; that would be way too limiting. Since we still have the data in the JSON form, let's query that and get a distinct list of values that we can use. It will look something like this:
select distinct x.traits
From swu_card_names_json SCNJ,
JSON_TABLE(SCNJ.SCNJ_JSON,
'$'
columns(nested path '$.data[*]'
columns(nested path '$.Traits[*]'
columns(TRAITS varchar2(4000) path '$')))) X;
Let’s create a Facet for Traits:
We will put the above query as the List of Values. This will give us a distinct list of Traits:
And now because most of these cards are going to have multiple values, we need to set the Multiple Values section to recognize them. When we parsed the JSON_TABLE data, we did a LISTAGG on the Traits field so that all that data was in one field, so we need to set the Type to Delimited List, the Separator to ‘,’ (comma), and the Filter Combination to AND (Intersect). The Filter Combination is to specify how to combine the individual values while filtering. There is either ‘OR’ or ‘AND’. We also want to trim all the Whitespace to make those values match.
Now, let's see how that looks:
Now, I can filter down based on those values. I can look for all the cards with the Traits: Rebel and Trooper. It even shows that there are 20 of them.
The other Facets would all be done the same as the Arena since those are distinct values that are easy to read.
Conclusion and Future Directions
This concludes how to use an API to get data, get it to the database, parse it, and create a basic app to view that data. I hope this series has illuminated the powerful capabilities at your fingertips with Oracle APEX and inspired you to undertake your projects. I will keep the example app available at the following link for as long as access to this API remains possible: SWU Cards Collection.
In the future, as more work is done on the application, I will create more blog posts detailing what is being done and why. Stay tuned!
SUBMIT YOUR COMMENT