Beautiful Interactive Navigation for SharePoint Online​

WHY THE NAVIGATION?​

Ease of use for your site visitors. No need for the clunky left navigation or extremely wide top navigation. As much as we love our sub sites and its child sites our own, they can get pretty long and nasty looking jumble…

  • SITE USERS:​
    Ease of navigation ( DUH!)​
    Interactive experience​
    Enhanced user experience, responsive design, visual guidance ​
  • SITE ADMINs:​
    Ease of maintenance​(They don’t have to wait around for those smart developers to come add their fancy scripts to include subsite that we created yesterday, you know… we shall be self sufficient, include an item in the dynamic list and be done with it!)
    Above all else, a fashionable landing page(if I say so myself, what? Only I say that? hmmm…whatever.gif..) that attracts users without losing proper functionality​
    Also, ummm…….Why the heck NOT? ​

 Basic Building blocks

  • Team/ Publishing Site (This solution uses JavaScript, Bootstrap libraries. We kinda need to insert CEWP/ScriptEditor)
  • List (We are gonna hook this up with the script to read and render the tiles – ahem..ahem…dynamic ahem..)
    Fields:

    • Title (Out of the box, suffices. Nothing fancy)
    • ImageURL (Single line of text)
    • RedirectURL(Single line of text)
    • Description(Single line of text)

Script &  (You can unleash your creativity here… ie., as acceptable by your team)mask.jpg

SITE PAGE

  • Go to the home page of your site where you want to insert this navigation widget
  • Why home? Well, you can go to ‘welcome’, ‘adios’,’ciao’,’namaste’ pages of your choice. I chose
  • ‘HOME’  > Edit Page > Insert Content Editor web part > Add the script file reference

POPULATE THE LIST
(them things need to have a collection of site navigational items to be displayed in the fancy tiles widget!)

Picture1.pngThose that noted the change in list experience, YES, its classic

  • You can switch back and forth between modern/classic
    WHY?
  • Cause you can. I couldn’t quick edit in the modern view, I attribute it to the gods of cloud being upset with my zeal to share a little much
  • There you go! You have the list with some pretty rows!

THE SCRIPT

This script file/reference needs to go into either a Content Editor Web Part or Script Editor web part.(BuildTiles.js)

THE STYLE

This is a lot of fun to mess with and unleasing your inner artist. (StyleTiles.css)

Now create a page in your SharePoint site and insert the web part with your script file.(BuildTiles.js)

Thats it kids! Here ya go, your custom attractive navigation tiles!
2018-07-13_20-29-27.png
No video no proof! Right? 😉
Here you have the demo of the list, and how the interactive navigation can be used in your SharePoint site.

Enjoy your fancy navigation for SharePoint Online-Office 365!

Keep learning and sharing…

lotus-beauty1.jpg

 

Importance of Landing Page – from meh to wow! #Office365 #sharepoint

Since time immemorial, we as a species have been attracted to beautiful things.We dress up, we like looking at and using pretty stuff. In fact we tend to use things more if we deem them easy to use. Your site/page/lists are no different.

Build it(pretty) and they’ll come! Build it so, you can manage it easily as well. You don’t want to be jumping around and get lost in the web of links and get frustrated by the sheer amount of (hyper!)links…Yikes!a

All that said, what am I really trying to say you ask? I am saying make your solutions and apps easy to use with nice user interfaces. They make a world of difference to the users and increase its usability.

I’ve already described one way to customize your page in “Simple custom branding for Office 365 SharePoint Online, your list views and landing page

Lets extend it further and make it a little more suave. Why? ’cause there could be 20 different views and you don’t want to use your multi column layouts to plug them all in with a list view limit of latest 5 records(actually that’s not a bad idea either…. :p ) anyhoooo…moving on and re-focusing;

Which would you prefer as your landing page:

Page 1: No too shabby, except for the tacky flower pic ofcourse :pp1.png

Page 2: Suave…as I see atleast.

2016-09-24_17h54_03.png

So what if you are artistically challenged and not sure what colors go where, or how to build a template? There are several for you to choose for free online or paid depending on your need and budget.

Find a bootstrap(read responsive) landing template that best fits your needs.

  • Create custom site pages to categorize/ filter your app views.
  • Add the custom views to its corresponding site page. You could style them as well following the article above using easy branding techniques with CSS and JavaScript.
  • Link all the hyperlink elements (anchor tags in this above screenshot) to the necessary pages with your filtered list views/ input forms/ dashboard pages
  • Use any required custom css libraries in your page, font-awesome icons for custom styles of the buttons and include other necessary elements within your HTML page to suite your business requirements. ( I removed the footer and few divs from mine to keep it simple and as launching pad of sorts)

Bringing it all together the way described above, gives a better experience for your end users and a solution that is really easy on user’s eyes and easier to manage.

Build it pretty and they will come and use it! 🙂

