Intro
I’ve worked on many CCE implementations with complex hierarchies built into the CCE types metadata. We want to push the user to select the proper values based on the hierarchy. This is a better UX and eliminates human error which also can shorten the time someone in the newsroom needs to properly categorize a CCE object.
In this blog post we’ll use a CCE Events module as an example and walk through dynamically populating the category drop downs.
Note: This tutorial assumes jQuery is loaded and also uses some basic twitter bootstrap styling.
The CCE Metadata
CCE Metadata
For the purposes of this tutorial, we will use a CCE module with the following metadata hierarchy:
| Module: | Events (1) |
|---|---|
| Class: | Events (11) |
| Types: | Art (111)
Dance (112)
Family (113)
|
The Form
Let’s build a form on a template called submitEvent_ovr.pbs.
(You can see the final version of what we are building here: Demo)
Here is where we first use the < pbs:ccefields > tag. < pbs:ccefields module=1 class=11 field=”Type” all=1 optionlist=0 > (Documentation: https://docs.saxotech.com/display/Onl/pbs+ccefields). We can pass parameters into the tag to pull back specific cce fields data. In this case, we want the top level cce types. This tag will require the following object files to be setup.
The Dynamic
Now that the form is built, let’s add some jQuery and make the second drop down auto populate based on the first selection. We will use the jQuery change function combined with the jQuery getJSON function to make this happen. But first we need to create the page that returns JSON for the second drop-down. We will create a page that accepts the parent type and the the type of field we expect back.
You can now test this link by going to http://www.tamberra.com/section/eventTypeJSON?typefield=subtype&parenttype=11 and see the JSON that gets returned. Type 11 is the Art type category. If you change the link to have type=12, you’ll see sub types returned for the Dance category. Now we’ll add the javascript to the template with the form to make this all come together:
You can see this in action here: http://www.tamberra.com/section/submitevent
Out in the Wild
We worked with Buffalo News (www.buffalonews.com) on their events submission form. We used this feature as well as others to make a dynamic form to help the newsroom gather events information from their community.
See it here: Buffalo News Events Submit
Any questions or comments? Let us know below. We’d love to hear from you.
