Jump to Navigation Menu

Weeknotes 20:13

June 23, 2020

Week of June 14 - 20

Last week, I had two pieces of functionality that I needed to create for Credential Engine that adds a toolkit of resources for state leaders to learn about, plan for, and implement policies and practices to create a transparent credential marketplace.

Search and Filter for Toolkit resources

The first piece of functionality was to add search and filter functionality for the toolkit resource page. The site already has similar functionality for its other resources. The functionality was built by a contractor that pitched in to help us to deliver the initial site.

I have never built search and filter functionality like this one for a WordPress site. I was able to use my knowledge of custom search to customize the search for a new content type I created in WordPress. I was then able to look over the contractor’s code and was able to understand what the code was doing and implement my own solution. I am excited because I have wanted to do something like this before but did not know how to do it. It was much easier to accomplish than I thought. And I have a project in the hopper to build similar functionality for the case study section of our LGND site.

Resource Map

Two weeks ago, I had built a map that links users to view state-specific resources from Credential Engine’s fifteen state partnerships. The user can click on a state to trigger a popup with links to the state-specific resources. It also needed a select input to make it a more inclusive experience.

I created a similar map solution for the Sharing Solutions site last year. I was able to use the script from that solution as the foundation for the Credential Engine solution. This past week, I needed to add new functionality so the Credential Engine team could define and highlight regional partnerships.

I created a custom post type for the locations, both state and regional. When the user creates a new location, they can define if the location needs to be added to the state map. I created a second custom post type to define the regions. Then I created a relationship field in Advanced Custom Fields that allows the users to assign a state to a region. This will allow the Credential Engine team to create new regions as new region partnerships are established in the future.

There are also fields in the location content type for case study content for each of the locations.

As I was thinking through the template that I needed build for the map section, I identified that I needed to loop through my custom query multiple times to create:

  • an array to identify states to highlight on the map
  • an array to identify if a state belonged to a region
  • a select input for each of the states highlighted on the map so the user could use this input as an alternative to the map
  • another select input for mobile that included both states and regions
  • the modal cards with the resource links for both the states and the regions

As I refactored my solution last week for the regions, I realized I needed to create two different queries, one that just contained the states highlighted on the map (creates both of the arrays and the first select input) and then a second query that included the regions (creates the second input and the modal cards). I added a checkbox under the select input that allows the user to toggle the functionality to view regional partnership resources.

Map with state resources and the metro area of Los Angeles.
Map with New England partnership. The Credential Engine team will be adding new regional partnerships in the future.

I was very happy with the solution I came up with. I have not utilized arrays much in my work so it was a personal accomplishment to figure how to create the arrays I needed and then to utilize them to add information to the SVG map that triggered the modal card functionality.

This is an example of the code I came up with. My next step is the revisit this code and identifies if I can simplify it more. I am wondering if there is a way I don’t have to loop through the queries multiple times and come up with the same result.

My Javascript looks for paths or polygons in the SVG with the active class and uses the id to show the correct modal card. For the regional resources, the script looks for the data-attribute of region to trigger that functionality.

Articles and Videos of Interest

Offline Reading

Watching

  • Someone Feed Phil (Netflix) – one of the best shows I have discovered recently.
  • The West Wing (Netflix)
  • Disney Gallery – The Mandalorian (Disney+)

Playing

  • Madden20 – I finished the regular season with the Chiefs last week. I ended up 11-5 (not quite as good as the real team that finished 12-4) but I matched having the #2 seed in the AFC playoff bracket. I threw way too many interceptions with Patrick Mahomes but was able to battle through several games with a really great defense.
  • FIFA20 – I finished my first season with Borussia Dortmund on Saturday. Just as IRL, I finished second behind Bayern Munich and just before RB Leipzig.

Comment on this post