05 Dec Building a better UX on CCE submit forms
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
For the purposes of this tutorial, we will use a CCE module with the following metadata hierarchy:
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.
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 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.
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