Monthly Archives: September 2018

jQuery based Followed Documents list with animation and pagination

Please follow my prerequisite blog to add the jQuery dependency on the master page. The below jQuery code will work with jQuery dependency.

GIF

Followed Documents

In this blog I would explain how to create an animated jquery based document list. The documents listed will be the followed documents within SharePoint. The list will call REST api to get all the followed documents. https://docs.microsoft.com/en-us/sharepoint/dev/general-development/following-people-and-content-rest-api-reference-for-sharepoint read for more information on the api and its parameter.

My code uses the followed parameter filtered by types 2 which is documents only. SharePoint allows to follow different types like site, list, item etc. The api I am using will get only documents https:////_api/social.following/my/Followed(types=2).

You can download the full code here in my github repository. The code repository has 3 type of files .htm, .js &.css files. The htm file has all the html elements needed to load the documents. All the code is in the js file which is invoked in the document ready function. The js file is referred in the htm to invoke. CSS file for the UI and design.

The code uses the several dependency scripts & css, all the dependencies are here in the Github. Vue.js and Bootstrap are optional dependencies. The mandatory dependencies are below

  1. jQuery, version is uploaded in that above github URL please use that
  2. Font Awesome – is for icons like copy clipboard, folder and email option
  3. jPages – for pagination of the files, you can customize it to show no of files in a page with previous and next option
  4. Animate – is for fadeInDown animation when documents are loaded.
  5. Tooltipster – for nicer tooltip when mouse over icons. (optional)
  6. jQToast – it is for toast kind of message which is shown on the top right when you copy clipboard.

The javascript code uses 2 main function GetFollowingDocuments() & followedRetrieval(). Make sure you change the site collection URL in the GetFollowingDocuments() function to make it to work. Some javascript utility functions are there to support the UI. Like getting the extension picture for specific type of documents. I have covered only few types which are major. If you want to have more types need to add more pic url for each types. Some of sample screenshots below. The png type is unknown icon because I have not handled the image for it. So you can extend those support in the code GetImagePath()

 

Search REST API for SharePoint – Multiple use cases

SharePoint Search API is helpful to create a client side webpart. You can build a complete search experience without refreshing the page with the responsive client side search result. To build such webpart fist we need to understand how the REST API and its parameter work. The search REST API will always return the jSON file. We can then use the jQuery api to parse the result and show the search result in the way wanted.

In this blog I will explain few of sample search API used to search documents within the SharePoint. To understand the basics of Search API follow this link https://docs.microsoft.com/en-us/sharepoint/dev/general-development/sharepoint-search-rest-api-overview

Below are some of the API parameters and search use cases in the SharePoint.

Use this url to get text format
Search documents, pages, list items from anywhere with the 20 results, the below query will sort the results in descending order

https://sitecollection/site/_api/search/query?querytext=’*’&sortlist=’LastModifiedTime:descending’&rowlimit=20

Search all sites and everything and return only selected properties in the JSON. Note that the date return will be fixed format you need to convert it to local date time.

https://sitecollection/site/_api/search/query?querytext=’*’&sortlist=’LastModifiedTime:descending’&rowlimit=20&selectproperties=’Title,ModifiedOWSDATE,EditorOWSUSER,Path,ParentLink,FileExtension,FileName,ServerRedirectedEmbedURL’

Search everywhere any documents with the specific extensions only – doc, pdf, excel, powerpoint, txt and mpp files only

https:// //_api/search/query?querytext=’*’&sortlist=’LastModifiedTime:descending’&rowlimit=20&selectproperties=’Title,ModifiedOWSDATE,EditorOWSUSER,Path,ParentLink,FileExtension,FileName,ServerRedirectedEmbedURL’&refiners=’fileextension’&refinementfilters='(fileExtension:or(“docx”,”pdf”,”doc”,”xls”,”xlsx”,”xlsm”,”ppt”,”pptx”,”mpp”,”csv”,”txt”))’

