Know More

Introduction   Hi friends, this blog post will guide you through the usage of  Context API  which is one of the new features introduced in the latest version of React   in SPFx projects .  What is React Context and When to use it In a normal React application, the properties are passed top-down from parent to child and then to the grandchild via props. It works great in simple react applications, but this will be very tedious for complex applications.  Context  provides us an easy way to share the props without having them pass through all the intermediate components.  Context  should be primarily used when the properties must be accessible by many components at different nesting levels. We must apply it with cautious because sometimes it makes the reuse of the components more difficult. How can we use it in SPFx?   I hope many of you are aware of the SPFx development model, where we might need to pass the properties that are captured ...

Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx. Using DateTime control PropertyFieldCollectionData Property Pane Control Using FilePicker and FileTypeIcon control Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data  --> You are here In this post, I am gonna show you how we can use  DetailsList   from  UI Fabric  and  PropertyFieldCodeEditor  property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the ' CSV ' data in the DetailsList. Regarding the creation of the basic project stuff, please refer to the  blog post . I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work. Used  S...

Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx. Using DateTime control PropertyFieldCollectionData Property Pane Control Using FilePicker and FileTypeIcon control Office UI Fabric react DetailsList &  PropertyFieldCodeEditor to show the JSON data --> You are here Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data In this post, I am gonna show you how we can use  DetailsList   from UI Fabric and PropertyFieldCodeEditor  property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the ' JSON ' data in the DetailsList. Regarding the creation of the basic project stuff, please refer to the  blog post . I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work. Used  SharePoint Yeoman...

Hi Friends, today I am gonna show you one of the SPFx components developed by me. I hope, all the SharePoint users and developers are aware of the comment box in the modern page. The comments are tied to the page and are stored as metadata to the page. There are some features like a reply to the comment, likes etc., But there are some features missing in the comment box which may be required for the customers. One of my clients had asked for the feature of uploading files to the comment box. Based on the above use case and with many features, I took an initiative to develop an advanced comment box that can be used by switching off the out-of-box comment box. The custom comment box can be added to a page and once it is saved as a template, based on the template the page created will inherit the comment box. All the comments are stored in a separate list with the ' Page Title ' and ' Page URL ' as a key to the page comments. The component was developed using SPFx v...

Hi Friends, today I would like to introduce you to the new Performance tool available for SharePoint online. This is a great tool which helps us to measure different aspects to optimize or normalize our development mode to provide a 100% quality to the custom development that we made on SharePoint. The most important is that it is available as Chrome Extension which makes easier for developers to use to analyze the page before publishing it to the end user. The tool can be used to measure the following How fast pages load How many round trips required per page Issues with the service Other things that cause performance degradation This is to give a small introduction about the tool and what it delivers. Detailed information of the tool can be found in the following link. Page Diagnostic Tool for SharePoint Online Cheers…

In this post, we will see the FAQ Add-in which is published to SharePoint App Store. The FAQ (Frequently Asked Questions) plays a pivotal role in all the organization to support different levels of users with daily operations, protocols, policies and others. This FAQ add-in is to support the Organization’s using SharePoint as a primary or secondary platform. The add-in uses the default SharePoint authentication and authorization. The questions and answers lists can be stored either in App Web or Host Web. Bodacious add-in features: Easy configurations for the SharePoint administrators. Separate administrator dashboard is available for the configuration and maintenance of the FAQ. Configure where your content is stored either in App Web or Host Web. Autocomplete search for Questions. The answers to the questions can be Enhanced Rich HTML Content. Categorized search for Questions and Answers. Most popular and latest questions on the Dashboard. Copy link to the Q&A to ...

Hi Friends, today lets talk about the ‘Chrome Control’ in SharePoint Add-in. I hope you all aware of the name change that Microsoft had brought for SharePoint Apps which is now represented as ‘Add-In’. Don’t be scared about the control, this is nothing but the SharePoint Bar which is termed as Chrome Control. Whether it is SharePoint on-premise or SharePoint online the SharePoint Bar will have some links, settings icon, help icon. Also, the app site will have the ribbon control with the link to the parent site and other stuff. This best part of the chrome control is the client-side rendering where it is rendered based on the options and the use of ‘SP.UI.Controls’ js file which we will see later in this post. By default, when you create a SharePoint Hosted Add-in the default.aspx it will inherit from the ‘default.master’ which has the chrome control added. There are so many ways in which SharePoint Add-in can be developed and it is not mandatory that .aspx file should be the start pa...