Are you, like me and thousands of other users, huge fans of Bamboo's Calendar Plus Web Part? It's a fantastic product, isn't it?
Providing the ability to:
Color code based on a specific choice value
Ability to view different calendar views of a list or library (a hand full of them are shown below)
Ability to define the display column in the calendar, and ability to defined additional columns to be displayed in tool tips.
Ability to connect to different sources, such as Lists, Libraries, SQL Table/View, and List Rollup Web Part.
And many, many more features.
However there has been one request that takes a little more ingenuity to accomplish. It has been a request to provide the ability of "real-time" filtering to their end users. The "real-time" filtering is a drop down menu that allows users to select a specific value and as a result, only items that match that selection will be displayed. Luckily our product has the ability to consume filters from other sources using an out-of-box feature called Web Part Connections.
Web Part Connections creates a link between two Web Parts, allowing them to pass or receive information from each other. In this article, I will be providing you with 2 methods of how to pass filters into Calendar Plus Web Part using Web Part Connections.
Creating a custom list with the filtered values
The first option I am going to discuss is using a custom list to provide the filter values to Calendar Plus Web Part. A visual example is below
In the above example, you will notice on the right side of the screen is Calendar Plus Web Part configured to an Event list. On the left side of the screen is a custom list that has 5 items related to Event Types. Each of these Event Types relates to a choice column in the Events list called Calendar Type. When a user selects a specific Event Type by clicking a radio button, the Calendar Plus Web Part will then filter automatically to display only Events that match that Event Type. In our example, only Daisy A - Vacation matches the Event Type Vacation. Here are the steps to achieve this -
-
Decide which columns you want to filter on. You can filter on more than one column but in our example we will be using only one column filtering.
-
Create a custom list in the same site as Calendar Plus Web Part.
-
Relabel the column Title of the custom list to a more descriptive label as it will be shown to the end user as Event Types is shown above.
-
Go to the page where Calendar Plus Web Part is deployed, and add the custom list you created to the page.
-
Modify the list view Web Part as desired.
-
When the list view Web Part is ready, click on the drop down arrow to display the Web Part edit menu of the list view Web Part while in Edit Page mode, select
Connections ->
Provide Row To ->
Bamboo Calendar Plus Web Part
-
A pop-up window will appear that will allow you to configure the connection. The first window allows you to select the column from the list view Web Part that users would filter Calendar Plus Web Part on.
-
When you click
Next, a similar window will appear with all the columns that is consumed by Calendar Plus Web Part, here you would select the column that the list view Web Part would map to, in this example, Event Types maps to
Calendar Type.
-
When you click Finish or Next the screen will refresh and radio buttons will appear next to the the values in the list view Web Part.
You have successfully created a connection between a list view Web Part and Calendar Plus Web Part.
Creating a Form Web Part to filter Calendar Plus Web Part
Using a list view Web Part has its advantages, for example, anyone can maintain the list of options in the custom list, however, most users are used to a drop down interface. Luckily SharePoint out-of-the-box offers a Web Part in both WSS v3 and MOSS 2007 called Form Web Part. Think of Form Web Part is like the Content Editor Web Part where it is a self contained, independent Web Part.
The Form Web Part offers 5 interface types
-
Text Box - Similar to
Single Line of Text input box in Edit and New form, user can enter a value then click
Go to invoke the request.
A sample snipet of the code is as follows:
<div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><input type="text" name="T1"/><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>
Where input type="text" defines that the Web Part displays a single line text field and name="T1" is the label used for Web Part Connection. The code surrounding the these entries that is in blue controls the submit button Go.
-
Text Area - Similar to
Multiple Lines of Text control in the Edit and New forms, users can enter text then click
Go.
A sample snipet of the code is as follows:
<div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><textarea rows="2" cols="20" name="T1"></textarea><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>
Where textarea defines that the Web Part is to display a text box similar to multiline text field, rows= defines how high the text field is, and cols= defines how wide the text field should be. The name= is the label used for Web Part connections. Similar to Text Box control, the surrounding blue text controls the Go button.
-
Check Box - Similar to
Yes/No control in the Edit and New forms.
A sample snipet of the code is as follows:
<div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><input type="checkbox" name="C1" value="Vacation" Checked>Vacation?</br><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>Where
input type="checkbox" defines that the Web Part is to display a checkbox control,
name= is the label used for Web Part Connection, and
value= is the value passed to the Calendar Plus Web Part if the checkbox is checked. The final attribute
Checked, defines if the check box is checked by default, if the attribute says
Unchecked then the check box is cleared by default.
-
Option Box - Similar to radio button option with Choice field in the New and Edit forms.
A sample snipet of the code is as follows:
<div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><input type="radio" value="Trade Show" name="R1">Trade Show</br><input type="radio" value="Vacation" name="R1" >Vacation</br><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>
Where input type="radio" defines the Web Part to display a radio button control, value= is the value passed to the connected Calendar Plus Web Part if selected, and name= is the name of the control. If you have multiple radio button options, use the same name= value.
-
Drop-down/List Box - This option is special as it covers 2 different kinds of controls, one is a drop down menu shown on the left and a list box shown on the right.
A sample snipet of the code is as follows:
<div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><select size="2" name="D1"><option value="Trade Show">Trade Show</option><option value="Vacation">Vacation</option></select><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>Where
<select ... </select> defines the Web Part to use a select option control,
name= is the name of the control used for Web Part Connections, and
size= defines how high the box should be, if
1 the Web Part displays a drop down, if greater than 1, that defines how many lines in the list box to display, if there are more options than lines, then the Web Part displays a scroll bar.
<option value=""></option> each individual option that is displayed to the user in the drop down or list box control.
After successfully configuring the Form Web Part as desired, follow the steps 6 - 9 in the above section Creating a custom list with the filtered values to connect the new Form Web Part to Calendar Plus Web Part, where on the first step instead of selecting a column, you are selecting the control name (i.e. name=).
Posted
May 05 2008, 07:00 AM
by
Jeff Kozloff
Jeff originally joined Bamboo Solutions in June of 1999 as a part-time Test Engineer (basically a gopher). He continued with Bamboo as a part time tester while obtaining my Bachelors of Science in Computer Science degree at Longwood University. Upon graduation in 2004, Jeff accepted a full time position at Bamboo as a Helpdesk Specialist and became Manager of the Helpdesk team in 2006. In October of 2007 until present, Jeff took a role as Project Manager in the Solution group bringing his in depth technical knoweldge of SP to Bamboo's customers.