SharePoint 2013/Office 365 Social: How to get followed documents/site/content of logged in user using JSOM and Knockout Js

Coming soon

Yammer : How to get current logged in user unseen message count

Well this is my first application of Yammer, I was wondering how to start on the application. So, first thing come in my mind that to explore the Yammer,

What is yammer?

How can we use it?

What are the entities in yammer, which we can use or integrate in our application. etc

So, logged in Yammer, created network added the people. So, now when all thing are up then for just creating a sample application a scenario occurs in my mind “current logged in user unseen message count”. How to start on the, where to deploy that????

I added one more Technology my FAV one, SharePoint. Final scenario showing  current logged in user unseen message count in SharePoint online. Created a trial account in that and create on page. First I tried with yammer default feed JS code. It works find ….OK.

So, for custom development I looked on Google and found the wonderful description on yammer API. How to consume in various domains, how add in various platforms. Link is below

https://developer.yammer.com/connect/

To get current logged in user unseen message count

<h1><b>Yammer</b></h1> 
    <h3 > Unseeen Messages</h3><div id="numberOfMessages"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" data-app-id="[Your App ID]" src="https://assets.yammer.com/assets/platform_js_sdk.js"></script>
 

    <span id="yammer-login"></span>
   
    <script type="text/javascript" >
        yam.getLoginStatus(
      function(response) {
        if (response.authResponse) {
              console.log("logged in");            
               yam.platform.request({
                url: "networks/current.json",
                method: "GET",       
                beforeSend: function (req) { //print message response information to the console
                    yam.platform.setAuthToken(response.access_token);
                } ,               
                success: function (user) { //print message response information to the console
                    document.getElementById('numberOfMessages').innerHTML= user[0].unseen_message_count;
                },
                error: function (user) {
                  alert("There was an error with the request.");
                }
              });

        }     
      }
    );
    </script>

but before adding the above code we have to create on app in yammer

remember this redirect URL should be match with your domain and JavaScript origin will be the URL of page where the JS or JS is rendering.

Click Save

This big bold highlighted one is the key point where I stuck an have goggling for like 2 days

Pager in Knockout JS without using Paged Grid

Knockout JS as we know is a highly versatile JavaScript library that helps us implement the MVVM pattern on the client by providing us with two way data binding and templating capabilities. Today we will use Knockout JS and JSON data to build a pager.

Paging is method the break large data in  piece of number of records, which is know as page size. The major component of the Paging are

1. Previous
2. Next
3. Pages
4. Page Size
5. Current Page Index
6. Max Page size
7. A list with required pages

So for creation in paging in knockout JS we have to declare certain observables and observable arrays as follows:

• allPages = ko.observableArray(), // it will have all the information with all the required records
• pageIndex = ko.observable(1) //Current page index
• pageSize = ko.observable(10) //Can be configured as required for page size
• pageCount = ko.observable()
• maxPageIndex = ko.observable() //Maximum index

 

Now we have to add some methods for next, previous, move to current ;page etc.

• First method is move next

nextPage = function () {
            if (pageIndex() < maxPageIndex()) {
                pageIndex(pageIndex() + 1);
            

              updatePageIndex(pageIndex());
            }
        }

• Second is move to previous

previousPage = function () {
            if (pageIndex() > 0) {
                pageIndex(pageIndex() - 1);
                // your code for array updation

                updatePageIndex(pageIndex());
            }

        },

• Third is move to current page

moveToPage = function (index) {
           pageIndex(index);

            // your code for array updation

           updatePageIndex(index);
       },

• Fourth for making the page size to 5 and middle logic

  updatePageIndex = function (index) {
             if (index != 1 && index != 2 && index != maxPageIndex() && index != maxPageIndex() - 1) {
                 allPages([]);
                 allPages.push({ pageNumber: (index - 2) })
                 allPages.push({ pageNumber: (index - 1) })
                 allPages.push({ pageNumber: (index) })
                 allPages.push({ pageNumber: (index + 1) })
                 allPages.push({ pageNumber: (index + 2) })
             }
             else if (index == maxPageIndex() && index > 5) {
                 allPages([]);
                 allPages.push({ pageNumber: (index - 4) })
                 allPages.push({ pageNumber: (index - 3) })
                 allPages.push({ pageNumber: (index - 2) })
                 allPages.push({ pageNumber: (index - 1) })
                 allPages.push({ pageNumber: (index) })
             }
         },
  

• Fifth one for updating the pagesize when any index is clicked

            allPages([]);
            pageCount = Math.ceil(totalRequestCount() / pageSize());
            maxPageIndex(pageCount);
            if (pageCount < 6) {
                for (var i = 0; i < pageCount; i++) {
                    allPages.push({ pageNumber: (i + 1) })
                }
            }
            else if (pageCount >= 6) {
                for (var i = 0; i < 5; i++) {
                    allPages.push({ pageNumber: (i + 1) })
                }
            }

Now we have need of HTML, which will consume/bind all above variables and methods

 

