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.

This image shows what this tutorial will build.

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

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)

  • Demonstrations (1111)
  • Opening (1112)
  • Shows (1113)

Dance (112)

  • Classes (1121)
  • Participatory (1122)
  • Performances (1123)

Family (113)

  • Fall Events (1131)
  • Holiday Events (1132)


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: 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 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:


Out in the Wild

We worked with Buffalo News ( 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.