SharePoint Framework (SPFx) Tab Control (react)

Hi Friends,

This time I have worked upon a tab control which is still missing from Microsoft sample collection. I personally felt this tab control webpart can be of use in many scenarios.


I have used the Rich Text editor for the implementation, where whenever a new tab is added , the text editor automatically gets associated with the tab. Since it is the rich text editor so you can do almost everything you want to display with all the custom formatting options available.

Source Code on GitHub

Features !

  • No configuration for the webpart to use
  • Safe and fast as there is no external saving of data
  • Rich Text editor increases lot of possibilities how you use it
  • Light weight control

Installation

$ npm install
$ gulp clean
$ gulp bundle --ship
$ gulp package-solution --ship

Below are some of the images that demonstrates the webpart.


View Mode

SharePoint Framework (SPFx) Tab Control (react)

Edit Mode

SharePoint Framework (SPFx) Tab Control (react)

Please provide your comments , if you need any more feature or how you like the control.

Happy Coding
Sumit Kanchan
#SharePointWidgets #SharePointFramework



Comments

  1. shahJuly 16, 2020 at 2:11 PM

    Hi, is it possible to change the control to use React Boostrap Tab?

    ReplyDelete
    Replies
    1. Sumit KanchanJuly 17, 2020 at 1:42 PM

      Yes of course you can do, but there might be change in some code for it to be fully functional

      Delete
    2. shahAugust 26, 2020 at 8:46 PM

      i tried to change the rich text to use pnp spfx controls rich text instead of react-rte, but it seems like its not working at all. can you specify which part of the code that require to be change? Thanks :)

      Delete
    3. Sumit KanchanAugust 31, 2020 at 8:48 PM

      I will get on this to you in couple of day as I need to look into the code again

      Delete
    4. Sumit KanchanSeptember 1, 2020 at 3:30 PM

      Hi Shah,

      Please replace the RichTextEditor control with the one you want to use and pass on the corresponding parameters as per your control. in tab.tsx file

      Delete
  2. LukeAugust 26, 2020 at 11:27 AM

    hi, your web part is working really well. however, i realized that the web part wont work in IE. Is there any configurations need to be done?

    And is it possible to use pnp spfx controls rich text editor?

    ReplyDelete
    Replies
    1. Sumit KanchanAugust 31, 2020 at 8:46 PM

      Hi Luke, SPFx has issues while using the IE, I have not checked with IE, i'll have a look and then will let you know if something can be done

      Delete
    2. PrasadOctober 20, 2021 at 6:53 PM

      Hi Sumit,

      Web part is working really well, but I need nested tabs, can I change the code?

      Delete
  3. AnonymousFebruary 16, 2021 at 7:08 PM

    Hello, any progress with the IE issue?

    ReplyDelete

Post a Comment

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Image
Hi Friends, Today blog is about renaming the folder in the document library using the MS FLOW or MS Power Automate. When I started working on this it seems to be an easy job, but if you look into the connectors you'll find it really difficult as there is no straight forwards connector to do the job. Issues encountered If you try using the " Get Folder Metadata " connector, you'll not be able to get the ID of the folder as it is returning as the negative value. If you get the ID somehow and try to update the folder name using the " Update File Properties " connector, you'll end up renaming only the title of the folder, but it will still have the old name as the display name which in case is again a failure. There is no other connector which can be utilized to achieve the task of renaming the folder in a document library directly. Solution The solution is a simple three-step (at least in this example). Step 1: Initialize variables In case you are computing...
Read more

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

Image
  Q. How to add "New Line", while adding the text to the SharePoint multiline text field?  A . In order to add the new line while adding a text to the multiline SharePoint field, I will demonstrate the simplest approach. Although you can find multiple approaches, but this one seems to be very easy and quick. You need to append the below expression to the text to make it to the new line: decodeUriComponent('%0A') If you are adding any array, then join the array using this expression or if you are building this string, then append this expression to the string. Step 1:  Add a variable and add the below expression (Write the code under the Expression tab) STEP 2: This is how your variable will look like      STEP 3: Output of the Address columns which is of Type Multiline text field Happy Coding..!! #Microsft #SharePointWidgets #PowerAutomate
Read more

Power Automate: Rename file in SharePoint Online

Image
  We often get to change the name of the file, so in this article, I will explain how to rename the file in SharePoint Online using Microsoft Power Automate. Below is the file which I will be renaming. Step 1: Get the file properties We only need to have the SharePoint item id, for which we want to rename the file Step 2: Update the File Name Add the "Send an HTTP request to SharePoint" connector, and update the following properties Method : POST Uri : _api/web/lists/GetByTitle(' <LIBRARY TITLE> ')/items( <ITEM ID> )/ValidateUpdateListItem Body: {     "formValues" :[         {             "FieldName" : "FileLeafRef" ,             "FieldValue" : "<New File Name>"         }     ] } Execute the flow, and the file will be renamed Happy Automating..!! #PowerAutomate #SharePointWidgets #Microsoft
Read more