Search documents only from me (My documents anywhere inside SharePoint) my email in below case is senthamilv@outlook.com, searches only by that user id

https:////_api/search/query?querytext=’*’&sortlist=’LastModifiedTime:descending’&rowlimit=20&selectproperties=’Title,ModifiedOWSDATE,EditorOWSUSER,Path,ParentLink,FileExtension,FileName,ServerRedirectedEmbedURL’&refiners=’EditorOWSUSER,fileextension’&refinementfilters=’and(fileExtension:or(“docx”,”pdf”,”doc”,”xls”,”xlsx”,”xlsm”,”ppt”,”pptx”,”mpp”,”csv”,”txt”) , EditorOWSUSER:(Senthamilv@outlook.com))’

Search only my (specific user) documents from specific URL. In below query it searches only from https:///sites/ms/

https:///sites/_api/search/query?querytext=’*’&sortlist=’LastModifiedTime:descending’&rowlimit=20&selectproperties=’Title,ModifiedOWSDATE,EditorOWSUSER,Path,ParentLink,FileExtension,FileName,ServerRedirectedEmbedURL’&refiners=’EditorOWSUSER,fileextension,Path’&refinementfilters=’and(Path:”https:///sites/ms/*”,and(fileExtension:or(“docx”,”pdf”,”doc”,”xls”,”xlsx”,”xlsm”,”ppt”,”pptx”,”mpp”,”csv”,”txt”) , EditorOWSUSER:(Senthamilv@outlook.com) ))’

Search all my documents from One Drive only

https:////_api/search/query?querytext=’*’&sortlist=’LastModifiedTime:descending’&rowlimit=20&selectproperties=’Title,ModifiedOWSDATE,EditorOWSUSER,Path,ParentLink,FileExtension,FileName,ServerRedirectedEmbedURL’&refiners=’EditorOWSUSER,fileextension,Path’&refinementfilters=’and(Path:”https://mysite..com/personal*”,and(fileExtension:or(“docx”,”pdf”,”doc”,”xls”,”xlsx”,”xlsm”,”ppt”,”pptx”,”mpp”,”csv”,”txt”) , EditorOWSUSER:(Senthamilv@outlook.com)))’

Search all documents modified by (name *)

https://<sitecollection//_api/search/query?querytext='ModifiedBy:senthamil*'&sortlist='LastModifiedTime:descending'&rowlimit=20&selectproperties='Title,ModifiedOWSDATE,EditorOWSUSER,Path,ParentLink,FileExtension,FileName,ServerRedirectedEmbedURL'&refiners='fileextension'&refinementfilters='(fileExtension:or("docx&quot;,"pdf","doc","xls","xlsx","xlsm","ppt","pptx","mpp","csv","txt"))'

Search documents from your team members (peers and manager). For this search you can first find all your team members using my other blog here. Once the team member email addresses are known, those emails can be used as search refiners.

https:////_api/search/query?querytext=’*’&sortlist=’LastModifiedTime:descending’&rowlimit=20&selectproperties=’Title,ModifiedOWSDATE,EditorOWSUSER,Path,ParentLink,FileExtension,FileName,ServerRedirectedEmbedURL’&refiners=’EditorOWSUSER,fileextension’&refinementfilters=’and(fileExtension:or(“docx&#8221;,”pdf”,”doc”,”xls”,”xlsx”,”xlsm”,”ppt”,”pptx”,”mpp”,”csv”,”txt”) , EditorOWSUSER:or (senthamilv@outlook.com,ananana@hotmail.com))’

Peers & Manager from SharePoint profile

Please follow my prerequisite blog to add the jQuery dependency on the master page. The below jQuery code will work with jQuery dependency.

SharePoint people profile will have all the details about the peers and the manager. The below jQuery code will call the REST api to get all the peers and the manager and display in the html tag.

The below code uses the addition javascript reference /_layouts/15/sp.UserProfiles.js for the profile api

You can also download the full code from the Github


