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.

 

Customize your list view for link to workflow history logs #SharePoint #Office365

So, faced with a situation where you had to create a list with workflow? Yes?

Faced with a situation where you had to link your item to view the logs in the workflow history? Yes? Read on…

Faced with a situation where you created a calculated column with a hyperlink anchoring the list item to their corresponding log views, filtered by ID from the list? Yes? …wow…

wow.gif

we have a lot it common! Tenemos que encontrarle solución a esta crisis lo antes posible.

Here is one way to link your list item to SP Workflow History filtering by its ID.

For this post lets create a beautiful(??!!!) list like so,

2018-07-21_21-59-41.png

Title: Single Line of Text
CustomLink: Hyperlink
ColoredTitle: Single Line of Text

Add the below script to your page. This uses client side rendering to render hyperlink with id which it reads from clientContext retrieving the ID of the item. Pretty self explanatory.

(function () {
var requestCtx = {};
requestCtx.Templates = {};
requestCtx.Templates.Fields = {
‘CustomLink’: {‘View’: linkFieldTemplate},
‘ColoredTitle’:{‘View’: titleFieldTemplate}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(requestCtx);
})();
function linkFieldTemplate(ctx) {
var id = ctx.CurrentItem[“ID”];
}
function titleFieldTemplate(ctx){
//var name = ctx.CurrentItem[“FileLeafRef”];
var title=ctx.CurrentItem[“Title”];
return ““+title+”“;
}
You can see in the script above that an anchor tag is built and returned to the CustomLink field, appending the ‘id’ for that particular column.
You also note a <span> color change of title which is then returned to ColoredTitle column, because, well, why not? :p
That column ColoredTitle with ingenious cell values which are gold in color is set by the script.
Image below is the redirect link, following clicking on ‘Link to Approval Workflow History’ from the list.
2018-07-21_22-06-03
Where does this come handy other than the fancy good, bad, ugly and indifferent stuff here?
Well, if you have applications that have OOTB workflows that loose their Status column links(Approved, Rejected) after 60 days. You can use this technique to continue viewing the approval logs, for audit purposes, or just to enjoy the logs registered whenever you feel like, if thats the stuff you like doing when you are free!
Enjoy!

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

 

No script editor installed? Want to style your page? No Problem!

As the old adage goes “Where there is will there is way!”, “Necessity is the mother of invention.”, or as the Tamil saying goes, வல்லவனுக்கு புல்லும் ஆயுதம். “If you have the ability and talent, you can achieve success with whatever (minimal) resources available at your disposal.” (for more on this check here)

As long as I have a notepad, I can create scripts, HTMLs, jQueries and magical flip/ bling CSS effects on any page. Mostly on Office 365 SharePoint Online pages hehe! But, this is not about the wonders of all that you can do with Notepad.

This is about what other options you have at your disposal, that would allow you to build stunning appealing Site Pages in a matter of hours with a list of useful online resources that I use and like. So, here goes:

Number 1:

LayoutIt.png

Top of the list is LayoutIT: http://www.layoutit.com/ this is a bootstrap front end code builder. You can spin up a responsive grid system page with rows and columns effortlessly. All you have to do is drag and drop your number of containers/rows and how many columns you want in it? 6/6 or 4/4/4 or one row? Its all visual and it can’t get any easier than that.

Once you are satisfied with your mockup skeletal design, you can download the code and customize it to your sites/client requirements.

Example: http://www.layoutit.com/build

Here you can see nested Containers and Rows with Column and Navigation elements. You can remove and add additional divs, CSS and Scripts as well and download the file. (You can sign up, but you can get the code forgoing the option as well..pretty cool in my opinion)

Note: Make sure to include your cdn in the file you downloaded (duh!) Even better, get the latest minified(or not) bootstrap libraries into your Site Assets/ Scripts reference them instead.

Number 2:

http://dabblet.com/ This site is super cool as I like how it has multiple visualization options for your scripts and custom classes. Ya don’t have to wait at all! I’m an impatient person and I was to see the result right away and it works great for me 😉

What you see below is the “Result” of the rendered bootstrap script I quickly drafted from LayoutIT above. So far so good and pretty cool eh?

dabbletResultRender.png

Number 3:

http://plnkr.co/

You want to learn angular/ bootstrap/ jQuery. Want to curiously browse other folks attempts at learning the same and get inspired by their solutions? Want to share your solutions with the community?

Want to style your code? Want to check the syntax? Get the references to latest CDNs and include them automagically? You get the idea…. get to Plnkr!

If you have a GitHub account, you can use it to join login with the same on Plnkr as well. Its all awesome. Save your plunks and show off your work!

Plnkr.png

Ofcourse there is also W3schools editors you can try

https://www.w3schools.com/html/default.asp

With these tools under your belt, you can tackle some of the day to day design challenges if your environment doesn’t have development tools yet and you still wish to be productive and contribute to the team, progressing towards your assigned task completion – these can come in very handy.

These are a few of my go-to tools and I wanted to share them with ya! Now, after all that mentions, if I don’t show something colorful, I’ll feel I didn’t give you any take-aways for the time you spent reading this. 🙂

So here ya go: My last post talked about getting SharePoint Site Usage reports in Office 365 SharePoint Online page and how you can get a cool looking dashboard with Excel Web Access web part.

If you would like to include Document Library analytics into the page as well with some prettied up links to Most viewed/popular documeents in the site’s libraries then

  • Try using LayoutIt for getting your desired bootstrap grid that appeals you
  • Take it to dabblet/plnkr and include the cdns for bootstrap for responsiveness and styles
  • Get the URLs for links you wish to display in your SharePoint Online site page., it could be your Most Popular Library items from the library ribbon icon, your top documents/ contributors. Your web site/blog address etc., and then include that in your script’s anchor tag with button style.
  • I used a library called font-awesome to derive icons from there for using in my images. They have a wide collection of icons CSS styles to choose from and I like to use them in all my projects.
  • So here goes: http://dabblet.com/user/SwethaSan 
    Below is the script with all external reference links to fontawesome as well as bootstrap cdns for responsiveness.

    <!DOCTYPE html>
    <html>
    <head>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
    
    <body>  
    <h1>Namaskar, Vanakkam, Welcommen, Bonjour, Hola!!!!!</h1>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
    <style type="text/css">    
    i {      color: white;    }        
    #t1 {      border: none;      border-spacing: 10px!important;    }       
    #t1 td,#t1 th {      padding-top: 25px;      padding-right: 70px;      padding-bottom: 25px;      padding-left: 70px;      
    border-radius: 7px;      border-collapse: separate;      background-color: white;    }        
    td:hover {      opacity: 1;      outline: none;      border-color: #9ecaed;      box-shadow: 0 0 10px #616466;    }        
    #content {      height: auto;      float: left;    }      
    </style>  
    <div id="container">    
    <div id="content">      
    <table id="t1">        
    <tbody>          
    <tr>            
    <td style="background-color:#ff7b5d"><a href="https://www.google.com" style="text-decoration:none;color:white;"><i class="fa fa-group fa-3x "></i><br/><br/>Google</a></td>            
    <td style="background-color:#c6acff"><a href="https://www.swethasankaran.com" style="text-decoration:none;color:white;"><i class="fa fa-check-square-o fa-3x"></i><p>Swetha Sankaran</p></a></td>            
    <td style="background-color:#72b1ff"><a href="https://www.microsoft.com" style="text-decoration:none;color:white;"><i class="fa fa-area-chart fa-3x"></i><p>Microsoft</p></a></td>          
    </tr>          
    <tr>            
    <td style="background-color:#9b2e73"><a href="https://www.youtube.com" style="text-decoration:none;color:white;"><i class="fa fa-adjust fa-3x "></i><p>YouTube</p></a></td>            
    <td style="background-color:#5bad4e"><a href="https://www.meetup.com/fedspug-wspdc" style="text-decoration:none;color:white;"><i class="fa fa-pie-chart fa-3x"></i><p>Women In SharePoint DC, FEDSPUG</p></a></td>            
    <td style="background-color:#e23155"><a href="https://www.linkedin.com/in/link2swe" style="text-decoration:none;color:white;"><i class="fa fa-newspaper-o fa-3x"></i><p>Link2Swe</p></a></td>          
    </tr>          
    <tbody>      
    </table>    
    </div>  
    </div> 
     <!-- content to be placed inside <body>…</body> --></body></html><!-- content to be placed inside <body>…</body> -->

Here is the video/script on display at dabblet in its full swing!

This is just a kick starter for all the possible things you can do with designing and making your Office 365 site functional until you get your tools deployed and available to use.

These are some of my go to options. Please feel free to comment/share other tools you use that makes your lives easier to provide efficient solutions that meets clients needs and satifies their requirements and we can learn together.

Sharing is most definitely caring and the more we share we grow stronger together! 🙂

With that wise thought of the day, signing off from www, is Swetha! Have a beautiful Thursday folks, may it bring you all sorts of happiness and productive solutions your way.

Peace.

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