Get current web URL in a Nintex workflow

In this article, we will show the steps to get the current web URL in a Nintex workflow on SharePoint custom list.

Step 1: Create a workflow variable say VarCurrentItemWebURL with multiple lines of text type as shown below

Step 2: Add a Regular expression action as shown below

In the Pattern add below line

/Lists/listname/DispForm.aspx.*$

Operation : Replace text

Replacement text :

Input text: {Common:ItemUrl}

Store result in : VarCurrentItemWebURL

Change display name of the SharePoint listview Fields

In this article, we will be changing the display names of fields selected in a list view.

Step 1: Create a list view in a page with some fields.

Step 2 : Edit the page, then add a Script editor web part in the page.

Step 3: Insert the below code in it

<script src="/SP2013/SiteAssets/Script/jquery-2.1.4.min.js" type="text/javascript"></script>

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push("ChangeColumnName");

function ChangeColumnName() {

$('[ID="diidSort0LinkTitle"]').html("Employee ID");
$('[ID="diidSort0First_x0020_Name"]').html("First Name");
$('[ID="diidSort0Family_x0020_Name"]').html("Surname");
$('[ID="diidSort0Contact_x0020_Number"]').html("Token Number");
$('[ID="diidSort0ADID"]').html("User ID");

}

</script>

Below is the desired result

Bind SharePoint list datetime field values using ECMAScript

In this post, I will show how to bind the SharePoint list datetime field values using ECMAScript

Desired Output:

We can use the below script to get the desired output as shown above

<script type="text/javascript" src="~/SiteAssets/jquery-1.8.0.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

            ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

    });

        function retrieveListItems() {

        //Get the current context 

          var clientContext = new SP.ClientContext.get_current();

          var oList = clientContext.get_web().get_lists().getByTitle('TeamTasks');

          //Query

          var camlQuery = new SP.CamlQuery();

          camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name="Status" /><Value Type="Choice">In Progress</Value></Eq></Where></Query></View>');

          this.collListItem = oList.getItems(camlQuery);

          clientContext.load(collListItem);

          clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

    }

    function onQuerySucceeded(sender, args) {

        var innerhtml = "<table><tr><th><td>Task Name</td><td> Task Due Date</td></th></tr>";

        var MyDate = new Date();

        var listItemEnumerator = collListItem.getEnumerator();

        while (listItemEnumerator.moveNext()) {

            var oListItem = listItemEnumerator.get_current();

            MyDate = oListItem.get_item('DueDate');

            innerhtml += "<tr><th><td>" + oListItem.get_item('Title') + "</td><td>" + MyDate.format('d MMM yyyy') + "</td></th></tr>";

        }

        innerhtml += "</table>";

        PendingTasksdiv.innerHTML = innerhtml;

    }

    function onQueryFailed(sender, args) {

        //alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

    }

</script>

<h3>Pending Team Tasks</h3>

<div id="PendingTasksdiv"></div>

Display SharePoint 2010 list data using REST and AngularJS

In this post, I’ll show how to display SharePoint 2010 list data using REST and AngularJS. 

Firstly create a list e.g. EmployeeDetails as shown below and add few records

Add the Html form web part with below code

