Manage Components Using Features in SPFx

 

Welcome to the first post of the SharePoint Series, this one is for people who are initiating in the SPFx world, the purpose is to help people to create better solutions for specific scenarios.

 

When you create a solution in SPFx you answer some questions regarding the kind of solution you want and the kind of component, but also there are some other important questions like if you want a wide deployment of this solution, it means that the user do not need to install the app on each site they want to use the components it contains. A good example when you answer the question Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? to No is when the solution contains specific components that they won’t be shared with other sites or they need specific things to work like lists, fields, pages, etc.

For getting a clean solution to keep components like webparts in an features and extension in another one, like we used to have in farm solutions. This is helpful because sometimes you need to disable a specific functionality in the site and features are the best way to do it, you don’t need to uninstall anything and they are enabled with a simple feature.

To achieve feature deployment properly you need to create a feature in the package-solution.json file, associate the component ids to the feature, set a proper name and description and that’s it. Next time you deploy your solution and you want to disable the components it contains, you only need to go to the feature and disable it.

 

 

Create feature and associate components

 

Create a new GUID, open PowerShell and type [System.Guid]::NewGuid(), it will generate a new GUID, copy and in the package-solution.json inside the solution property, add the following:

Note: You can use the intellisense in VS Code to help you to add and explore more properties in this file.

"features": [
]

Inside this section you can add features as much as needed, add the first feature inside this new property.

Note: Id comes from the new one we created in PowerShell, it needs to be unique.

{
    "id": "e829796c-7cf2-454f-b990-c4b7872d57de",
    "title": "My Webparts",
    "description": "It contains only webparts for my solution",
    "componentIds": [
    ]
} 

Now we have the feature created, the only thing we need to do is to add inside the componentIds the ID of the components we want, we can find the ID in the manifest.json of each component you want. You will see something like this.

{ 
    "id": "e829796c-7cf2-454f-b990-c4b7872d57de",
    "title": "My Webparts",
    "description": "It contains only webparts for my solution",
    "componentIds": [
        "fb090101-fce4-43f1-b188-e5611fd0a499"
    ]
}

 

View of package-solution.json file.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "blog-post-client-side-solution",
    "id": "c803a9ee-5890-4c07-af65-b19580bc8308",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "developer": {
      "name": "",
      "websiteUrl": "",
      "privacyUrl": "",
      "termsOfUseUrl": "",
      "mpnId": ""
    },
    "features": [
      {
        "id": "e829796c-7cf2-454f-b990-c4b7872d57de",
        "title": "My Webparts",
        "description": "It contains only webparts for my solution",
        "componentIds": [
          "fb090101-fce4-43f1-b188-e5611fd0a499"
        ]
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/blog-post.sppkg"
  }
}

 

If your solution contains a lot of webparts and extensions, it automatically will create a feature for each one and you will see a lot of features, I think this is a fancy solution to manage the components in a better way.

I hope this helps you to create clean solutions and you can explore a little bit more about SPFx solutions.