$(function () {
    GetMyTeamDetails();
});

function GetMyTeamDetails() {
    var siteUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties";
    console.log(siteUrl);
    $.ajax({
        url: siteUrl,
        headers: {
            Accept: "application/json;odata=verbose"
        },
        success: function (data) {
            try {
                var peers = data.d.Peers.results;
                for (var i = 0; i < peers.length; i++) {
                    $("#peers").append(peers[i]);

                } // end of for loop

                var managers = data.d.ExtendedManagers.results;
                for (var i = 0; i < managers.length; i++) {
                    $("#manager").append(managers[i]);
                } // end of for loop
            } catch (err2) {
                alert(JSON.stringify(err2));
            }
        },
        error: function (jQxhr, errorCode, errorThrown) {
            alert(errorThrown);
        }
    });
}

Vue JS – SharePoint list operation using REST service

Please follow my prerequisite blog to add the jQuery dependency on the master page. The below jQuery code will work with jQuery dependency.

Download the files from the Github repository and make sure the Vue.js dependency is added to the Master Page. The master page sample uploaded don’t have the Vue.js reference so please add it to the master page.

Step 1:

Upload the VueSample.js and VueFile.htm to the siteassets/scripts folder.

Step 2:

Using the SliderList.stp create the List in the SharePoint site. In my case I created the List with the name BootstrapSlider.

Step 3:

Create the Page called VueJS Sample.aspx in the site. I create under the site ms so the URL will be https:///ms/SitePages/VueJs%20Sample.aspx

In the page add the content editor webpart and add the link to the /siteassets/scripts/vuefile.htm. The htm file have the necessary html content to load the data, vueSample.js file have the java script code to call the REST api from List.

Click on the Get Items to load the date from the List. The Get Items code call the REST api from the List and load the data in the bootstrap table format.

$(document).ready(function () {

  var app = new Vue({
    el: '#appvue2',
    data: {
      message: 'Click the button to see feedbacks',
      feedbackList: [],
      sliderContents: []
    },
    methods: {
      getSliders: function () {
        this.message = "Calling the slider function...";
        var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('BootstrapSlider')/items";
        var headers = {
          "accept": "application/json;odata=verbose"
        };
        $.ajax({
          url: endPointUrl,
          type: "GET",
          headers: headers,
          success: data => this.sliderContents = data.d.results
        }); // jquery ajax
        this.message = "Success";
        console.log(this.sliderContents);
      } // getSliders end
    } // methods end
  }); // vue end
}); // doc ready end

Resolve people picker control using jQuery

Please follow my prerequisite blog to add the jQuery dependency on the master page. The below jQuery code will work with jQuery dependency.

peoplemanager

In this blog I will discuss how to use jQuery to auto complete the people field with the input person manager property. To do it please follow below steps

Step 1:

Navigate to my Github URL to download the below files from the repository

  • getManager.js
  • getManagerHtml.txt
  • Leave App.stp

Step 2:

Upload the Leave App.stp to the List template Gallery. Then Create a list using the template uploaded. In my case I Created a list with name Leave Application.

Step 3:

Upload the files getmanager.js & getManagerHtml.txt to the Site Assets library under the site content. Usually I will create a folder scripts under Site Assets library to upload the files. So the sample below will use the siteassets/scripts/<file name>. If you uploading the file to different library make sure you change the path in the getManagerHtml.txt file.

Step 4:

Navigate to the List “Leave Application” you have created in Step 1: In my case it is under URL https://<sitecollection>/ms/Lists/Leave%20Application/AllItems.aspx , /ms is the subsite name I am using. In your case it may be different based on site name. Click on New Item to open the New Item form.

Locate the top settings icon and click on it to open Edit Page. This will allow to add webpart to the edit form. Add the content editor webpart. In the content editor webpart edit it to add the getManagerHtml.txt file path to it. After adding the Path save the Page.

Step 5:

