Home > ColdFusion, Web Application Development > Learning CFWheels – CRUD and My All-in-One View

Learning CFWheels – CRUD and My All-in-One View

In a previous life, I was a Fusebox 4.1 developer.  We had a pretty standard way of making an interface for Creating, Retrieving, Updating, and Deleting records.  All records would be displayed in a table, the last column of which was called the actions column.  In this column, next to each record would be links for Edit and Delete. In the bottom row of the table, would be an empty form with a Add button in the Actions column.  It’s pretty simple, which is probably why we used it over and over again.  We just add a parameter to the form with a default of zero.  We also add it to the two links and change the value to equal that of the current record id.  If the two match, our page knows we are editing this row and the display changes to a form for this row, with a submit button in our actions column.  Clicking submit updates the record and returns us to our table with the updates visible.  This may not be the best way to do this, but it worked and our customers liked it.  The result looks something like this:

add_edit_delete_interface

Our all-in-one CRUD interface

I thought it would be a worthwhile exercise to recreate this using CFWheels for a couple of reasons.  First, it gets me using CFWheels in a real-world situation helping me improve my skills.  Second, I wanted to use the code generated by the Scaffold plugin as a starting point for creating my interface.

Scaffolding

The first thing I did was run the scaffold plugin to generate the model, view, and controller files.  Then left me with index, new, show, and edit view files.  Index lists all records, while show displays a single record.  I used the  index view as a jumping off point.  My display actually requires a foreign key to show all the records for a given foreign key.  This made is necessary to modify my index action in the controller as follows:

<cfset myObject = model("myObject").findAll(where="foreignKeyID=#params.foreignKeyID#")/>

Creating the all-in-one view

This retrieves all the records I need for display in my data table.  I also need to set a parameter which we’ll call vCount and we’ll default it to zero.  I then build the table header row and leave one last blank column for our actions.  Now I loop over the myObject recordset to create rows for my data.  Within the loop I need an if block.  First well handle the rows we are simply displaying, so we’ll check to see if vCount does not equal foreignKeyID.  If it does not, simply create a row with each table cell containing a data field for our record.  In the action column, let’s add an edit link like so:

#linkTo(text="Edit", action="edit", key="#params.key#", params="vCount=#params.key#)#

Notice we set our vCount parameter equal to the key of the current row.  This leads to our else block, still within the loop.  This time we are checking to see if vCount is equal to the key.  If it is, we create a form for that row only with the appropriate form elements for each field.  In the figure above, the record in row 2 of our table has been selected for editing. In the last cell of the row, instead of putting an edit link, we need a submit button to update the record.

Now let’s add a delete link.  It’s very similar to our edit link but we’ll add a confirmation like so:

#linkTo(text='Delete', action='delete', key=id, confirm='Are you sure?', params="vCount=#params.key#")#

This link will cause a confirmation popup to appear with the text Are you sure. Clicking OK executes the delete action in our controller.  We taken care of the R, U, and D in CRUD.  Let’s handle that create now.

After our loop, let’s add a new form to create a new row in our table.  In my case, I needed to add in a hidden field for the foreign key value, but that’s about it.   Add a submit button in the last cell of the row, test and we’re done.  A single view handles all the CRUD.

This interface is probably not useful in all cases, but in our case we were doing a lot of repetitive actions.  We were almost always working with records on a foreign key.  This method provided a quick way to handle that and it was relatively simple to code.  It proved fairly simple to code using CFWheels and I would certainly use it in the  future.  I found that using the scaffold to generate the basic code worked great.  I then customized the generated files to fit my needs in a real world situation.

I hope this brief write up helps someone who might be considering using the same type of interface to combine the CRUD functions into a single view.  It was certainly a useful learning exercise for me and I think it will prove useful in work in the future.

Advertisements
  1. August 20, 2010 at 6:17 am

    Nice! It sounds like you’re getting more comfortable with the workflow (and coming up with your own). Keep chugging through!

  2. ComboFusion
    August 23, 2010 at 11:05 am

    Hey there again! Since I am actually at the same level with learning Wheels as you are and as it seems we are both doing the same stuff and learning from the same sources, I had idea… If you can, please check out my blog and see if you can find any useful ideas or maybe you want to comment about something I wrote. In this article you wrote you are actually dealing just with displaying the data from the database etc.. What about saving data to multiple database tables and validation? In one of your posts you were dealing just with saving data to one table. I am sure this is a subject that everyone of us zealous newbie Wheels coders will eventually come across. 🙂 So, looking forward hearing from you. Here’s my blog address: http://combofusion.posterous.com/ Cheers!

  1. January 2, 2011 at 2:43 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: