SharePoint Widgets

Hi Friends, This post is not regarding the SharePoint but it is a very common functionality that we need in day to day coding. So I thought to write down here. This functionality is of sorting in Typescript. Sorting simple Arrays Sorting is the very basic functionality that is required and when it comes to typescript  we do get OOB method, but that is for the simple array.    let  fruits : string []  =  [ ' Banana ' ,  ' Orange ' ,  ' Apple ' ,  ' Pineapple ' ] ;    console . log (fruits. sort ()); Output : Apple, Banana, Orange, Pineapple Sorting an Array of Objects When it comes to sorting the array of objects, we do not have any OOB method which can serve our purpose. for this, we have to write our small custom logic within the sort method let  fruits :   any []  =  [{ Name :   ' Banana '  }, { Name :   ' Orange '  },  { Name :   ' Appl...

Hi Friends, Today I will talk about the most useful VS Code extensions, that will help in the productivity of specifically SharePoint Framework projects. As a developer, we waste a lot of time in the tasks that could be done easily via extensions support or shortcut keys. In this blog post, I will discuss some of these extensions that will increase the productivity and the style of your code. With an increase in productivity, the styling also holds an important value as it makes the code more readable and understandable which increases the focus time. So let's dive then !! VS Code Extensions !! Debugger for Chrome:  A very important extension if you are a SharePoint online developer (developing SharePoint framework components) then it is a must to have this extension. This extension helps in debugging the SharePoint Framework components just as we used to do in the C# server-side coding. For details on how to configure, you ca...

Issue: Whenever you are making query to the SharePoint online using the REST API and your query is based on the time stamp, remember that SharePoint treat your time as the GMT timezone. So if you want to fetch information based on local time zone which we usually do, always set the offset and also include the daylight saving. The same is true even you are trying to put in some data to the SharePoint. You will be saving the local timezone but SharePoint will consider it as GMT time zone , and there you won’t be able to save/retrieve the correct records based on the time zone. Solution Solution is simple. SharePoint Framework webpart/extension offers this capability OOB, but there were no articles i was able to find. // will get the final offset in minutes    let finalOffset : number = this . context . pageContext . web . timeZoneInfo . offset + this . context . pageContext . web . timeZoneInfo . daylightOffset    // Now set th...

Hi friends, By default when you create a full width layout we can have only 2 web part by default Image WebPart Hero WebPart So it becomes very difficult if you are creating some webpart which needs to be shown as a full width webpart..  Now the good news is that , it is now possible to show your custom control creating in SharePoint Framework to be shown on the full width. With just minor changes you can achieve this. Open your webpart's manifest file and add the property " supportsFullBleed: true ". This property will allow the webpart to be shown as an option in the full width. Below is the config file where change needs to be made As shown in the image below the webpart is shown as an option. Happy Coding - Sumit Kanchan

Hi Friends, Today i will be discussing about the certificate issue when we run the gulp command and try to run the SharePoint Framework Solution in local workbench. Issue: Warning - [spfx-serve] When serving in HTTPS mode, a PFX cert path or a cert path and a key path must be provided, or a dev certificate must be generated and trusted. If a SSL certificate isn't provided, a default, self-signed certificate will be used. Expect browser security warnings . If you read the issue , the issue is that it does not find the certificate that shows trust in the URL you are accessing, because of which you see the following message on the screen. Solution: So here is the simple solution and you won’t experience this issue any more. In your solution open the node command prompt. If you are working in Visual code then open the solution and then press the ~ + Cntrl . Now follow the 2 steps: Execute the command gulp trust-dev-cert Click Y...

Hi Friends, the very common thing that we miss while coding SharePoint Framework solution is the debugging functionality like we use to did in the C# coding using Visual Studio. But now you can debug you code in the same way you use to do earlier using visual studio code. Yes, and it is pretty easy and you can have all the functionalities that you use to have.To debug you code just follow the below steps. Adding Extension for debugging. The first thing you need to do if the Add the extension in your visual code “ Debugger for Chrome ”. Using this extension then you can debug your code using the Chrome browser. For now we have only the chrome extension available but we may see more browsers coming up with the options. To add the extension click on the Extensions in the menu pane on the left or press Ctrl + Shift + X. Then search for the extension with the name “Debugger for Chrome” and then install it. After the extension is installed there are some configur...