So now the script will add the Get Manager button at run time next to the Input field. But before that you should set the correct ID of the control in the getManagerHtml.txt. Now go to the Site Assets library and then to the getManager.js file. Open the getManager.js in the favourite editor you have. You can open even in notepad. In my case I use the Visual Studio code to open the file. You can Map the folder to the Network drive to open it easier in VS code. The ID marked below in the picture has to be replaced by your ID.

To find out the ID use the developer tool in the browser to identify. I use Edge and F12 key to open the developer tool. Once you identify the ID replace it in the js file and save the file.

Once the changes are saved in the getmanager.js file, go back to the Leave Application New Item page and refresh. Now you should be able to see Get Manager button. Type the Name in the Applying People. Then click on the Get Manager button to auto fill the Manager on the Manager People Picker. The code will auto fill and then will make the control disable.

The Java Script code actually uses the People Manager api to get the Applying People control details. Get the Account name and call to the people manager API to get the manager. Once the Manager field is retrieved from CSOM it sets it to the People picker and automatically resolve the name in the control. You can modify the code to get other details if you wanted to.

Hope this works!!!

Get Taxonomy Term set, custom properties & Terms using JSOM

Please follow my prerequisite blog to add the jQuery dependency on the master page. The below jQuery code will work with jQuery dependency.

In this blog the jQuery code will get the terms from a specific termset. Each term will have a local property cssclass & cssfname. The JSOM code will get the custom property and create a bootstrap button navigation. Term ID will be a Query string for navigation.

The Navigation termset on the screenshot is created dynamically based on the Taxonomy. The color of button asp.net, azure, crm, sharepoint are colored based on the CSSCLASS property from the term.

 

Step 1: Download the files

Navigate to my Github to download the files. The Github has the termsetHtml.txt & termsetScript.js

Step 2: Upload To SiteAssets

Upload both the files to SiteAssets-> Scripts folder. Create Scripts folder inside the Site Assets to upload. If you are not using scripts folder make sure you change the path in termsetHtml.txt

Step 3: Add to SharePoint

Now add the Content Editor webpart to the Page. Edit the content editor webpart and add the full path of the termsetHtml.txt file. Save the webpart and page. If the reference to jquery, js and code are correct the termset will be loaded and color based on css name

jQuery based client side site review with smileys

 

feedbackvideo

Before proceeding please read the prerequisite blog posted by me. Need to setup the referenced js and css files in the master page. If you don’t want to add in master page. Please add those in the txt file which is added below.

Navigate to Github to get the files required for this Review / Feedback jQuery

The Github have following files

  1. Feedback.stp – List template used to submit review details
  2. Feedbackhtml.txt – This file contains the html and the style
  3. feedbackMaster.js – this is the javascript to submit the Feedbacks list
  4. gif file no need to use…

Step 1: List Template

Upload the list template to the site and create the Feedbacks list. The js code will get the list instance by the title Feedbacks so use the name Feedbacks while creating the List

Step 2: Upload the Files

In my case the site url is https://<sitecollection>/ms/ so navigate the site assets under your site where you want the review component. Under Site Assets create a folder called scripts. Under the scripts folder upload both the js and the txt file, that is feedbackhtml.txt and feedbackmaster.js. If you don’t want to upload to siteassets ->scripts folder make sure you change the path of the js file. The js file path must be the folder you are using.

Step 3: WebPart Add

After the files are uploaded to the scripts folder. Go to the page where you want the review jquery app. Edit the pager and add the content editor webpart to the page. Edit the webpart and in the path text enter the full path to the txt file. https://<sitecollection>/ms/siteassets/scripts/feedbackhtml.txt . Now save the webpart and the page. If dependency js, css are correct and the path to feedbackMaster.js is correct the feedback / review will be displayed as per the gif picture above.

The javascript uses the site url for the variable. Make sure you point to your site path. In my case the site url is /ms

Setup prerequisite – msisgreat masterpage & js dependencies

