Posts

Deploy custom SPFx webpart

gulp clean gulp build gulp bundle --ship gulp package-solution --ship \temp\deploy Upload all files to CDN path (as in write-manifest.json) \sharepoint\soultion Upload sppkg file to AppCatalog. Check in. Go to site contents. Add the app. Add webpart to page.

Common UI interactions with jQuery

In this post, I am listing some of the commonly used UI interactions when working with jQuery. Button click on pressing Enter over a text box $(document).ready(function(){ $("#btnSearch").click(function(){ $(".alert").show(); }); $("#txtName").keypress(function (e) {         var key = e.which;         if (key == 13)  // the enter key code         {             $("#btnSearch").click();             return false;         }     }); });

CRUD on SharePoint list item using JQuery Deferred promise

Add new list item. After new list item added, read all list items. This demonstrates JavaScript promise in SharePoint context. What is a Promise? A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection. Learn more... var deferred = $.Deferred(); var siteUrl = _spPageContextInfo.webAbsoluteUrl; var listName = "SPFx"; $(function(){        bindButtonClick(); }); function bindButtonClick(){     $('#btnSubmit').on('click', function(){         addListItem().then(function(data){             getListData();         });     }); } var addListItem = function(){     var title = $('#txtTitle').val();        var fullUrl = siteUrl + "/_api/web/lists

Best Practices: jQuery for SharePoint development

Rule 1 Set jQuery in no conflict state This requires you to use jQuery instead of $ For example, write jQuery("elementId").text("hello"); instead of $("elementId").text("hello"); Rule 2 Use SharePoint's _spBodyOnLoadFunctionNames array instead of jQuery’s document ready function SharePoint uses its own body onload function called _spBodyOnLoadFunctionNames which will collide with your document ready (run before or after).  If you are loading your JavaScript files through the elements.xml file (through a feature in Visual Studio), this can be particularly problematic with the order of how things load. Instead, create a function with a custom name, and push the custom name into the _spBodyOnLoadFunctionNames array.  It’s wonderful and allows things to load in their proper order. For example, write _spBodyOnLoadFunctionNames.push("myCustomFunctionName"); function myCustomFunctionName() {      // My custom funct

SharePoint List Custom Form Shows HTML as Text on Lookup Fields

Image
Display forms on SharePoint by default display a link on lookup columns. This allows us to click on the link and edit the record from another list. When creating a custom display form on SharePoint Designer, the form displays the actual HTML instead of rendering the HTML on the lookup columns. For example, see this image: The form displays text instead of the actual anchor tag. This is because the default output for the XSL transformation is to escape special characters. To address this, we need to modify the XSL template and force the output to render the HTML instead of displaying it as text. This can be done by adding the disable-output-escaping attribute to the xsl:value-of tag. Open the code view of your form and look for the template that handles the rendering of the fields. Look for the field that has the problem and add the attribute. This is what the tag should look before and after the change: Before After <xsl:value-of select="@FieldName" /> <xsl:v

CRUD operations on SharePoint list using AngularJS

Image
In this post, I am going to share some code snippets for performing CRUD operation on a SharePoint list using only client side script written with AngularJS. It is a simple implementation, where I am going to create a web part, which will have reference to a controller that will read, create, update and delete list items. I hope you are reading this post with some prior experience with SharePoint and AngularJS. The environment I am working upon is a SharePoint Online (Office 365) site. I have created a Contacts list as in the below screenshot. For this example, I will be using only 3 fields/columns in the list. ID (Auto generated for every item in the list) Last Name (Internal name: Title) First Name (Internal name: FirstName) Create the webpart I have added one Content Editor Webpart to a page and linked it to our view page [listItems.html]. The view page has 4 sections to view contacts, add, edit and delete them. For each of these opera

Blessed with 1080p 60fps gaming rig

Image
Honestly, nothing beats the satisfaction playing your favorite games, on a new rig, at 1080p 60fps. The 1080p resolution is pretty standard in 2015, and has been sticking around for some time now. But the power and efficiency of new GPUs has increased exponentially. Now a days anyone can get a great gaming experience without breaking the bank. I bought my first PC back in 2005, mostly built using cheap parts available in market. I was in college and budget was really an issue, especially in India, where you actually buy a PC to learn "coding" :P It was not much, but did the job. Used to become hot like hell. Could dry my cloths during rainy days. Had two hard drives, both of them failed after 2 years of use, due to a bad power supply unit. Later on I got a job, and I was moving from place to place, decided that a laptop will suffice my gaming crave. Spent 40K INR (~$600) on an Acer Aspire 5738G, with Core 2 Duo processor, 4GB memory and Ati Radeon 4570HD graphics car