AngularJS with SharePoint Online

A - OBJECTIVE: 

To retrieve items from SharePoint List or Library using AngularJS

B - REQUIREMENT:

Some expected use cases as follows:

1. A fully customised page is expected with its own layout (i.e. no SharePoint default list view).
2. Cross-site collection data aggregation: SharePoint default list view webpart only allows you to extract data from the same site collection, and the client expects you to show data across multiple site collections. AngularJS is one of the best options for you.

C - SOLUTION:

By adopting the AngularJS framework, together with SPServices, you can design your code as follows:

1. Create an AngularJS app in a SharePoint page
2. Create a SPServices function to get all data & pass it to AngularJS view
3. Iterate all items in a list or library using ng-repeat within a particular scope (defined by ng-controller). You can create your own custom filter to display data.

D - SOURCE CODE:

At SharePoint Page: View in MVC

    <p> KEY MESSAGES </p>
    
    <table ng-controller="ControllerKeyMessages"  class="ng-scope">
        <tr><th>ID</th>
        <th>TITLE</th>
        <th>FEO CONTENT OWNER</th>
        <th>PUBLISHED</th>
        <th>SECTION</th>
        <th>PUBLISH DATE</th>
        <th>CREATED</th></tr>
        
        <tr ng-repeat="item in items">
        <td align = "center" ng-cloak>{{item.ID}}</td>
        <td class="digestLeft" ng-cloak>{{item.Title}}</td>
        <td align = "center" ng-cloak>{{item | myTaxonomy}}</td>
        <td align = "center" ng-cloak>{{item.Published}}</td>
        <td align = "center" ng-cloak>Key Messages</td>
        <td align = "center" ng-cloak>{{item.Publish_x0020_Date | date:'d MMM y'}}</td>
        <td align = "center" ng-cloak>{{item.Created | date:'d MMM y'}}</td>
        </tr>        
    </table>

At SPServices: Model in MVC

function funcNgGetListItems($scope, $http, webURL, listName, extraColumns){
 $http({
  method: 'GET',
  url: webURL + "/_api/web/lists/GetByTitle('"+listName+"')/Items?$filter=Created gt '2016-01-01T00:00:00.1374695Z'&$top=30&$select=ID,Title,Created,Modified,EncodedAbsUrl" + extraColumns +"&$orderby= Created desc",
  headers: { "Accept": "application/json;odata=verbose" }
 }).success(function(data, status, headers, config){  
  $scope.items = data.d.results;
 }).error(function(data, status, headers, config){
  alert("Error: " + JSON.stringify(data))
 });
}

At AngularJS script: Controller in MVC

var appVar = angular.module('myDigestList', []);

appVar.controller("ControllerKeyMessages", function($scope, $http){
    GetListItems($scope, $http, "https://anthonynhn.sharepoint.com/corpinfo/KM", "Posts", ",FEO_x0020_Content_x0020_Owner,Published,Publish_x0020_Date,Thumbnail1,Publication_x0020_Description");
});

SharePoint Online - Create Libraries automatically

A - OBJECTIVE: 

During data migration to move files from local drives to SharePoint Online, you may need to create a big number of libraries to anticipate the list (soft) threshold of 5,000 items.

B - PROBLEMS :

Creating libraries manually is tedious & a script to automate the process will be shared to ease your work.

C - SOLUTION:

Powershell script can be used at your own PC to create libraries automatically at any SharePoint Online site.

D - SOURCE CODE or BENCHMARK:

Pre-requisites:

• SharePoint DLLs saved at your PC & loaded to the script session.

• Source File which predefines all libraries in each row in the format of "Internal Name, External or Display Library Name".
• SharePoint Online Management Shell must be installed at your PC.

What you need to do is:

1. Load the neccessary components

# Load DLLs
Add-Type -Path "D:\SharePoint\PowerShell\SPO-DLL\Microsoft.SharePoint.Client.dll"
Add-Type -Path "D:\SharePoint\PowerShell\SPO-DLL\Microsoft.SharePoint.Client.Runtime.dll"
Add-Type -Path "D:\SharePoint\PowerShell\SPO-DLL\Microsoft.SharePoint.Client.UserProfiles.dll"
 
# Source File to be synced from SharePoint On-Prem to Online
$sourcefile = "D:\Projects\Libraries.txt"

2. Load your SharePoint tenant

#variables that needs to be set before starting the script
$siteURL = "https://anthonynhn.sharepoint.com/sites/fat/cs"
$adminUrl = "https://anthonynhn-admin.sharepoint.com"
$userName = "admin@anthonynhn.onmicrosoft.com"
# Let the user fill in their password in the PowerShell window
$password = Read-Host "Please enter the password for $($userName)" -AsSecureString

3. Initialize the creation task

# set SharePoint Online credentials
$SPOCredentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($userName, $password)  

# Creating client context object
$contextLocal = New-Object Microsoft.SharePoint.Client.ClientContext($siteURL)
$contextLocal.credentials = $SPOCredentials
$contextLocal.ExecuteQuery() 

$listTemplate = 101 #doclib

Foreach ($line in [System.IO.File]::ReadLines($sourcefile)) {
    $lib = New-Object Microsoft.SharePoint.Client.ListCreationInformation
 $libInput = $line -split ',';
 
 # set the Internal Name
    $lib.Url = $libInput[0]
 
 # set the Lib Title
 $lib.title = $libInput[1]
 
    $lib.TemplateType = $listTemplate
    $list = $contextLocal.web.lists.add($lib)
    $contextLocal.load($list)
    #send the request containing all operations to the server
    try{
        $contextLocal.executeQuery()
        write-host "info: Created $($listTitle)" -foregroundcolor green
    }
    catch{
        write-host "info: $($_.Exception.Message)" -foregroundcolor red
    }  
}

Office 365 - Project Online with Custom Dashboard

A - OBJECTIVE: 

At Project Online, we can customize a dashboard to show:
1. Whether a task is billable
2. Cost estimation for each members in the last 7 days.



B - REQUIREMENT:

The end result should be developed like this dashboard:



C - SOLUTION:

For each project at Project Online, a custom field is added in to track whether the task is billable. In this example, we use the column BL_Billable to find out the keyword Billable



D - SAMPLE:

At the end of the week, only tasks with the keyword Billable are extracted and displayed in the dashboard & cost estimation (in billable hours) is assigned to the member who logged the task:

For example, all tasks (except task #3) are displayed in the dashboard