In this blog I will go through how to setup my java script libraries to the Master Page. All my java script sample in the blog will refer to the customized master page. This customized master page for me I named it as msisgreat.master.

Creating master page

If you want to customize the master page in SharePoint first you need to enable the Publishing Infrastructure & Publishing Feature. Once enabled open the https://<sitecollection>/_catalogs/masterpage in the windows explorer view. I like the Oslo.master page because it does not have the left navigation control. So in all my sample code I use the oslo.master as the base master page. To create the custom master page with oslo.master as base. Just select the below files in the explorer view

Oslo.master

Oslo.html

Oslo.preview

Copy all the above files and paste again in the same masterpage folder. Now you will see oslo copy.master, oslo copy.html & oslo copy.preview. Now just rename only .html and .preview file to the name you wanted. In my case I renamed oslo copy.html to msisgreat.html & renamed oslo copy.preview to msisgreat.preview. Please do not rename the .master file because this file is always tied to.html, renaming .html will rename .master file or new file will be created with msisgreat.master.

Now that you have 3 files with msisgreat name publish all 3 files to a major version. First time you need to publish as major version so that you can apply as a master page in the site settings page.

Copying the dependency files

Navigate to my github webpage for js project in this URL Use the clone download Zip option to get all the files to the local directory. Once zip file is downloaded unzip it to any temp folder. In the unzipped folder look for dependency folder.

