SharePoint Widgets

Hi Friends, When we are developing any webpart we get the webpart icon as a page icon by default. So, here is the way how we can change this icon that suits the ultimate purpose of the webpart. To change open the manifest.json found inside the your webpart folder Edit the file and under the " OfficeFabricIconFontName " you can enter the icon name you want to display. You can find the icon names from the below URL:  https://dev.office.com/fabric#/styles/icons OR Below is the list you can choose from Add AddGroup AlignCenter AlignLeft AlignRight Attach Back BackToWindow BlowingSnow Bold BulletedList Calendar Camera Cancel Chart CheckMark ChevronLeft ChevronRight CirclePlus Clear ClearFormatting ClearNight CloudWeather Cloudy Completed CompletedSolid Delete DocLibrary Duststorm Edit EditMirrored Embed Emoji2 ExcelLogo FacebookLogo FavoriteStar FavoriteStarFill Filter Financial Fog Folder FolderOpen Font FontStyleSerif

With the communication site Microsoft has release a HERO webpart. This is the intuitive webpart and is can showcase anything from image to document to link. This looks awesome with the communication site as on the communication site you can add the webpart as a Full-width column layout. Against this layout one can add only the image or a HERO webpart. To add the webpart: ·          Click on select link button, to choose the image, page or document ·          Then popup window will get open select the item you want to display and click “Open” ·          Now you can edit the individual item with lots of options: ·          There are multiple layouts to choose from:   

 Hi Friends, SharePoint Framework Image Gallery webpart will allow you to create a image gallery with lot of options. These are beautiful galleries options with responsiveness and configurations. In this webpart, there are 3 types of gallery views, which will help you in desiging your SharePoint page more attractive and more meaningful Check the code here Gallery Views Lightbox Layout Carousel layout List Layout Features..!! Add Captions to the images Create redirect links with any view Add description to the List layout for more information Choose source from the current site or any other site Option to choose from multiple document libraries Option to choose from the number of images Option to choose from the auto-rotation and the duration in the carousel layout Option to choose from number of images in a row, set as per your area Lightbox Layout Screen This layout is a flexible layout where multiple images can be displayed in a small area. You have the option to choose the number of

Hi Friends, today I am writing this post as many of new coders who have started recently on REST API's feel trouble some in creating REST queries. So, I am here with the very basic tool in which can be very helpful in creating the REST queries. This tool is just a plugin to the Chrome browser and free of cost. It is YARC To use it first you need to login to your SharePoint Online portal, then click on the icon on the right hand side of the browser Then you'll need to just enter the url of the REST API and go ahead with the testing of your query You can also visit my npm page to see all the NPM packages Or You can visit my GitHub page to see many source code that might be of your use Do give your comments. Happy Coding 👍

Hi, we are all now in the new world of SharePoint i.e.. SharePoint Framework, and Microsoft had changed a lot from its predecessor. In this blog I will tell you about the most basic commands that you might need in day to day operations. Below are some of the commands, that I found to be useful: npm -v: This is to know the version of the npm and to check if the npm is installed on your machine node -v: This command tells the version of the node.js and to check if the node is installed on your machine npm outdated: Tells you which installed packages are outdated with respect to what is current in the npm registry but allowable by the version definition in your package.json npm prune: Removes packages not depended on by your project according to your package.json npm list:   Lists all installed packages npm install <package>: Installs the npm package npm install: Installs all the dependencies mentioned in package.json npm uninstall <package>:  Unins