Module Tutorial: User Polling / Rating: Adding Paragraph Options

Now that we’ve got our basic functionality working, let’s add some options to let us control the size of the resultant graph.

Step 1: Updating PageController

In order to add some options, we need to open up the PageController and add them to our HashModel and then add an options form to the HashModel as well. Open up the file (page_controller.rb) and modify the ViewOptions class to read:

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

   class ViewOptions < HashModel
     attributes :graph_width => 300, :graph_height => 150
     integer_options :graph_width, :graph_height
     validates_numericality_of :graph_width, :graph_height
     
     options_form(
           fld(:graph_width,:text_field),
           fld(:graph_height, :text_field)
         )
   end

What we’ve done here is add two options: :graph_width and :graph_height, which default to 300 and 150, respectively. We then told the HashModel to store those fields as integers, and for good measure, added some validation. We’ve also used Webiva’s options_form syntactic sugar to define the options form. If we had a more complicated form we could have created a separate view file to handle the form. Save the file and reload the page in the editor.

If you click on the ‘view’ paragraph in the editor, instead of an empty form, you should now see the options form with the two fields and their default values filled in. Change those to something larger, like 500x250, and resave the page.

Step 2: Modifying the renderer and view

We now need to modify the renderer to pull out the options. Add the following line to the top of the view method in page_renderer.rb:

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

   @options = paragraph_options(:view)

We also need to take this into account in the view, so modify the call to poll.results_graph in _view.html.erb to read:

vendor/modules/poll_demo/app/views/poll_demo/page/_view.html.erb

   <%= poll.results_graph(options.graph_width,options.graph_height) -%>

Pull up the page on the front end of the website, and you should be able to try out your polls with the updated size.