@Office365 All day workshop session form – #WSPDC #FEDSPUG

Please fill out the form with information regarding your September 15th session.

Here’s the link to the form “Office 365/ WSPDC-FEDSPUG Workshop”:
https://forms.office.com/Pages/ResponsePage.aspx?id=s-9nLu0cLUWaTCcBE_yjdVAWhSsb_V5AmaMkdX07jB5UNlNIR1E1SUVMTE5aV0REVTRESjhNU0k0VS4u

Thanks a tonne for your participation and contribution.

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.

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); }
}

 

WYSIWYG Business Cards App in SharePoint Online using @Nintex Forms and Workflow for @Office365 apps

Title: WYSIWYG Business Cards App in SharePoint Online using Nintex Forms and Workflow for Office 365 apps

Details:

A solution showcase session. ‘What you see is what you get’ in this business cards app for Office 365 SharePoint Online using Nintex forms and workflow apps for Office 365.

Business Case: 

Your customer has a business need where they want to preview their cards order as it would appear in print before they submit their request.

They want to preload user information when they log in to the system. When they submit their request, the manager who handles the processing should get ALL details of user submitting request with a means to view the requests in site.Anyone in the organization can submit request for cards and the manager should have access to everything in the system.

Learning Objectives:
In this session, attendees will learn how to create apps in Office 365 SharePoint online with preview panel of their data containing logged in user profile information as well as customize/ brand their forms.

Focus Areas:
#SharePoint, #Office365 and the Cloud and #Nintex apps for Office 365

Skill Level:
Introductory / Intermediate

Speaker Bio:

 

Swetha Sankaran is an Office 365 SharePoint online expert working with SharePoint and Microsoft BI stack since 2008. Currently focusing on Office 365 user adoption, apps, forms and workflows processes to automate several business processes from manual/ paper based forms.

She is a Microsoft Certified Specialist(SharePoint and Business Intelligence), Nintex Certified Forms and Workflow Professional, Computer Engineer, President – Women in SharePoint DC,ProductivityEDU and Co-Chair #FEDSPUG

Twitter: @SwethaSan
LinkedIn: Link2Swe
Blog: www.swethasankaran.com

Click here to RSVP

Hide site settings contents in #Office365 #SharePoint

There are times when you want to empower your end users and enable them to do it all and there are times, when want to simplify work for your end-users and unclutter their views.

Once such time is when you want to hide site settings contents from your SharePoint site. Be it online or on premise, it easy for your users to just login to the site, do their task and out, without looking at all the wondrous options and SP offerings. 🙂

Every site owner goes through this at some point. Every site owner also bings(or google or yahoo or  it at some point and I did too.

While there are umpteen number of ways to accomplish this via script/css or xslt update. My favorite option by far is changing the PermissionsStrings for items based on user roles.

Oslo template: Change the PermissionString below for site contents from ViewFormPages to ManageWeb.

Text=”<%$Resources:wss,quiklnch_allcontent_15%>”
Description=”<%$Resources:wss,siteactions_allcontentdescription%>”
ImageUrl=”/_layouts/15/images/allcontent32.png?rev=43″
MenuGroupId=”200″
Sequence=”240″
UseShortId=”true”
ClientOnClickNavigateUrl=”~siteLayouts/viewlsts.aspx”
PermissionsString=”ViewFormPages
PermissionMode=”Any” />
Text=”<%$Resources:wss,quiklnch_allcontent_15%>”
Description=”<%$Resources:wss,siteactions_allcontentdescription%>”
ImageUrl=”/_layouts/15/images/allcontent32.png?rev=43″
MenuGroupId=”200″
Sequence=”240″
UseShortId=”true”
ClientOnClickNavigateUrl=”~siteLayouts/viewlsts.aspx”
PermissionsString=”ManageWeb
PermissionMode=”Any” />

o365Test

@Nintex Workflow Professional Certificate

Today I took an exam and added Nintex Workflow Professional Certificate to my list of official certifications. Target audience for the certification are experienced forms and workflow creators. Questions covered designing, creating and debuggins Nintex workflows and forms concepts. #Excited to have taken the test as it was the high point of my day!

Nintex tells me I am skilled at creating Workflows and Forms! WOOT!!

NintexWorkflowProCertificate.PNG

PowerShell for for #Office365 #SharePoint Online Administration

First things first, we need to be SharePoint Online Administrators to be able to manage the site collections in our Office 365 tenant using both SharePoint Online Admin Center as well as SharePoint Online Management Shell.

This blog is about the ABCs of connecting to SharePoint Online Management Shell so you can start administering your sites without having to go through GUI. Personally, I like this quite a bit and pretty excitedly PowerShelling(It really doesn’t take much to get me excited, but thats beside the point…so, powerhsell)

To connect to your SharePoint online service using SharePoint Online management shell follow the steps

Start > SharePoint Online Management Shell (PS C:\Windows\system32>)
Connect-SPOService https://wspdc-admin.sharepoint.com

Script to create new site collection:
New-SPOSite -Url https://wspdc.sharepoint.com/sites/PowerShell
-Owner swetha@wspdc.onmicrosoft.com
-StorageQuota 500 (quota for all the sites in this collection)
-CompatibilityLevel 15 (SharePoint 2013)
-LocaleID 1033
-ResourceQuota 100
-Template “STS#0” (team site template)
-TimeZoneId 13 (pacific timezone code)
-Title “Shell Site”

This creates a new team site collection with title “Shell Site” with all the default settings in it.

Get-SPOSite https://wspdc.sharepoint.com/sites/PowerShell you can see that your new site collection is ready with the requested owner and storage quota

ps1

Get-SPOSite https://wspdc.sharepoint.com/sites/PowerShell | fl shows the properties formatted as list as seen below

ps2