Requirement:
Application requires a landing page with custom reports/views for all the requests in queue.
- Behind requests – Colored red and should have default number of days set to 5
- Warning requests – Colored yellow and should have default number of days set to 3
- On-Track requests – Colored green and are any active requests that are neither behind/warning.
- Default empty list message to be changed depending on the view
Solution:
CSS for displaying the view webparts in identified colors is included in Script Editor web parts and so are the script to customize default message of empty list view.
Edit the page you want to display the web parts in.
Include the App Parts for list setting it to pre created views
- Behind view: Date field in the list filtered to show [Today]-5
- Warning view: Date field in the list filtered to show [Today]-3
- On-Track view: Filtered to show any requests that are less than 3 days old.
STYLE: CSS to get the color coded view is below. Getting the ID’s of web part using F12 and Inspect Element and applying background, border color with shadow gives us the desired result.
Gotcha: When you set border-color to something, make sure you give the width of the border, else it will not show in display but will work in Edit view of the page. Causing quite a bit of confusion.
<style type=”text/css”>
div[id*=”MSOZoneCell_WebPartWP”]
/*All zones background and border*/
{
padding: 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 8px;
border-radius: 12px;
border-collapse: separate;
}
.ms-listlink{
cursor:pointer;
}
.contentwrapper{margin-left: 0px;}
#MSOZoneCell_WebPartWPQ5{
/*New*/
display: table;
background: #DBDBFF;
}
#MSOZoneCell_WebPartWPQ2{
/*red*/
display: table;
background: #EEB4B4;
border:1px solid #660000;
-moz-box-shadow: 0px 0px 10px 0px #802A2A;
-webkit-box-shadow: 0px 0px 10px 0px #802A2A;
box-shadow: 0px 0px 10px 0px #802A2A;
}
#MSOZoneCell_WebPartWPQ3{
/*yellow*/
display: table;
background: #FEF1B5;
border:1px solid#EEC900;
-moz-box-shadow: 0px 0px 10px 0px #CDAB2D;
-webkit-box-shadow: 0px 0px 10px 0px #CDAB2D;
box-shadow: 0px 0px 10px 0px #CDAB2D;
}
#MSOZoneCell_WebPartWPQ4{
/*green*/
display: table;
background:#D4ED91;
border:1px solid #668014;
-moz-box-shadow: 0px 0px 10px 0px #79973F;
-webkit-box-shadow: 0px 0px 10px 0px #79973F;
box-shadow: 0px 0px 10px 0px #79973F;
}
</style>
Script Editor with JavaScript to reset the default empty message, to a custom text identified. Tested and works on all browsers at this time.
https://xyz.sharepoint.com/SiteAssets/scripts/jquery-1.10.2.min.js
$(document).ready(function(){
alert(“hello”);
$(“#empty-WPQ2”).html(“No BEHIND requests in queue!”);
$(“#empty-WPQ3”).html(“No WARNING requests in queue!”);
$(“#empty-WPQ4”).html(“No NEW requests in queue!”);
});
Edit Page result with CSS, Script – Script Editor web parts in place prior to saving.
End result: Page with the text, color and right branding in place.
Trust this helps!
Swetha
