Building a better UX on CCE submit forms

05 Dec Building a better UX on CCE submit forms

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:

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.

• About
• Latest Posts

Stacey Jenkins

Stacey has 15+ years of project implementations under her belt. From very large to very small, she has managed, analyzed, built, and tested systems and then trained teams how to use them. Specifics are on her linkedin, but at the end of the day, Stacey enjoys building things that give real value to the business at hand. She loves this stuff.

Latest posts by Stacey Jenkins (see all)

• Display your youtube playlists or channels on your site directly from Youtube - June 7, 2014
• You say you want PHP SOSE examples? - January 14, 2014
• Building a better UX on CCE submit forms - December 5, 2013