Think Outside the Module

When I set out to build a voting app for a client, I wanted to make the actual voting process super easy to understand for the end user. I could have easily enough just made a listing of the candidates and then a radio selection with a Submit button but I wanted it to be a much nicer, more intuitive experience. My design instinct told me that it would be nice if the user selects the candidate directly - rather than viewing candidates and then selecting a radio button from a list.

I started with the bare requirements: Each candidate must display the photo, name, a "nominated by" section, a downloadable PDF link, and a biography. Naturally, I go to 2sxc for this kind of content and layout. But we also had to use DNN Sharp's Action Form to handle the actual voting functionality through a radio selection and a "Cast Vote" button.

At first I tried to make rich content inside of the Action Form but it didn't give me enough flexibility over the design let alone the content I could put in there.

So how do we make two modules work together? How we do think outside the module?

It only made sense that I start with a 2sxc Content module and figure out how to link the selections from this module to a hidden radio button list in an Action Form. I initially thought it was going to take JavaScript but I had an "aha" moment and realized it was much simpler:

I would use a <label for="something"> in the 2sxc template which points to a hidden radio button in the Action Form.

So, as always, I started with the design first. I created the listing of candidates in 2sxc to mock it up. Then I created some HTML label tags that manually point to a hidden radio button in an Action Form below.

Here's how it works functionally:

1. I have a 2sxc Content module that lists out all of the candidates
   1. In my candidate listing module, I have a <label for="dnn580Candidates-X"><i class="fal circle"></i></label> tag that points radio button in an Action Form below. This tag is designed to entice the user to click it. Functionally, the "for" attribute will trigger the selection.
   2. I use some jQuery and CSS to handle the active states of the candidate card selection. So when the user clicks on the label, it sets the card as active with a CSS class to show the user has selected that person. And I also use FontAwesome icons to turn the circle icon into a checked circle icon. Using FontAwesome icons instead of radio buttons looks way nicer and gives more flexibility and consistency to the design.
2. Below the 2sxc module, I have an Action Form with the list of candidates in a radio selection list and a "Cast Vote" button.
   1. The candidates radio selection is hidden via CSS in the UI Settings of the field.

There definitely are caveats. For instance, the listing from the 2sxc module doesn't stay the same as the list of candidates in the Action Form. But that's a minor thing for my case as the content doesn't change very often and voting only happens once per year. Overall, this solution is pretty rock solid and makes for a better user experience.

Even with DNN and modules getting better, I think there will still be lots of times where you need to think outside the module to make for a better user experience. Think design-first, and try to figure out a simple way forward. Happy DNN'ing.