Check out the various simple free bootstrap options you can avail a  well here: https://startbootstrap.com/template-categories/landing-pages/

Happy being productive on the cloud!

What is the FiscalYear? Set it on form load #javascript #sharepoint

Requirement:

When a requestor submits a form, it should be preloaded with FiscalYear value in option control with other values/years to choose from. If its between July 1 – June 30 its the next fiscal year.

Solution:

Control used here is a drop down control with preset options (2017,2018,2019) that requestors can choose from on submit.

9-15-2016 9-41-11 AM.png9-15-2016 9-40-24 AM.png

If the current month is greater than July then, set the control selected value as next year. Script below is self explanatory and this function is called on form load.

ID of the dropdown control is stored as ‘varFY’ and we use it to set the value of the field by using control.val(value to set).

function getFiscalYearForCurrentDate() {
try {
var today = new Date();
//alert(“Current Date:” + today);
var curMonth = today.getMonth();
var fiscalY = NWF$(“#” + varFY);
//alert(“Current Month:” + curMonth);
var curYear = today.getFullYear();
//alert(curYear);
var setFY = “”;
if (curMonth > 6) {
//0-11 for Jan-Dec. July is 6. July is starting month of our fiscal year
setFY = (today.getFullYear() + 1).toString();//current year + 1
}
else { setFY = (today.getFullYear() + 2).toString() }
fiscalY.val(setFY);
}
catch (err) { alert(err); }
}

 

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

Behind/Warning and New requests – empty list view footer text: #Office365 #SharePoint Online quick tip

Requirement:

When we have a list web part view with zero items in it, we want custom text to appear.

Empty? What?

In a list view filtered web part, when there are no records to show, a friendly standard message appears in the footer. “There are no items to show in this view of the list”

To replace that with custom message of your(your teams obviously!) choice use this script below:

You can find the id of the webpart using inspect element of your browser developer tools.

$(document).ready(function(){
$(“#empty-WPQ2”).html(“No BEHIND requests in queue!”);
$(“#empty-WPQ3”).html(“No WARNING requests in queue!”);
$(“#empty-WPQ4”).html(“No NEW requests in queue!”);
});

Moral of the story(?!huh!?): DOM/script rules!

 

LaughingSquid with @StackSkills

One hour courses

How is everyone doing this weekend?

Aimless wandering in the web automagically landed me in a cool site called Laughing Squid.  I enrolled in Laughing Squid’s ‘freebie’ courses for the following web essential skills

    1. HTML
    2. CSS
    3. JavaScript
    4. jQuery
    5. HTML5
    6. GitHub

as well as

  1. iOS app development

Courses 1 through 6 are from Stack skills and are demoed using online editor called JS Bin.

This blog content is also written(errr…typed) and compiled with JS Bin! Cool eh!

Lessons are one hour each and to the point.

This list of one hour sessions are a great starter for beginners! Login and take advantage of it while you still can.

And, no, am not getting paid by Laughing Squid/ by StackSkills. Just found this useful and wanted to share with our community. I believe kids especially can get a kick out of these courses as they can see immediate results of their works in the Output window of JS Bin editor.

Here is the link to Laughing Squid store freebies: https://store.laughingsquid.com/free

And happy learning!

 

 

List GUID?! When in doubt, you DECODE!

As much as I love using my SharePoint(online, offline, on-premise, on-cloud and everything else in between) sites, its lists, libraries…Ahem., apps and creating slick looking reporting solutions for anyone who is bored(aka moi) and wants to analyze the rows and rows of information gathered, I sometimes find very frustrated that my List name doesn’t work in my scripts! Arrggg…

I know you exist in my site! I know I typed the name right! I even put %20 for space
I know you exist in my site! I know I typed the name right! I even put %20 for space

After spending half hour trying to decode-encode-decode space and special characters with whatever I could gather from my dimly active neurons, the idea dawns. Let me just get the entire URL and decode it ha! That will teach the list to behave. and it did! its really a medical miracle! Yes, yes, there are several other ways to get it. I know, but this is cool too and I did it now and so I share.

Drama aside: Check out this site: http://meyerweb.com/eric/tools/dencoder/

Open up your SharePoint list whose GUID you want to retrieve

Right click on new item and  select properties
Right click on new item and select properties

Copy the entire URL from the properties and plug that into dencoder site > Decode and Voila!

{98B0A0E6-8CEE-4D49-B2D5-712750BC926C} cool eh!

So, yeah… a section of my script with GUID in it.

$(document).ready(function(){
alert(“document ready”);
var count=1;
var statusArray=[]; var valuesarray=[]; var countByStatus=[];
$().SPServices({
operation:”GetListItems”,
async:false,
listName:”{98B0A0E6-8CEE-4D49-B2D5-712750BC926C}“,
CAMLViewFields:””,
CAMLQuery: “”,
completefunc:processData
});

What to do with that you ask? Check it out @SPS_Events  I say.

-Swetha