SharePointBlue - Yet Another SharePoint Blog: 2015

Friday, December 4, 2015

SharePoint - Responsive Design (Framework)

You can go to my previous post where I have explained how to implement responsive design in a SharePoint site using Bootstrap from scratch. Now we you will quickly figure out that implementing responsive design from scratch will take a lot of time, effort and learning. So in order to save time we will use a pre-built framework developed by a team of awesome people.

Perform following steps for SharePoint Online sites:

Download the WSP.
Follow page 17-22 of the documentation.
And the site will look like this:

Desktop

Mobile
Now after the site has been made responsive and works all great. You can download the Master Page foundation-4.3.2-server.master and customize according to your own branding. See pages 23-25 of the documentation.

Tuesday, December 1, 2015

SharePoint - Responsive Design (Bootstrap)

SharePoint Online pages are after all rendered as HTML/CSS and Java Script. In this post I will show how to create a responsive design for SharePoint Online pages using Bootstrap so that they look elegant on different screen sizes (Desktop, tablet, phone) .

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. You can start learning about bootstrap here.

HTML Framework:
Following is the HTML framework that a HTML page should match in order to be responsive to multiple screen sizes.

<html lang="en">
  <head>
    <title>Bootstrap 101</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
  </head>
  <body>
    
    <div class="container">
        <div class="row">
            <div class="col-sm-6" style="border:1px red solid">Hello</div>
            <div class="col-sm-6" style="border:1px green solid">World</div>
        </div>
    </div>
    
  </body>
</html>

This code will create 2 responsive divs inside a main container div. Container div will render the content inside the two divs as following on Desktop and the Mobile devices with the help of Bootstrap libraries:


Desktop	Mobile

Responsive SharePoint Page:
Now lets incorporate this framework in to a SharePoint Site.

Add following lines in the head tag of Master Page:
Add the container div in the page inside the PlaceHolderMain tag so that all the HTML of the page resides inside the container div:
Add the row div and then add the column divs to hold the actual web parts:
Now the web parts on the page will be managed by container div and page will look like this on different screens:

Desktop

Mobile

Thursday, August 27, 2015

SharePoint 2016(Preview) New Features

Microsoft has released the new and improved features in SharePoint Server 2016 IT Preview. Check out the following link:

https://technet.microsoft.com/en-us/library/mt346121(v=office.16).aspx

Tuesday, August 25, 2015

SharePoint 2016 Preview

SharePoint 2016 Preview is available to download now.

Breaking: #SharePoint Server 2016 IT Preview and cloud hybrid search is here! Download now -> http://t.co/JCPzHQP3K9 pic.twitter.com/GDat7bv5rJ
— Microsoft SharePoint (@SharePoint) August 24, 2015

Monday, August 10, 2015

SharePoint 2013 - Content Type Hub

Content Type Hub is part of Managed Meta Data Service and was introduced into SharePoint to share the Content Types across the site collections and web applications. It was introduced in SharePoint 2010 and now its available in SharePoint 2013 and Office365.

I found this beautiful article to explain how to configure a Content Type Hub to share Content Type across other site collections and web applications:

http://sharepoint-community.net/profiles/blogs/understanding-content-type-hub-cth-in-sharepoint-2013

Note: Its already configured for you in Office365 under http://MyOffice365/sites/contentTypeHub.

Wednesday, March 18, 2015

SharePoint 2013 People Search REST Call

You can find the whole API reference for Search REST API here. But when you have to do People Search then you need to put the context around your search Query and it will look like as follows:

Normal Search REST Call:
http://www.sharepointblue.com/SearchCenter/_api/search/query?querytext='*'

People Search REST Call:
http://www.sharepointblue.com/SearchCenter/_api/search/query?querytext='*'&sourceid='b09a7990-05ea-4af9-81ef-edfab16c4e31'

Note: Before firing the People Search request, make sure User Profiles are crawlled inside the SharePoint by crawling: sps3://My_Site_host_URL

Ref: https://msdn.microsoft.com/en-us/library/office/jj163876.aspx

Monday, March 16, 2015

Predictive Analytics with AzureML

I started exploring AzureML(Azure Machine Learning) few weeks back and quickly fell in love with its simplicity and robustness.

I grabbed the sample data of Down Jones Index from UC Irvine Machine Learning Repository and applied the Linear Regression algorithm to create a prediction model to estimate the future values of Microsoft stock's opening weekly price (so that I can be rich) and here how my model looks like in AzureML.

First I am removing the entire rows with missing values from the data. Then I am applying the filter for MSFT symbol in the first split and I am dividing the data to 80-20 ratio to train the actual model on 80% of the data with the help of Linear Regression algorithm. After that I am trying to predict price variable in Train Model and verifying it using 20% of remaining data. In the last, I am evaluating the model that how effective and reliable it is.