<!--Angular JS file reference--> <script type="text/javascript" src="/SiteAssets/angular.min.js"></script> <script type="text/javascript"> var siteURL = "siteURL"; var spApp = angular.module('listmodule', []); //Service spApp.service('EmployeeListService', ['$http', '$q', function ($http, $q) {     //Get the Employees     this.getEmployees = function (listName) {         var dfd = $q.defer();         var completeUrl = siteURL + "_vti_bin/listdata.svc/" + listName + "?$select=";         completeUrl += 'Id,Title,Technology&$orderby=Id asc';         $.ajax({             url: completeUrl,             type: "GET",             headers: { "accept": "application/json;odata=verbose" },             success: function (data) {                 dfd.resolve(data.d.results);             },             error: function (xhr) {                 dfd.reject('Error : (' + xhr.status + ') ' + xhr.statusText + ' Message: ' + xhr.responseJSON.error.message.value);             }         });         return dfd.promise;     } }]); //Controller spApp.controller('EmployeeDetailsController', function ($scope, EmployeeListService) {     EmployeeListService.getEmployees("EmployeeDetails").then(         function (result) {             $scope.listitems = [];             angular.forEach(result, function (item) {                 var listitem = {                     ID: item.Id,                     Title: item.Title,                     Technology: item.Technology                 }                 $scope.listitems.push(listitem);             });             $scope.orderByField = 'ID';             $scope.reverseSort = false;         },         function (reason) {             $scope.errMessage = reason;         }); }); </script> <div ng-app="listmodule">     <div ng-controller="EmployeeDetailsController">         <div>             <table id="tblEmployeeDetailsList">                         <thead>                             <tr>                                 <th>                                     <a href="#" ng-click="orderByField='ID'; reverseSort = !reverseSort">ID <span ng-show="orderByField == 'ID'">                                         <span ng-show="!reverseSort"></span></span></a>                                 </th>                                 <th>                                     <a href="#" ng-click="orderByField='Title'; reverseSort = !reverseSort">Employee Name                                         <span ng-show="orderByField == 'Title'"><span ng-show="!reverseSort"></span></span>                                     </a>                                 </th>                                 <th>                                     <a href="#" ng-click="orderByField='Technology'; reverseSort = !reverseSort">Technology                                         <span ng-show="orderByField == 'Technology'"><span ng-show="!reverseSort"></span>                                         </span></a>                                 </th>                             </tr>                         </thead>                         <tbody>                             <tr ng-repeat="item in listitems | filter:query | orderBy:orderByField:reverseSort">                                 <td>                                     {{ item.ID }}                                 </td>                                 <td>                                     {{ item.Title }}                                 </td>                                 <td>                                     {{ item.Technology }}                                 </td>                             </tr>                         </tbody>                     </table>                         </div>     </div> </div>

Result :

Add Custom Button in list form using jQuery

In this post I will explained how to add custom button in list form using jquery

Method 1:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("input[value$='Save']").after($('<input id="btncustomsave" class="ms-ButtonHeightWidth" name="btncustomsave" type="button" value="Custom Save" onclick="JSMethod();" />')).hide();

    });

    function JSMethod() {

        alert('Hi');

        $("#ctl00_m_g_44ab3e22_6333_4ab7_80b7_a8c408fc4432_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem").click();

    }

</script>

Method 2:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("#ctl00_m_g_44ab3e22_6333_4ab7_80b7_a8c408fc4432_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem ").hide();

        var submitHTML = '<td class="ms-separator">&nbsp;</td><td class="ms-toolbar" noWrap=""><input id="btncustomsave" class="ms-ButtonHeightWidth" name="btncustomsave" type="button" value="Custom Save" onclick="JSMethod();" /></td>';

        $(".ms-formtoolbar > tbody > tr").append(submitHTML);

    });

    function JSMethod() {

        alert('Hi');

        $("#ctl00_m_g_44ab3e22_6333_4ab7_80b7_a8c408fc4432_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem ").click();

    }

</script>

Find SharePoint 2010 SiteTemplate

In this post I will explained how to find the site template using client side/browser.

Step 1. Browse to any page on the site and view the HTML source code of the page then search for the "SiteTemplateID" in the javascript embedded into the page such as

 var g_wsaSiteTemplateId = 'STS#0';

Step 2. Check the g_wsaSiteTemplateId  value in the site template available in SharePoint  2010 by default from below link

http://social.technet.microsoft.com/wiki/contents/articles/20100.sharepoint-2010-default-site-templates.aspx

Above siteTemplateId indicate teamsite.

SharePoint 2010 Designer Workflow Email with embedded image

In this post, I will explain how to embed image in an email content of the SharePoint designer workflow.

1.       Upload image to be embedded in the SharePoint picture library.

2.       Create a new workflow variable with string data type.

3.       Edit workflow and set this newly created variable to HTML i.e. <img src=” http://SiteName/logo.jpg” />

4.       Then edit the email, press “Add or Change Lookup” and use this newly created variable.

5.       Save and Publish workflow