Submit a new idea! Ideas for #Office365 #SharePoint custom feedback using lists,CSS & scripts

Its a beautiful day outside. Drizzles with a sweet sweet rainbow. Looking out longingly I got an idea,

How about we work on a fun form exercise?! It’ll be pretty, it’ll be functional and it’ll be in #Office365 with simple controls and script. Sounds fun no?

I thought it was. I was also inspired by Netflix, Starbucks and all things good and great in this world including but not limited to W3CSS, Bootstrap, JS and oh wait! SHAREPOINT and FORMS!!!

Since the code part is pretty self explanatory, am not gonna delve(see what I did there wink wink) deep in it. Still, to recreate this pretty form, you need to
  •  Create a list (SubmitYourIdea in this sample and yep am pretty creative)
    • Structure of the list is pretty straightforward, a few custom columns depending on what you want to gather from contributors:
      liststruct.png

       

  • Create a script file in your Site Assets (or anywhere else you please) call it PutYourThoughts.js (cause… why not?) You are welcome to copy the script and edit to suite your taste. I just chose something fun to do as a proof of concept and share it with my interweb peeps.
  • Create a site page and include the script file reference in a Content Editor Web Part/Script Editor web part. Save and page and here you go, a  completely responsive form for your folks to submit ideas on new projects/categories/just badmouth how awful the current project sucks. Freedom of speech rules!ideaform.png

Where is the Netflix and Starbucks connection you ask? Well, the form theme is inspired from them. So thanks folks!

What are the other uses/ possible derivatives using this idea?

  1. You can collect feedbacks(on your sites, projects, etc.,)
  2. Use this as a way to gather ideas from your team/staff
  3. Connect this with a #flow and extend its usage more! 🙂

Enjoy your new incoming ideas! Keep learning and sharing. Almost forgot, here is the solution in action with a not so subtle hint of enhancement to the code.

 

Page status bar – revert to template message

In your SharePoint online page with webparts (custom views and scripts) when you restore a previous version of the page, the message “The current page has been customized from its template. Revert to template” is displayed at the top of the page.

2016-10-05_14h39_05.png

Yes, I know it is customized from the template. And yes, I am the culprit and it was intentional for I wanted a previous version restored!

Click Revert to template(providing its just restoring that caused it, you are promptly warned about the same)2016-10-05_14h47_05.png

If you are unsure, then make sure you copy all your custom scripts from the page. Revert the template and you can add them again.(I didn’t have to…but ya know, that makes the best sense!)

Don’t want to go through that? Need to fix it pronto before a demo and just have 4mins and 20 seconds-yes, I timed it, including a restroom break too in between(?!?) Just hide that div using ScriptEditor webpart or including it in one of your existing scripts!

$pageStatusBar{

display:none !important;

}

2016-10-05_14h43_00.png

Simple custom #branding for #Office365 #SharePoint online – your list views and landing page

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