As you may have noticed that I have been posting more ColdFusion posts than I have ASP.NET or PHP. That’s because the contract work I am involved with right now is 95% ColdFusion with 5% of Javascript.

We have a list of team members that needs to be pulled out of the database. There are several team members pages that are in different sections of the web site. Combining them isn’t really an option because they need to stay in their prospective areas.

The customer also doesn’t want parameters passed to the page. This is typically how I would specify which team_id is used in the query. So instead of doing that I’ve decided to use a function that I can call seperately in each page for that team. I’ll pass parameters into that function and get my teamlists that way.

Here is the function:

<cffunction name=”teamMembers” returntype=”query” output=”false” access=”public”>
<!– Identify Argument –>
<cfargument name=”team_id” type=”numeric” required=”true” hint=”Team id.” />
<!– Use the argument (team id) to get the list of team members from the database. –>
<cfquery name=”getTeamList” datasource=”SQLDEV”>
SELECT TEAMLISTS.*
FROM TEAMLISTS
where TEAMLISTS.team_id = #team_id#
and live = ‘y’
</cfquery>
<cfreturn getTeamList>
</cffunction>

As you can see I am using cfargument to pass the parameter team_id into the function. I then take that value and place it in the where clause of my cfquery. The cfreturn will return the result of the function. I have put the query name in the cfreturn because I want the query results returned to me.

After messing around with this for a while I decided to place the function inside a component. Adding the function into a component is easy. Just wrap the following text around your function place it in a seperate file and name it filename.cfc.

<cfcomponent>
… code from above
</cfcomponent>

Now I’ve got a function that will get the teamlists based on the team_id I pass to it. I can call this function by invoking the component in any of my other team pages. It will look like this:

<cfinvoke component=”test_func” method=”teamMembers” returnVariable=”teamMembers”>
<cfinvokeargument name=”team_id” value=”1″>
</cfinvoke>

Now notice that the name I gave my component: component=”test_func”. That’s short for “test function”. This isn’t an arbitrary name. It is the exact file name of the component I created in the steps above. The file test_func.cfc contains all the code for the component listed above.

The method that you see is method=”teamMembers”. The method name is the name of the function within my component. NOTE: You can have any number of methods i.e. functions in a component. I only have one right now and this is how you invoke that method inside component=”test_func”.

The returnVariable field is set with the value “teamMembers”. I chose this name because it was the same name as my query in my test_func component. It does not have to be named the same. It’s just a place holder for the data returned from the function.

Lastly is the cfinvokeargument tag. This tag is used to pass whatever parameters are needed by your function inside your component.

<cfinvokeargument name=”team_id” value=”1″>

This simply tells my function that the variable “team_id” has a value of 1. My function grabs the value of team_id and runs a query off of it.

So now I have everything I need. I have my component with my function or method inside of it. I have the code necessary to pass parameters into that function. I can also invoke that component method and pass parameters into that same method. But I don’t have a way to display the data yet. So let’s do that now.

<table>
<cfoutput query=”teamMembers”>
<tr>
<td>
<img width=”94″ height=”94″ src=”#picture#” style=”float:left;”>
<a href=”#team_id#”>#name#</a> - #organization#
</td>
</tr>
</cfoutput>

As you can see it’s a simple cfoutput. I use a query to reference my data that was returned in the cfinvoke field returnVariable. That variable was called teamMembers as you can see if you look at the code above. Then I just simply put in my fieldnames that correspond to column names in my database tables. That’s it. Now let’s look at it all together.

<cfinvoke component=”test_func” method=”teamMembers” returnVariable=”teamMembers”>
<cfinvokeargument name=”team_id” value=”1″>
</cfinvoke>

<table>
<cfoutput query=”teamMembers”>
<tr>
<td>
<img width=”94″ height=”94″ src=”#picture#” style=”float:left;”>
<a href=”#team_id#”>#name#</a> - #organization#
</td>
</tr>
</cfoutput>
</table>

Note: The code that invokes the component method and diplays the results listed above is in a file called myfunc.cfm. This file resides in the same directory as the component. If you want to place your components in a seperate folder you must change the component field in cfinvoke. If I want to place my component “test_func” in a folder called cfcs the code to invoke that will look like this:

<cfinvoke component=”cfcs.test_func” method=”teamMembers” returnVariable=”teamMembers”>
<cfinvokeargument name=”team_id” value=”1″>
</cfinvoke>