none
Custom view using standard JavaScript Versus using JSLINK RRS feed

  • Question

  • I am working on sharepoint server 2013 on-premise, and i have the following requirement:-

    1. we want to create a new list which have 15 department items. such as HR,Finance,IT, etc.

    2. and for each department we want to enter the number of employees who left the department for each month.

    3. now each department have its own KPI about the maximum number of employees which have to leave each month.

    4. depending on each department KPI the list item will have green, yellow or RED color. for example if the number of employees who left the HR dept is 3 then the item should be red colored.while for the finance department if the number is 5 then it will be red colored and so on...

    so i am thinking of following these steps to achieve the above requirements:-

    1. to create a new list, with the following fields:-

      1. Department Name.
      2. add 12 fields represents the Months. Such as January, Feb, March , etc...
      3. Description. This field describe the latest number entered for each dept item.
    2. so in this case for each department we will have 12 fields to enter the number of employees who left the department at that month.

    now the issue i am asking about is how i can represents the data, so for each department it will show the number of employees who left at the current month, and color the item based on each department KPI. also i want to add "?" symbol beside each department name, and when user hover over the "?" it will show the item Description field.

    now the first thing which came to my mind is to do the following:-

    1. to write a java-script which integrate with the list using REST API.
    2. where i can retrieve the related data for each department and color it accordingly.
    3. then inside my site home page >> i can add a code snippet web part >>reference the javascrpt.

    so can anyone adivce if my above appraoch sound valid ? or i should be looking to create this using JSLINK or create an APP.... i am confused on which appraoch i should/preferred to follow and why ?

    • Edited by johnjohn11 Tuesday, April 11, 2017 12:17 AM
    Tuesday, April 11, 2017 12:13 AM

All replies

  • Hi,

    You can achieve your requirements by following ways:

    >Create a list called Department to store department names

    >Create a list called Months to store Month details

    >Create a list called DepartmentStatus which will have 3 columns

        - Department : lookup to Department title from Department list

        - Month : lookup to Month title from Month list

        - Number : number field to store number of employee left particular department

        - Year : number field to store year.

    >In the third list DepartmentStatus you can use JSLink (https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a) and customize whole view of the list:

     -On load of the View, get current year data and hide all the fields

     -Create drop-down for with different year and select current year

     - Render data as per your need and use different color coding for department.

     - On mouse hove of particular department, you can use DIV to show description.


    Thanks, Amit Kumar, LinkedIn Profile ** My Blog
    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    Tuesday, April 11, 2017 6:01 AM
  • Hi,

    You can achieve your requirements by following ways:

    >Create a list called Department to store department names

    >Create a list called Months to store Month details

    >Create a list called DepartmentStatus which will have 3 columns

        - Department : lookup to Department title from Department list

        - Month : lookup to Month title from Month list

        - Number : number field to store number of employee left particular department

        - Year : number field to store year.

    >In the third list DepartmentStatus you can use JSLink (https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a) and customize whole view of the list:

     -On load of the View, get current year data and hide all the fields

     -Create drop-down for with different year and select current year

     - Render data as per your need and use different color coding for department.

     - On mouse hove of particular department, you can use DIV to show description.


    Thanks, Amit Kumar, LinkedIn Profile ** My Blog
    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    thanks for the reply.. but i have these 2 questions about your reply:-

    1. why you are proposing to create 3 lists and not just one list ??

    2. seems you are proposing using JSLINK..now for me i find it easier to write a pure (standard) javascript which communicate with the list API to create the view i am asking for... so can you advice what are the advantages and disadvantages of using JSLINK compared to using pure (standard) javascript which communicate with the list API??

    Thanks


    • Edited by johnjohn11 Wednesday, April 12, 2017 1:52 AM
    Wednesday, April 12, 2017 1:51 AM
  • Hi,

    Please find below inline comments from my side:

    1. why you are proposing to create 3 lists and not just one list ??

    [Amit]: With the help of 03 lists, it's easy to manage the details, similar to what we used to do in the case of Database Tables and other advantages are:

    >You also want to display total of employees left for current month in particular department, in this case, you can use JSLink in the view webpart of Department list:

        1.At the time of rendering particular row, get the department id and fire query in DepartmentStatus  list and    

            the total and display it.

        2. Other way is get all department details from DepartmentStatus  list on JSLink OnPreRender  event and create Accordion in Department list view webpart which will display count of each month.

    In both  cases, when user click of particular department redirect user to DepartmentStatus EditForm and render all the Employee details and provide option to Add new row.

    2. seems you are proposing using JSLINK..now for me i find it easier to write a pure (standard) javascript which communicate with the list API to create the view i am asking for... so can you advice what are the advantages and disadvantages of using JSLINK compared to using pure (standard) javascript which communicate with the list API??

    [Amit]: I proposed JSLink in respect to update out of the box view but if for you Custom view using JavaScript is easier then proceed with it.

    For more details on JSLink: https://social.technet.microsoft.com/wiki/contents/articles/37684.sharepoint-2013-jslink-client-side-rendering.aspx


    Thanks, Amit Kumar, LinkedIn Profile ** My Blog
    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    Wednesday, April 12, 2017 6:03 AM