Front-end Search for Members & Filter Results based on a value
Hello Everyone! (Im using umbraco 4.7)
I am trying to make my
Members Directory more user friendly. Currently I have some Razor script
that spits out all of my members and their various bits of info in a
list as shown below in the darkened areas. What I would like to do
(shown the bright area) now is add in a Search Field, and Quick Filter
drop down list (so I can quickly filter Members by "department").
I
don't need these 2 elements to work together in anyway, but I would
like to be able to search for "John" and have all of those members show
up. Or use the quick filter to select "Social Work" and see a list of
members that are associated with that Department.
Right now I have the following code in my Razor Script:
<umbraco:Macro runat="server" language="cshtml"> @using umbraco.cms.businesslogic.member @{ var memberId= HttpContext.Current.Request.QueryString["id"]; } @if(memberId != null) { var member = new Member(Convert.ToInt32(memberId)); var facultyFname = member.getProperty("facultyFristName").Value.ToString(); var facultyLname = member.getProperty("facultyLastName").Value.ToString(); ...ect <!--Display a Single Full Profile Page with values below--> <div>INSERT FULL PROFILE INFO</div> }
else { <div>ADD SEARCH FIELD STUFF HERE</div> var members = Member.GetAll; foreach(var item in members){ var facultyFname = item.getProperty("facultyFristName").Value.ToString(); var facultyLname = item.getProperty("facultyLastName").Value.ToString(); ....ect <!--Display all the Members and Values below--> <div>INSERT QUICK LISTING</div> } }
</umbraco:Macro>
The
area of importance is the second half of that script (after the
"else"). Unfortunately, I dont really know how to effect the list of
Members once I have grabbed them all. Has anyone done something like
this before that they wouldn't mind sharing? Help on either one would be
great.
**Minor note, I'm also having trouble getting .OrderBy to work. Is it possible to sort the list alphabetically by facultyLastName?
In the else { } statement you can check for a postback and then grab the search querystring.
Maybe something like this could do the trick:
else { if(IsPost) { var searchString = HttpContext.Current.Request.QueryString["searchString"]; foreach(var item in Member.GetAll()) { if(item.getProperty("facultyFristName").Value.ToString().Contains(searchString)) { // We have a match <p>@item.getProperty("facultyFristName").Value.ToString()</p> } } } }
Above code is not tested at all - written directly in the editor.
Let me know if it works ;-)
- Bo
P.S: I think you may have a spelling error in Firstname (FristName)?
Also, for the filtering, you should be able to use the ASP.NET Membership API. Here you'll find the method "GetUsersInRole()" in the Roles class. This returns a string array with all the loginnames in a given role.
Of course, this depends on the structure of your Member section in Umbraco as "Legal studies", "Deans Office" and "Social Work" all have to seperate roles :-)
@Bo Mortensen thanks for posting back. I'm affraid I wasn't able to get your script to work so far. I'm extremely new to Razor so I'm not sure if I'll be able to troubleshoot it very well yet myself. Thanks for pointing out the typo tho.. fixed.
And yeah.. I've looked at the Roles thing.. but I wasn't really planning to have these members have any roles really at all. 99% of them won't have anything to do with the site except for updating their profile page on their own. (hopefully ;-) ) If that turns out to be my only solution then I guess I can do that.. but I was hoping to just be able to filter based on a specific value
Generic .net stuff that may or may not help here, but if GetAll() is returning an enumerable then you could use a query statement to search through the collection, for example...
var results = for o => o.getProperty("facultyFristName").Value.ToString().Contains(searchString) in Member.GetAll() select;
// Loop through the results collection to show on screen
I'm writing flat from memory so please excuse bad syntactical errors.
Alright - did you get any errors on the front-end then?
Working with members, I think it would be best practice to use Member Groups and Member Types to create different kinds of Members, regardless of access to Umbraco :-) I could be wrong thought. That's just how I like to work with members.
Well I have a pretty extensive list of MemberTypes set up.. and I had planned to just allow my Members to check off the "Departments" that they are associated with inside a series of checkboxes that I have set up. In my graphic you can see David Johnson shows "Dean's Office, Legal Studies" under his name.
I'm honestly not that sure how to even set up the form fields to trigger the postback. I have included by basic form fields in the script below.. How can I intergrate this into something like your solution? I still want to show all Members at the first load of the page..
<umbraco:Macrorunat="server"language="cshtml"> @using umbraco.cms.businesslogic.member @{ var memberId= HttpContext.Current.Request.QueryString["id"]; } @if(memberId != null) { var member = new Member(Convert.ToInt32(memberId)); var facultyFname = member.getProperty("facultyFirstName").Value.ToString(); var facultyLname = member.getProperty("facultyLastName").Value.ToString(); ...ect <!--Display a Single Full Profile Page with values below--> <div>INSERT FULL PROFILE INFO</div> }
else { <div> <form action="" method="post" id="searchFaculty"> <div id="searchField"><input name="searchdirectory" type="text" /> <input type="submit" name="search" id="search" value="Submit" /> </div> <div id="quickFilter"> <select name="DepartmentListings"> <option selected="selected">Quick Filter</option> <option>Dean's Office</option> <option>Legal Studies</option> <option>Social Work</option> </select> </div> </form> </div> var members = Member.GetAll; foreach(var item in members){ var facultyFname = item.getProperty("facultyFirstName").Value.ToString(); var facultyLname = item.getProperty("facultyLastName").Value.ToString(); ....ect <!--Display all the Members and Values below--> <div>INSERT QUICK LISTING</div> } }
If you want to keep your razor script clean and move the logic and form handling to the "backend", then you may want to consider creating an MVC3 project and take advantage of the inherent form processing etc... I did this for the last project, and used the excellent MVCBridge component to tie it in with Umbraco...
Was a lot simpler than trying to create complex Razor scripts through the Umbraco interface...
Thanks.. ok.. still getting an "Error loading Razor Script" can you show me how you would integrate your script with my current one? maybe i'm not combining it correctly..
Well I still haven't been able to come up with a solution for this quite yet despite everyones help. I thought I would go ahead and make a video showing you what I am trying to accomplish with Umbraco and my Members section..
I have also included my FULL template so far here: facultyTemplate.rtf
If anyone has code that would allow me to search and filter my members I would truely appreciate it... I plan to share all of the code once I get it finished.
It was suggested that I provide a less complex Template File, so I have stripped everything out but the First and Last Name values in this file: FacultyTemplate-Quick.rtf
You'll see where I have added the form "place holder" in the script and I just need help figuring out how to create a razor search feature that will let me search for members and hopefully filter them by department via a dropdown list.
Hey Everyone.. I still haven't been able to make any progress on this issue myself yet.. :-( Would anyone out there be able to help out with a solution?
Im not sure what you mean specifically, but I'm open to any solutions. Would you happen to be able to provide an example, or some code that I could review?
Well you already have a list of profiles that you are displaying on the page right? Using jQuery and it's "contains:" function you can filter that list based on specific criteria. Sorry I don't have time to write up a specific example but a quick Google "jQuery List Filter" threw up this page which will help to get you started http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/
Well I haven't been able to get the search filtering to work.. my list of data is very complicated and it seems to be having some trouble with that.. However since you pointed me to the Google Serach term I was able to solve my "Filter by Department" issue using this link:
@keilo - I sure would apprecaite your help here.. I have a script I am using to filter my list by "Deapartment" which you will see below... however I feel like it isn't the best way. I also still haven't been able to figure out how to search for a member.... any ideas? I would love to be able to include an advanced search, where I could allow people to search not only by name.. but other features that I have included in the members info.. But first thing is first.. I need a search field based on name.
I have trimmed down by script to just pull first and last names so it should be a little easier to see what I've done so far.
var members = Member.GetAll; foreach(var item in members.OrderBy(x => x.getProperty("facultyLastName").Value.ToString())) {
var facultyFname = item.getProperty("facultyFirstName").Value.ToString(); var facultyLname = item.getProperty("facultyLastName").Value.ToString(); var departments = item.getProperty("facultyDepartments").Value.ToString();
hi i tried to download the template but looks like the link is broken :(. I need to create something like what you did for my company's intranet. I have no clue as how to proceed as i am very new to .NET and umb....can u please give me some suggestions as how to proceed ?
The template that I talked about earlier is the same code that I posted just before your post. I am affriad I haven't made all that much progress on the whole thing. Other than that.
i hate to bump this thread but i need help very badly ! and there is no documentation whatsoever to help me out ! when i use the code that farmfresh here mentioned i get :
Error loading Razor Script Object reference not set to an instance of an object.
what am i doing wrong ? I also noticed that there was no mention of membergrouptype in the razor script....how would it work without knowing as which membergroup it needs to pull the members from ?
Front-end Search for Members & Filter Results based on a value
Hello Everyone! (Im using umbraco 4.7)
I am trying to make my Members Directory more user friendly. Currently I have some Razor script that spits out all of my members and their various bits of info in a list as shown below in the darkened areas. What I would like to do (shown the bright area) now is add in a Search Field, and Quick Filter drop down list (so I can quickly filter Members by "department").
I don't need these 2 elements to work together in anyway, but I would like to be able to search for "John" and have all of those members show up. Or use the quick filter to select "Social Work" and see a list of members that are associated with that Department.
Right now I have the following code in my Razor Script:
The area of importance is the second half of that script (after the "else"). Unfortunately, I dont really know how to effect the list of Members once I have grabbed them all. Has anyone done something like this before that they wouldn't mind sharing? Help on either one would be great.
**Minor note, I'm also having trouble getting .OrderBy to work. Is it possible to sort the list alphabetically by facultyLastName?
Thanks!
Hi there :-)
In the else { } statement you can check for a postback and then grab the search querystring.
Maybe something like this could do the trick:
Above code is not tested at all - written directly in the editor.
Let me know if it works ;-)
- Bo
P.S: I think you may have a spelling error in Firstname (FristName)?
Also, for the filtering, you should be able to use the ASP.NET Membership API. Here you'll find the method "GetUsersInRole()" in the Roles class. This returns a string array with all the loginnames in a given role.
Of course, this depends on the structure of your Member section in Umbraco as "Legal studies", "Deans Office" and "Social Work" all have to seperate roles :-)
Edit: A link to the method I mentioned: http://msdn.microsoft.com/en-us/library/system.web.security.roles.getusersinrole.aspx
@Bo Mortensen thanks for posting back. I'm affraid I wasn't able to get your script to work so far. I'm extremely new to Razor so I'm not sure if I'll be able to troubleshoot it very well yet myself. Thanks for pointing out the typo tho.. fixed.
All good! :-)
Did you get any errors when trying to save the script?
And yeah.. I've looked at the Roles thing.. but I wasn't really planning to have these members have any roles really at all. 99% of them won't have anything to do with the site except for updating their profile page on their own. (hopefully ;-) ) If that turns out to be my only solution then I guess I can do that.. but I was hoping to just be able to filter based on a specific value
Generic .net stuff that may or may not help here, but if GetAll() is returning an enumerable then you could use a query statement to search through the collection, for example...
var results = for o => o.getProperty("facultyFristName").Value.ToString().Contains(searchString) in Member.GetAll() select;
// Loop through the results collection to show on screen
I'm writing flat from memory so please excuse bad syntactical errors.
No errors when I clicked "save" on my template when I tried working with your script.. just broke it when I refreshed the page on the front-end..
Alright - did you get any errors on the front-end then?
Working with members, I think it would be best practice to use Member Groups and Member Types to create different kinds of Members, regardless of access to Umbraco :-) I could be wrong thought. That's just how I like to work with members.
- Bo
Well I have a pretty extensive list of MemberTypes set up.. and I had planned to just allow my Members to check off the "Departments" that they are associated with inside a series of checkboxes that I have set up. In my graphic you can see David Johnson shows "Dean's Office, Legal Studies" under his name.
I'm honestly not that sure how to even set up the form fields to trigger the postback. I have included by basic form fields in the script below.. How can I intergrate this into something like your solution? I still want to show all Members at the first load of the page..
If you want to keep your razor script clean and move the logic and form handling to the "backend", then you may want to consider creating an MVC3 project and take advantage of the inherent form processing etc... I did this for the last project, and used the excellent MVCBridge component to tie it in with Umbraco...
Was a lot simpler than trying to create complex Razor scripts through the Umbraco interface...
Hi again,
You need to point your form's action attribute to the page where the Macro is placed on. I.e: http://www.yoursite.com/members.aspx
the <input name="searchdirectory" ... will be your querystring :-) You can fetch this like this:
Best practice would be to check if this is null or empty before processing.
Thanks.. ok.. still getting an "Error loading Razor Script" can you show me how you would integrate your script with my current one? maybe i'm not combining it correctly..
Well I still haven't been able to come up with a solution for this quite yet despite everyones help. I thought I would go ahead and make a video showing you what I am trying to accomplish with Umbraco and my Members section..
You can watch the video here: http://www.youtube.com/watch?v=GS6D1pcw-48
I have also included my FULL template so far here: facultyTemplate.rtf
If anyone has code that would allow me to search and filter my members I would truely appreciate it...
I plan to share all of the code once I get it finished.
Thanks
It was suggested that I provide a less complex Template File, so I have stripped everything out but the First and Last Name values in this file:
FacultyTemplate-Quick.rtf
You'll see where I have added the form "place holder" in the script and I just need help figuring out how to create a razor search feature that will let me search for members and hopefully filter them by department via a dropdown list.
You can still watch the video for a visual. http://www.youtube.com/watch?v=GS6D1pcw-48
Thanks!
Hey Everyone.. I still haven't been able to make any progress on this issue myself yet.. :-(
Would anyone out there be able to help out with a solution?
You can view a simplified version of my template here: FacultyTemplate-Quick.rtf
and if you need a visual then I have a screencast online here: http://www.youtube.com/watch?v=GS6D1pcw-48
Hi,
Have you considered just doing this on the front-end using jQuery or the like?
Im not sure what you mean specifically, but I'm open to any solutions.
Would you happen to be able to provide an example, or some code that I could review?
Well you already have a list of profiles that you are displaying on the page right? Using jQuery and it's "contains:" function you can filter that list based on specific criteria. Sorry I don't have time to write up a specific example but a quick Google "jQuery List Filter" threw up this page which will help to get you started http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/
@Alex - I've never seen that before.. very interesting.. I'll give that a try today.. Thanks!
Well I haven't been able to get the search filtering to work.. my list of data is very complicated and it seems to be having some trouble with that..
However since you pointed me to the Google Serach term I was able to solve my "Filter by Department" issue using this link:
http://jetlogs.org/2009/02/10/filtering-lists-using-jquery/
So I'll keep looking and trying to figure out how to get a search field in there.. but thanks for getting me started on a new path!
Hi there
I implemented a similar page for an intranet. I've tried to download the template in your posts but the link is broken?
@keilo - I sure would apprecaite your help here.. I have a script I am using to filter my list by "Deapartment" which you will see below... however I feel like it isn't the best way. I also still haven't been able to figure out how to search for a member.... any ideas? I would love to be able to include an advanced search, where I could allow people to search not only by name.. but other features that I have included in the members info.. But first thing is first.. I need a search field based on name.
I have trimmed down by script to just pull first and last names so it should be a little easier to see what I've done so far.
Thanks in advance!
hi i tried to download the template but looks like the link is broken :(. I need to create something like what you did for my company's intranet. I have no clue as how to proceed as i am very new to .NET and umb....can u please give me some suggestions as how to proceed ?
Hello ashwini,
The template that I talked about earlier is the same code that I posted just before your post. I am affriad I haven't made all that much progress on the whole thing. Other than that.
Thanks a lot for the code FarmFresh :). I am sure someone here will help you out with your issues :)
Here is what i did till now:
1] Created a new document type called profile page with properties like last name, first name, phone etc.
2] Inserted the code you gave in the template of the profile page. I made changes to reflect the properties i have like lastname etc
3] When i load the profile page on the website, it says:
Error loading Razor Script
Object reference not set to an instance of an object.
Any suggestions ? I already have created couple of members/member groups etc....
i hate to bump this thread but i need help very badly ! and there is no documentation whatsoever to help me out ! when i use the code that farmfresh here mentioned i get :
Error loading Razor Script
Object reference not set to an instance of an object.
what am i doing wrong ? I also noticed that there was no mention of membergrouptype in the razor script....how would it work without knowing as which membergroup it needs to pull the members from ?
Thanks !
Ashwini
is working on a reply...