At this point I need to seriously improve my model using other algorithms, removing/adding new variables etc because the Coefficient of Determination is nowhere closer to 1 and Mean Absolute Error, Root Mean Squared Error, Relative Absolute Error & Relative Squared Error are very high. But that's how a prediction model (more or less) will eventually look like in AzureML. It can be published as a web service with few clicks.

I have published this experiment/source to AzureML gallery and can be accessed here:

https://gallery.azureml.net/Details/3f4d92649bfa4fa3bf4b0c93a3635227

My next step would be to grab data from SharePoint lists and apply some prediction algos on it.

Wednesday, February 18, 2015

PowerShell - Download Images from Web

I had a requirement where I have to export user profile images from MySite 2013 and I end up writing following PowerShell script:

[Reflection.Assembly]::LoadFile( `
'C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\System.Web.dll')`
  | out-null 

$FileName = "C:\Temp\ImagesURL.txt";
$Loc = "C:\Temp\Images\"
$ImageName = ""

$wc = New-Object System.Net.WebClient

$content = Get-Content $FileName
foreach ($line in $content)
{
    $Image = $Loc + $line.Substring($line.LastIndexOf("/") + 1)
    $url = $line
    
    Write-Host $url
    Write-Host $Image
    
    $wc.DownloadFile($url, $Image)
    
}

write-host "Finished successfully."

Friday, February 13, 2015

HTTP Request with Javascript

<script type="text/javascript">

var oReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");

function handler()
{
    if (oReq.readyState == 4 /* complete */) {
        if (oReq.status == 200) {
            document.getElementById("myDiv").innerText = oReq.responseText;
        }
    }
}

function SendRequest()
{
    var vURL = "http://IdolApp:12345/data/data.xml";

    if (oReq != null) {
        oReq.open("GET", vURL, true);
        oReq.onreadystatechange = handler;
        oReq.send();
    }
    else {
        window.console.log("AJAX (XMLHTTP) not supported.");
    }
}

</script>

<input type="button" id="btnSubmit" value="Go" onclick="SendRequest()"/>
<br/>
<div id="myDiv" >:o)</div>

Ref: https://msdn.microsoft.com/en-us/library/ie/ms535874(v=vs.85).aspx

Note:
Initialize the oReq with following to make it IE and Chrome compatible:

var oReq;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 oReq=new XMLHttpRequest();
}
else
{// code for IE6, IE5
 oReq=new ActiveXObject("Microsoft.XMLHTTP");
}

Monday, January 19, 2015

Using Charts.js with ASP.NET

Following is an example of using Charts.js library to display nice graphs & charts after providing the data via C#/ASP.NET:

Download and unzip the Charts.js javascript library and add the entire folder into the ASP.NET project in the Visual Studio.

Add the refrence in head of ASP.NET:

<script src="Scripts/Chart.js-master/Chart.js"></script>

Add the following javascript in ASP.NET file with .NET variables (ChartLables, ChartData1 & ChartData2) that will be populated via C#:

<script>
        var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
        var lineChartData = {
            //labels: ["January", "February", "March", "April", "May", "June", "July"],
            labels: <% =this.ChartLabels %>,
            datasets: [
                {
                    label: "Query Count",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    //data: [0, 1, 4, 6, 10, 8, 6]
                    data: <% =this.ChartData1 %>
                },
                {
                    label: "My Second dataset",
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    //data: [28, 48, 40, 19, 86, 27, 90]
                    data: <% =this.ChartData2 %>
                }
            ]
        }
        function DrawChart() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData, {
                responsive: true
            });
        }
    </script>

Add the following HTML snippet to ASP.NET page where the chart will actually be displayed:

<div style="width: 100%">
  <div>
    <canvas id="canvas" height="250" width="400"></canvas>
  </div>
</div>

On the C# file (.NET code behind), simply populate the data into the three C# variables and call the javascript function DrawChart(); on some ASP.NET button click:

public string ChartLabels = null;
public string ChartData1 = null;
public string ChartData2 = null;

this.ChartLabels = "['January', 'February', 'March', 'April', 'May', 'June', 'July']";
this.ChartData1 = "[65, 59, 80, 81, 56, 55, 40]";
this.ChartData2 = "[28, 48, 40, 19, 86, 27, 90]";

//Call the Javascript function from C#
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "DrawChart()", true);

SharePoint 2007 - Hiding the Navigation

Scenario:
I had a small requirement to hide left and top navigation from a SharePoint 2007 Publishing Site on just one page (not the whole site).

Solution:
Two line javascrpit :o) in a hidden Content Editor Web Part, after identifying the IDs of the HTML elements which render the navigation.

<script type="text/javascript">

document.getElementById('onetIdTopNavBarContainer').style.display = 'none';
document.getElementById('LeftNavigationAreaCell').style.display = 'none';

</script>

Top Menu