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]-59-9-2016 10-06-48 AM.png
  • Warning view: Date field in the list filtered to show [Today]-39-9-2016 10-07-25 AM.png
  • On-Track view: Filtered to show any requests that are less than 3 days old.9-9-2016 10-06-17 AM.png

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.EditPageView.png

End result: Page with the text, color and right branding in place.

9-9-2016-10-20-56-am

Trust this helps!

Swetha

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s