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

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()

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

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

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 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!!!

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