Employee Details by Country

Client’s Requirements:

  • Develope emlpoyee directory in sharepoint modern page.
  •  Need the functionality for changing the employee images from sharepoint list.
  •  Use filter functionality in this directory for employee name or country name.
  •  Make this page responsive for any kind of device.


Our Solution:

  • At first we created two lists named as Country and Employees.
  • A WebPart page was created and named the page as “Webpartpagetest” or any other name you want to give.
  • After that we will get a Content Editor part on WebPart page.
  • In this content editor click on the navigation shown in the image below and select “Edit Web Part”
  • Put link of the path of “code.txt” file in the Content link text box shown in picture mark as red circle. Here the path of “code.txt” file is “/sites/deployment/SiteAssets/code.txt”.
  • Enter the desired code in embed window and click on publish.
  • Then select ‘Media and Content’ form categories and select ‘Script Editor’ from parts then click on ‘Add’ as shown in picture below.
  • Put the code which is given to you in the below page to hide the extra things of you web part page. And click on insert. And the project is ready to execute.

Output Images :