Up
Building a better UX on CCE submit forms - Tamberra
Here at Tamberra, we see ourselves as professional digital problem solvers. We love a good mystery and that is what your project might be at this stage… a mystery. Who, what, where, when, why – these are all questions that we can help you answer.
Tampa, Web Development, Web Developers, Web Applications, Tampa Bay, Programmers, Newspaper Web Developer
6017
post-template-default,single,single-post,postid-6017,single-format-standard,do-etfw,ajax_fade,page_not_loaded,,vertical_menu_enabled,side_area_uncovered_from_content,qode-theme-ver-7.5,wpb-js-composer js-comp-ver-5.1,vc_responsive

Building a better UX on CCE submit forms

user experience

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.

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

 

Stacey Jenkins

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.
Stacey Jenkins