How to Filter your Organization’s Employees Based on Their Skills, Qualifications & Expertise?  

Often in an organization, when there is a specific task that requires a specific skill, you might need to be able to filter your employees based on their skills, qualifications, and expertise. With the Filter web part from BindTuning , you will be able to filter your employee list based on any predefined criteria, while also making the employee list visually appealing , displayed to your users on a page with a customized look and feel. So, let us dive into this amazing web part that takes your organization’s work place to that next level!

Note that if you learn to configure BindTuning Filters, you are all set and ready to configure all the other BindTuning web parts. Here is a quick summary of steps to configuring a "Filter Employees by Skill" scenario:

1. Install the Filters web part;
2. Create a Template List to define how your content will be displayed on the page;
3. Create a Content/Source List, and fill it with detailed employee information;
4. Manage Lists, to define which list is the Content List and which is the Template List;
5. Relate the Content List to the Template List;
6. Insert a Background column with employees' headshots to the Content List, and display the images in the web part;
7. Define Filtering Criteria following best practices for column naming.

1. Install the Filters web part, and start to configure it
   • Install the Filters web part in your site collection;

   You can do this effortlessly through the BindTuning Online App for Office 365 or the Provisioning Engine if you are on SharePoint On-Premises . (For more information on web parts installation, please check our User Guide available at BindTuning Help Center

   • Edit the page (using the page "Edit" button );
   • Add a new section to the page to create more room for the web part (select the plus sign on the left part of the page to do it);

     

   • Inside this new section , select the plus sign with a circle around it , then choose the BindTuning Filters web part.

   The challenging aspect about Filters is that before configuring it on the page, you must configure its lists.

   The Filters’ web part needs two lists:

   1. A Template list;
   2. A Content list/Source list;

   The Template list is meant to be about the look and feel of the items in your list, while the Content/Source list is about the contents you would like to display in the Filter web part. In our use case, the employees’ information and skills.

2. Create a Template List

   To create a Template list:

   • Select the pencil icon on the left side of the Filter web part;
   • Choose "Create new BT filters template list", where you’ll type "Skills_Template_List".

   The Template list is now under Site Contents, and it is empty for now.

3. Create a Content/Source List, and fill it with the necessary content

   Disclaimer: You do not need to create a new Content/Source List per se, if you already have a pre-existent list that has all the necessary employees’ information.

   In this example, we shall create a list with the following employee information and skills:

   • Name;
   • Department;
   • Start Date;
   • Safety Training;
   • BSc Degree.

   To create this new Content/Source List with the above employee details and skills:

   • Go to Site Contents (selecting the gear icon on the Suite Bar);
   • Select "New" and create a new list , then name it "Skills_Content_List";
     • In the "Title" column write the names of the employees.

       Tip! You will notice that there are a few types of columns which you can add: Single line of text, Multiple lines of text, Location, Number, Yes/No, Person, Date and Time, Choice, Hyperlinks, Currency, Image, etc.

        

       
   • Add a new column with Type = "Single line of text" and name it "Department". It will be the column where you will write the name of the department to which each employee belongs;

     Tip! If you want to predefine a list of options, choose Column Type = Choice and insert all department names to create a dropdown.

   • Create a 3rd column, Type = "Date and Time" and name it "StartDate" (with no spaces in between the words);
   • Create a 4th column Type= "Yes/No" and name it "SafetyTraining" (again, with no spaces between the words);
   • Finally, create a "Single line of text" column and name it "Bsc Degree@". Notice that in this last column, we have spaces between the words and this symbol "@".

   Tip! You can populate your list with a diverse set of information and skills. Just make sure you define the most suitable type of column for each.

   To fill your list, select "Edit in grid view".

   
4. Manage Lists, to define which list is the Content List and which is the Template List
   • Go back to the page to which the Filters web part has been added to;
   • Edit the page and select the pencil icon to configure the web part again;
   • Select "Manage Lists" and click "Add List";
   • Copy the URL of the site collection ( as in: "sites/ SkillSet") into the empty bracket on the left;

     Tip! No need to copy the whole URL, simply "/sites/ SkillSet";

   • Click on "Select List" and select the Content list you created earlier, "Skills_Content_List";
   • Click on the floppy disk icon, and hit Save.

      

     

   Tip! To make the web part more visually appealing, and to unify the branding of the web parts with the site collection’s branding/design, click on the pencil icon to access the web part setting panel and go to "Web Part Appearance". Check "Theme Colors on the Title Bar".

   

   Tip! To permanently display the BT buttons that are needed for editing the web part , on the left side of the Title bar, select "Advanced Options" and toggle "Always Show BT Buttons".

   

    

   Note that if you do not check "Always Show BT Buttons", the BT buttons only appear if you hover over them.

5. Relate the Content List to the Template List

   Alright, now you have the Template list and the Content list created, but still, nothing appears on the Filter part. Why? You need to have the Template list related to the Content list.

   To do that:

   • Click on the BT button in the middle, "Manage Templates" ;
   • Choose the template list. This will open the Skills_Template_List for editing. This form has 5 sections:
     • Template Settings;
     • Set up a Link;
     • Front Tile Settings;
     • Back Tile Setting;
     • Animation Settings.

      

   Go to the section "Front Tile Settings" to configure your front tile to display the name of each employee in the "Captions" sub-section, choose the "Top zone" and type the following: {{Title}}. This will relate the two lists to each other, and the caption appearing on top of the item of the filter will be the respective Titles (names of the employees).

   Tip! You may choose to display the name of the employee (or other information from your Content List) in the center or bottom zone of the tile by selecting these zones and typing in them.

   Several formatting options are available for Captions: you can edit the caption color, size and format, or add a Caption Background to increase the visibility of the caption if the background is an image.

    

6. Insert a Background column with images to the Content List, and display the images in the web part

   Great, now you have configured the Filter web part! But what if you want the photo of each employee to be displayed in the tiles too?

   • Go to "Site Contents" » "Site Assets", and upload the headshots of the employees;
   • Go back to your Skills_Content_List and create a column of the type Hyperlink - name it "Background";
   • Fill the column with the link to the headshot in Site Assets, for each employee.

     Tip! You must copy the original link to the image , which you can find when you open the image and select "View original".

      

     

   After selecting "View original", you copy the clean link of this image to the Background column, and repeat this process until you have all the photos of your employees in the column:

   
   • Go back to the Filters web part page and click on ("Manage Templates" ) the BT button in the middle, and select the pencil icon  to edit your Skills_Template_List;
   • On the same sub-section as before, "Front Tile Settings", you’ll choose "Image" and type {{Background}};

      

     
   • Edit the "Back Tile Settings" adding other information available on your "Skills_Content_List", for example {{StartDate}}. The back tile will display the date on which each employee started working at the company .

     Tip! The back tile information will only appear if you activate the Animation settings, choose a suitable type of animation and the time interval (for example: "Flip Animation").

      

7. Define Filtering criteria following practices for column naming

   Filter lists check , front tiles and back tiles, also check . But how do we use the Filters web part to filter the employees who have gone through the safety training? Or who belong to a specific department?

   • Edit the page and edit the web part , to access its settings panel;
   • Go to "Filtering Options":
     • To filter for users who have gone through the Safety Training, write the name of the column SafetyTraining from the "Skills_Content_List";
     • To filter by Department , type "Department";
     • To filter by BSc Degree , add {{internal column name}} . If you write the exact column name “BSc Degree @ ” the ‘’Filtering Option’’ does not work .

       Tip! To find the internal column name, go to the content list by clicking on the third BT button and selecting Skills_Content_List . Once in the list, click on the gear icon  in the Suite Bar, and choose "List Settings". "List Settings" can only be found when you are on the page of the respective list. Select the column field and copy the URL after "Field=" (in this example Field= BscDegree_x0040) to the Filtering Options.

       
     • Tip! Separate each filtering criteria with a comma.

   The filtering criteria is now showing in your web part as a button with a dropdown.

   Tip! To change the filter buttons naming, from "SafetyTraining" to "Safety Training" and from "BSc Degree @" add [Safety Training] - with a space between the two words right after “SafetyTraining” and [Higher Education] right after "BscDegree_x0040 ”

   

Hopefully, by now your Filter web part is all set and ready!

More information on configuring the Filters Web Part available at BindTuning Help Center