Creating a custom view using JavaScript+Code Snippet Versus using JSLINK

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 fiance if the number of 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...
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.
3. Description. This field describe the latest number entered for each dept item.

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 thin 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 ?

Answer 1

1. to write a java-script which integrate with the list using REST API.

Not if you write CSR javascript code code to change a ListView that gives you all the data without you having to do anything. You only have one List with 15 Items

2. where i can retrieve the related data for each department and color it accordingly.

Your description is missing where you want to store the KPI treshold value. Looks to me it is just another Field in the List

3. then inside my site home page >> i can add a code snippet web part >>reference the javascrpt.

Not if you use a ListView WebPart and set the JSLink to your CSR javascript file

Before diving in at the deep end; install the Cisar Chrome Extension and learn to develop CSR code, only then can you become un-confused

There is no JavaScript versus JSLink as your title says

CSR is the JavaScript file that rewrites your View/Form output

JSLink is the technology that connects a ListView/Form webpart to your CSR file

They can be (and are usually) used together, but don't have to

https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

Re:comments

John, you have to decide for yourself what is better. Skilllevel is not the only parameter

I did this with the Cisar editor in 14 minutes, including creating a Custom List:

function indicator(ctx,Schema,CurrentItem){ var value = CurrentItem[Schema.Name]; var kpi=CurrentItem.KPI; var color='lightgreen'; if(value===kpi) color='orange'; if(value>kpi) color='lightcoral'; return "<div style=text-align:center;background:"+color+">"+value+"</div>"; }