Module Tutorial: User Polling / Rating: Adding a Paragraph Feature

We’ve managed get a working (albeit lightly featured) poll system up and running, but we have a little bit of an issue - what happens if we want to make the poll look different or display the results in a different way? We could start adding paragraph options like crazy with things like (use a <h4> header, use a <h1> header), display the options on one line, etc., but we still wouldn’t be able to fulfill every combination of display possibilities for the system.

Luckily, the Site Feature system comes to the rescue and makes it possible to let the Webiva editors define how they want their polls to look using modified html markup.

Step 1: Switching our paragraph back to outputting a feature

The first thing we need to do is drop the partial we were rendering, and instead switch our renderer back to outputting a feature. Open up page_renderer.rb again and change the render_paragraph :partial => ... line to read:

vendor/modules/poll_demo/app/controllers/poll_demo/page_renderer.rb

  render_paragraph :feature => :poll_demo_page_view

Reload the page in the editor and we should be back to the “Hello Webiva!” output we set up earlier in the tutorial.

Step 2: Writing a default feature

The first thing we need to do is write a new default feature for the poll_demo_page_view feature. A good way to get started on what the feature code should look like is to take an erb partial like the one we wrote in the last page and convert every erb tag into a <cms:something> tag. Here’s what I came up with (replace the existing feature :poll_demo_page_view near the middle of the class in page_feature.rb):

vendor/modules/poll_demo/app/controllers/poll_demo/page_feature.rb

       feature :poll_demo_page_view, :default_feature => <<-FEATURE
         <cms:poll>
            <cms:responded>
               <cms:graph/>
            </cms:responded>
            <cms:form>
              <b><cms:question/></b><br/>
              <cms:response/><br/>
              <cms:submit/>
            </cms:form>
         </cms:poll>
         <cms:no_poll>Invalid Poll</cms:no_poll>
       FEATURE

Step 3: Defining the available tags

Now, these <cms:something> tags don’t actually exist yet. Save the feature and try to reload your page, and you’ll see something along the lines of “Feature Definition Contains an Undefined tag:undefined tag ‘poll’“. That’s ok, it just means we actually need to define the tags. Replace the existing poll_demo_page_view_feature method with the one below:

vendor/modules/poll_demo/app/controllers/poll_demo/page_feature.rb

       def poll_demo_page_view_feature(data)
         webiva_feature(:poll_demo_page_view,data) do |c|
           c.expansion_tag('poll') {  |t| data[:poll] }
           c.expansion_tag('responded') {  |t| data[:state] == 'responded'}
              c.value_tag('responded:graph') do |t| 
                 data[:poll].results_graph(data[:options].graph_width,
                                       data[:options].graph_height)
              end
          
           c.form_for_tag('form','poll') do |t|
             if data[:state] == 'question'
               { 
                 :object => data[:response],
                 :code => hidden_field_tag('poll[poll_demo_poll_id]',data[:poll].id)
               }
             end
           end
           c.h_tag('question') {  |t| data[:poll].question }
           c.field_tag('form:response',
             :control => :radio_buttons, 
             :separator => '<br/>') { |t| data[:poll].answer_options }
           c.submit_tag('form:submit',:default => 'Submit')
         end
       end

You’ll see that each <cms:something/> tag that we used in the default feature has been defined inside of the method above. If this were a real module, we would probably work on the tag definition a little bit more to make sure that every piece of data is available in the feature (like being able to pull out the results in text form, for example).

You can try out the poll functionality and see that it is still working correctly from the front end, but also try creating a new style for the poll and moving some of the pieces around. For example:

         <cms:poll>
            <cms:responded>
               <cms:graph/>
            </cms:responded>
            <cms:form>
              <b><cms:question/></b><br/>
              <cms:response separator='&nbsp;'/>
              <cms:submit>Vote</cms:submit>
            </cms:form>
         </cms:poll>
         <cms:no_poll>Invalid Poll</cms:no_poll>

The code above will put all the answers on the same line along with the submit button, which has been changed to read ‘Vote’. You can see the tags that are available in the feature by clicking on the ‘Toggle available Tags’ link in the popup site feature editor.

The tag syntax is a little confusing, but take a look at the API docs for ParagraphFeature, and you should be able to parse out the different tag creation methods that are available.