Open the masterpage (https://<sitecollection>/_catalogs/masterpage) in the explorer view. Now create a folder called custommaster inside the masterpage folder. Navigate inside the custommaster folder and paste the files copied in early step into this folder. This will take longer depends on the speed of the network. For me it took 25 minutes to copy all the dependency files. Once coped the folder structure will look like below

 

Adding the dependency snippet

Once the master page is created and ready. Open the masterpage folder in windows explorer view. Locate the msisgreat.html file, use your popular editor in my case Visual Studio code to open the html file. Once the file is opened in the editor locate for the below tag

<![CDATA[ [endif] ]]> <!–[if lte IE 8]>

<style type=”text/css”>//<![CDATA[

.ms-core-animation-transparent,

.ms-core-animation-transparent img

{

-ms-filter:”alpha(opacity=0)”;

}

.ms-isBot .ms-core-animation-transparent,

.ms-isBot .ms-core-animation-transparent img

{

-ms-filter:””;

}

//]]></style>

<![endif]–>

 

Locate the above snippet of the code in the master page. Once you locate. Now copy the below code and paste it after that <![endif]à

<link rel=”stylesheet” href=”./custommaster/animate/animate.css” />

<link rel=”stylesheet” href=”./custommaster/jq/jquery-ui-1.12.1/jquery-ui.css” />

<link rel=”stylesheet” href=”./custommaster/style/mystyles.css” />

<link rel=”stylesheet” href=”./custommaster/fa5.3.1/css/all.min.css” />

http://./custommaster/jQ/jquery-3.3.1.min.js

http://./custommaster/jq/jquery-ui-1.12.1/jquery-ui.js

<link rel=”stylesheet” type=”text/css” href=”./custommaster/tooltipster/css/tooltipster.bundle.min.css” />

<link rel=”stylesheet” type=”text/css” href=”./custommaster/tooltipster/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css” />

<link rel=”stylesheet” type=”text/css” href=”./custommaster/tooltipster/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css” />

http://./custommaster/tooltipster/js/tooltipster.bundle.min.js

<link rel=”stylesheet” type=”text/css” href=”./custommaster/bootstrap4.1.3/css/bootstrap.min.css” />

http://./custommaster/bootstrap4.1.3/js/bootstrap.min.js

 

Basically the above snippet will add all the dependencies you wanted to the master page. Now save the master page and publish only .html file. Do not touch the .master file in any scenario. The bootstrap references are optional. Beware this will completely change your site font and color. So add only if you need bootstrap to beautify pages.

 

Surface Go Unboxing & My Personal Review

This blogpost is my 100th blog. Celebrating my 100th blog with my new Surface Go (4 GB model). Actually this blog was written using Surface Go.

Release Date in Singapore 28th Aug 2018
Shipped Date 31 Aug 2018
Price SGD (including type cover) S$ 725.10 (this is 10% student price)

Unboxing the Surface Go

Below are the items included in the Box

  1. Surface Go device
  2. Power Supply
  3. Starter Guide
  4. Warranty details

Surface Go devices are mainly targeted for Students to make it easy to carry, light weight and productive during the classes. The Windows 10 configuration has optimized settings specific to education sector. There is a very good article around it here

The Surface Go has below ports

  1. 1 x USB-C
  2. 3.5 mm headphone jack
  3. 1 x Surface Connect port
  4. Surface Type Cover port
  5. microSDXC card reader

Full Tech Spec – My Surface Go

Software Windows 10 Home (Out of S mode)

Microsoft Office 365 Home – My Live subscription

Dimensions 9.65″ x 6.90″ x 0.33″ (245 mm x 175 mm x 8.30 mm)
Weight Starting at 1.15 lbs (522 g), not including Type Cover
Storage eMMC drive: 64GB
Display Screen: 10″ PixelSense™ Display

Resolution: 1800 x 1200 (217 PPI) resolution

Aspect ratio: 3:2

Contrast ratio: 1500:1

Touch: 10-point multi-touch

Corning® Gorilla® Glass 3

Battery life Up to 9 hours of battery life – I am yet to test that
Processor Intel® Pentium® Gold Processor 4415Y
Security TPM 2.0 for enterprise security

Enterprise-grade protection with Windows Hello face sign-in

Memory 4GB
Wireless Wi-Fi: IEEE 802.11 a/b/g/n/ac compatible

Bluetooth Wireless 4.1 technology

Connections 1 x USB-C

3.5 mm headphone jack

1 x Surface Connect port

Surface Type Cover port

microSDXC card reader

Cameras, video, and audio Windows Hello face authentication camera (front-facing)

5.0MP front-facing camera with 1080p Skype HD video

8.0MP rear-facing autofocus camera with 1080p HD video

Single microphone

2W stereo speakers with Dolby® Audio™ Premium

Graphics Intel® HD Graphics 615
Exterior Casing: Magnesium

Color: Silver

Physical buttons: Volume, Power

Sensors Ambient light sensor

Accelerometer

Gyroscope

Magnetometer

My Reviews

First Look

The device looks super cute with the slim down in size. You can visualize the sizes between devices in the below picture. The device has smooth curved edges compared to Surface Pro. Compared to other tablets in market this one is slightly thicker.

Pros:

Smaller and Handy (245 mm x 175 mm x 8.30 mm)

Light weight (522 g)

Fit easily to your hand bag and carry

Comes with built in stand, easy to work

Cons:

Slightly thicker than usual tablets.

Backward Compatibility & Features

Once I unbox the Go device I try to plug in to my Surface Dock, you guess what it works like charm. Any USB devices connected to Dock works too. I even tried to charge using the Surface Pro charger and it works. The Type C port is easy to extend multiple monitors. Surface Pen and the Surface Dial also works without any glitch. It has a Micro SD slot at the back hidden behind stand like in Surface Pro.

Pros:

Works with Surface Dock

Works with Surface Pen, Dial and Surface Pro charger.

Micro SD slot available

Type C port for Extension

Cons:

No USB port , you need to buy Type C to USB in case you want to connect any external devices.

CPU Performance

To identify the performance, I used 2 benchmark tools GeekBench 4 and the NovaBench. Both tools have their own benchmark scores for CPU, Memory and GPU. Below is the screenshot of the tool results.

The benchmark score shows Surface Go performs on much better than $500 USD priced Laptop models. It scores better in GPU and graphics.

Using Novabench Tool for getting the benchmark of performance. The Novabench tool will have its own score to come up with the benchmark.