Monday, February 22, 2016

Auto trim row as per width in HTML

Here is the CSS for the same :

.trimLine
{  
 white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-height:27px; padding:0px; margin:0px;
}

Show trusted HTML in AngularJS

angular.module('myAngApp.filters', []).
filter("sanitize", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

Convert HTML into Plain Text in AngularJS

angular.module('myAngApp.filters', []).
  filter('ConvertToPlainText', function() {
    return function(text) {
      return angular.element(text).text();
    }
  }
);

Saturday, October 24, 2015

Get all sites with REST API and AngularJS


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> 
     
<script> 
        var myAngApp = angular.module('SPAngGetWeb', []); 
        myAngApp.controller('SPAngGetWebController', function ($scope, $http) { 
            $http({ 
                method: 'GET', 
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/webs?$orderby=Title", 
                headers: { "Accept": "application/json;odata=verbose" } 
            }).success(function (data, status, headers, config) { 
                $scope.customers = data.d.results; 
            }).error(function (data, status, headers, config) { 
           
            }); 
        }); 
</script> 


<div ng-app="SPAngGetWeb"> 
    <div ng-controller="SPAngGetWebController" > 
        <table style="width: 100%;"> 
            <tr> 
                <th style="">Id</th> 
                <th style="">Title</th>
                <th style="">Created</th>
                <th style="">ServerRelativeUrl</th> 
                <th style="">Url</th>
                <th style="">WebTemplate</th> 
            </tr> 
            <tr ng-repeat="customer in customers"> 
                <td >{{customer.Id}}</td> 
                <td>{{customer.Title}}</td> 
                <td>{{customer.Created |date:'M/d/yyyy HH:mm'}}</td> 
                <td>{{customer.ServerRelativeUrl}}</td> 
                <td>{{customer.Url}}</td> 
                <td>{{customer.WebTemplate}}</td> 
                 
                </tr> 
        </table> 
    </div> 
</div> 

Get All Lists with REST API and AngularJS

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> 
     
<script> 
        var myAngApp = angular.module('SPAngGetLists', []); 
        myAngApp.controller('SPAngGetListsController', function ($scope, $http) { 
            $http({ 
                method: 'GET', 
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/Lists?$orderby=Title", 
                headers: { "Accept": "application/json;odata=verbose" } 
            }).success(function (data, status, headers, config) { 
                $scope.customers = data.d.results; 
            }).error(function (data, status, headers, config) { 
           
            }); 
        }); 
</script> 


<div ng-app="SPAngGetLists"> 
    <div ng-controller="SPAngGetListsController" > 
        <table style="width: 100%;"> 
            <tr> 
                <th style="">Id</th> 
                <th style="">Title</th>
                <th style="">Base Template</th>
                <th style="">Base Type</th> 
                <th style="">Created</th>
                <th style="">Hidden</th> 
                <th style="">Item Count</th>
                <th style="">Last Item Deleted</th> 
                <th style="">Last Item Modified</th>
                <th style="">Template FeatureId</th> 
               
            </tr> 
            <tr ng-repeat="customer in customers"> 
                <td >{{customer.Id}}</td> 
                <td>{{customer.Title}}</td> 
                <td>{{customer.BaseTemplate}}</td> 
                <td>{{customer.BaseType}}</td> 
                <td>{{customer.Created |date:'m/d/yyyy'}}</td> 
                <td>{{customer.Hidden}}</td> 
                <td>{{customer.ItemCount}}</td> 
                <td>{{customer.LastItemDeletedDate |date:'m/d/yyyy'}}</td> 
                <td>{{customer.LastItemModifiedDate |date:'m/d/yyyy'}}</td> 
                <td>{{customer.TemplateFeatureId}}</td> 
                </tr> 
        </table> 
    </div> 
</div> 

List of All Site Templates with REST API and AngularJS



Here is the code which can show you how to display all site templates / custom templates with use of REST API & AngularJS in SharePoint :


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> 
     
<script> 
        var myAngApp = angular.module('SPAngGetSiteTemplate', []); 
        myAngApp.controller('SPAngGetSiteTemplateController', function ($scope, $http) { 
            $http({ 
                method: 'GET', 
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/getavailablewebtemplates(1033)?$orderby=Title", 
                headers: { "Accept": "application/json;odata=verbose" } 
            }).success(function (data, status, headers, config) { 
                $scope.customers = data.d.results; 
            }).error(function (data, status, headers, config) { 
           
            }); 
        }); 
</script> 


<div ng-app="SPAngGetSiteTemplate"> 
    <div ng-controller="SPAngGetSiteTemplateController" > 
        <table style="width: 100%;"> 
            <tr> 
                <th style="width: 30%;">Title</th> 
                <th style="width: 65%;">Name</th> 
            </tr> 
            <tr ng-repeat="customer in customers"> 
                <td style="">{{customer.Title}}</td> 
                <td>{{customer.Name}}</td> 
                </tr> 
        </table> 
    </div> 
</div>
  



Enjoy SharePoint Coding!!!
Gaurav Goyal

Thursday, October 15, 2015

Get Web Part Title and Add Link / Text / Image to the right side of the web part title

Here is the code to get web part title and then add image or text or link in web part title and right align that.

You have to put this code in Script editor web part or put this code in a file & store somewhere & provide link to master page or provide link to content editor web part


// Function to add link/text/icon in right side of the web part title

 $(document).ready(function () {

    var className='.ms-webpart-titleText';

    $(".ms-webpart-chrome-title span h2").each(function(inx){       
        var webPartTitle = $(this).text();
               
        //Check web part title
        if(webPartTitle.indexOf("My Web Part Title")>=0)
        {
            var openUrl ="javascript:OpenPopUpPageWithTitle(\""+_spPageContextInfo.siteServerRelativeUrl+"/Style Library/MyFolder/MyPage.aspx?IsDlg=1\", RefreshPage, null, null, \"My Page Title\"); return false;";
           
            $(this).prepend("<div class='small' title='Click to open my page' style='cursor: pointer; display: inline-block;  float:right; text-align:center'><span id='spanMore' title='My Page' class='glyphicon glyphicon-th-list' aria-hidden='true' onclick='"+openUrl+"'>*****</span>&nbsp;</div>") ;
        }
    });
});

Enjoy Codding in SharePoint

Thursday, October 8, 2015

_spPageContextInfo not found on the page



Add the following code to the page :

<!DOCTYPE html>
<%@ Page language="C#" %>
<%@ Register Tagprefix="SharePoint"
     Namespace="Microsoft.SharePoint.WebControls"
     Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<html>
<head>
</head>
<body>
    <form runat="server">
        <SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>
    </form>
</body>
</html>



You need to add the following code in case of JSOM:

<!DOCTYPE html>
<%@ Page language="C#" %>
<%@ Register Tagprefix="SharePoint" 
     Namespace="Microsoft.SharePoint.WebControls" 
     Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
    <script src="/_layouts/15/1033/init.js"></script>
    <script src="/_layouts/15/MicrosoftAjax.js"></script>
    <script src="/_layouts/15/sp.core.js"></script>
    <script src="/_layouts/15/sp.runtime.js"></script>
    <script src="/_layouts/15/sp.js"></script>
 </head>
<body>
    <form runat="server">
        <SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>
    </form>
</body>
</html>