SharePoint Web Log: HTML

Friday, August 29, 2014

SharePoint 2013 : How to open and close SP.UI.ModalDialog.showWaitScreenWithNoClose

How to use SP.UI.ModalDialog.showWaitScreenWithNoClose to display custom loading message. Simplest way is that just write below code where you have to call the loader/model box of waiting

var value = SP.UI.ModalDialog.showWaitScreenWithNoClose(title, message, height, width);

and to close just add below code

value.close(0);

value=null;
 
There are lost of option are also available, which can be seen on 
http://msdn.microsoft.com/en-us/library/office/ff408140%28v=office.14%29.aspx

Monday, June 30, 2014

SharePoint 2013 : How to add Device Channel in site/master page

A Device Channel Panel is a control that you can add to a master page or page layout to control what content is rendered in each channel that you create. A Device Channel Panel is a container that specifies one or more channels; if one or more of those channels are active when the page is rendered, all of the contents of the Device Channel Panel are also rendered. A Device Channel Panel can include almost any type of content, including a link to a CSS file or a .js file. It is an easy way to include specific content for specific channels.

There are two limitations to using a Device Channel Panel:

Display templates Because display templates are rendered on the client side and Device Channel Panels run on the server side, you cannot use a Device Channel Panel within a display template. Instead, you should use two different Content Search Web Parts within Device Channel Panels on your page layout, or use the JavaScript variable to trigger the behavior you want within the display template itself.
Web Part zones You cannot insert a Web Part zone inside a Device Channel Panel. If you want to allow authors to add Web Parts to a page, and if you are not concerned about the page weight for mobile devices, you can add a Rich Text Editor page field to a Device Channel Panel, and then instruct authors to add Web Parts there. You can add Web Parts directly to a Device Channel Panel (without a Web Part zone).

How to configure device channels?

Go to settings of the site
Open the Device Channel from Look and feel section on the page
Default View of the Device Channel settings page
Add rule for the device
Add rule for example for windows phone 8.1
And save the configuration
Go to site settings and select Master page
Open the settings

Having applied the configuration, if you navigate to the website now using a Windows Phone you should see the Device Channel automatically applied.

Thursday, March 13, 2014

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

Previous
Next
Pages
Page Size
Current Page Index
Max Page size
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 :

SharePoint Web Log