<div style="width: 850px; text-align: center; margin: auto;" >
            <div style="">
                <ul class="pagination">
                    <li><a href="#">
                        <img src="/images/arrow-start.png" width="26" height="25" data-bind=" disable : ( $root.paging.pageIndex() == 1),click: $root.paging.previousPage" /></a> </li>
                </ul>
                <ul class="pagination paginationMargin" style="margin:0px;" data-bind="foreach: $root.paging.allPages">
                    <li data-bind="css: { active: $data.pageNumber === ($root.paging.pageIndex()) }"><a href="#" data-bind="    text: $data.pageNumber, click: function () { $root.paging.moveToPage($data.pageNumber); }"></a></li>
                </ul>
                <!-- ko if: (($root.paging.maxPageIndex() != $root.paging.pageIndex()) && ($root.paging.maxPageIndex()-2 != $root.paging.pageIndex()) && ($root.paging.maxPageIndex()-1 != $root.paging.pageIndex())  && ($root.paging.maxPageIndex() > 5))-->
                <ul class="pagination paginationMargin">
                    <li><a href="#">......</a> </li>
                    <li><a href="#" data-bind="text: $root.paging.maxPageIndex(), click: function () { $root.paging.moveToPage($root.paging.maxPageIndex()); }">......</a> </li>
                </ul>
                <!-- /ko -->
                <ul class="pagination">
                    <li><a href="#" >
                        <img src="/images/arrow-end.png" width="26" height="25" data-bind="disable  : ($root.paging.pageIndex() == $root.paging.maxPageIndex()) ,click: $root.paging.nextPage" /></a> </li>
                </ul>
            </div>

Well above HTML have some classes which you have to add your self, I have just given the name of that or you can use any other styles also from searching the paging template available from Google. After above JavaScript code and HTML the paging will look like in a page as below :

Create SharePoint(2013) Publishing pages using ECMASCRIPT

Well, to create paged from page layouts in the Publishing site in SP2013, I have tried the below code

First get the context for web,

             context = new SP.ClientContext(webUrl);  web = context .get_web();

Then get the publishing web for the site

                               pubweb = SP.Publishing.PublishingWeb.getPublishingWeb(context1, web );

                                context .load(web );

                                context .load(pubweb);                               

                                 context .executeQueryAsync(onquerysucced,onqueryfailed);

In onquerysucced get all the pages in the master page library

            

var pageLibrary = web.get_lists().getByTitle("Master Page Gallery");  

var camlQuery = new SP.CamlQuery;

items = pageLibrary.getItems('');

context .load(items,'Include(Id,Title,File)');

context .executeQueryAsync(onPagelayoutsuccess,onqueryfailed);

 

In onPagelayoutsuccess method

             var listItemEnumerator = items.getEnumerator();

             var listItemInfo = '';

             while (listItemEnumerator .moveNext()) {

            var oListItem = listItemEnumerator.get_current();

                pageItems.push({

                "Id":oListItem.get_id(),

                "Title":oListItem.get_item('Title'),

                "obj" :oListItem //Add Object in the list            

                });

             pageItems.push(oListItem);

             }

             //knockout js work for finding the required page layout item from the list

             var newPage = ko.utils.arrayFirst(pageItems(), function(item) {

                                return item.Title == "CT_PageLayout.aspx";

                                }); 

            

          pageInfo = new SP.Publishing.PublishingPageInformation();

          pageInfo.set_name("CT_PageLayout.aspx");

          pageInfo.set_pageLayoutListItem(newPage.obj);

          newPage = pubweb.addPublishingPage(pageInfo);

          context.load(newPage);

          context.executeQueryAsync(onPageCreationSuccess,onqueryfailed);

         };

LiveJournal Tags: SharePoint 2013,SharePoint,Publsihing,ECMA

         function onPageCreationSuccess(){                                

                                                                listItem = newPage.get_listItem();

                context.load(listItem);

                 context.executeQueryAsync(onPageSuccess,onqueryfailed);

          };

SharePoint 2013 : Get SharePoint items in Knockout js observableArray

To get the list tem in the observableArray, just declare a array in the js and get as below code

list = ko.observableArray(),

---

 getCourses = function () {
              var clientContext = TRANAPP.context;
              var oList = clientContext.get_web().get_lists().getByTitle('Courses');
              var myQueryString = '<View><RowLimit>1000</RowLimit></View>';
              var newQuery = new SP.CamlQuery();
              newQuery.set_viewXml(myQueryString);
              courseItems = oList.getItems(newQuery);
              clientContext.load(courseItems, 'Include(Id, Title, CourseDescription, Author)');
              clientContext.executeQueryAsync(onGettingCourses, onQueryFailed);
          },
onGettingCourses = function (sender, args) {
              var allCourse = courseItems.getEnumerator();
              while (allCourse.moveNext()) {
                  var currentCourse = allCourse.get_current();
                  list.push({
                      "Title": currentCourse.get_item('Title'),
                      "Id": currentCourse.get_id(),
                      "CourseDescription": currentCourse.get_item('CourseDescription')
                  });
              }
          },

onQueryFailed = function (sender, args) {
              alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
          },