This is the first post of three that explain how to add dependent properties to Client Web Part Property Pane. As an example of such properties I decided to use Lists dropdown and Views dropdown. Views dropdown is populated based on selected List. As a result of these three posts we'll have a fully working web part with ability to select List View in Property Pane:
Here is a content of 3 posts:
SPFx. Client Web Part Property Pane Dependent Properties. Part I: Preparation. (current post)
In brief, you need to execute multiple command line operations:
Create a new directory in location you want:
Go to created directory:
"Scaffold" your project with Yeoman generator:
Select name, description and base framework for the web part (I'm not using any default framework in this example. I tried to select knockout but it was not compiling). Wait for a while until all the dependencies will be downloaded. Play with your Hello World web part using Gulp:
If you're developing on Mac you'll probably need to run
It will run local server and SharePoint workbench for testing your web parts locally.
In brief, we need to implement retrieving some mock data for local environment (when we test our web part on local server created by gulp serve) and retrieving SharePoint data.
We can use IWebPartContext.environment.type property to understand what data to retrieve.
I don't like the idea of putting all the logic into the web part class itself. That's why I propose to create mock data helper, SharePoint data helper and data helpers factory to created needed helper based on current environment.
First, let's create all base entities we'll use in our app. (I created a subfolder named common in web part folder and SPEntities.ts file in it.)
ISPList - represents SharePoint List object with Title and Id
ISPLists - represents SharePoint REST service response for /_api/web/lists service call
ISPView - represents SharePoint View object with Title, Id and ListId
ISPViews - represents SharePoint REST service response for /_api/web/lists('id')/views service call
Now we can start with data helpers. Let's create a separate subfolder for them and name it data-helpers. First of all, we need some base interface that can be used to abstract of current data helper. What methods do we need? Well, not so much: a method to get lists and a method to get views of the list. Let's create such interface in a file named DataHelperBase.ts
Now let's create a mock helper. We'll use some static data for test. The mock helper will be created in DataHelperMock.ts file.
Time to create SharePoint data helper. For this data helper we'll need a web part context and especially pageContext.web.absoluteUrl property that will be used to create a request url. Let's create a DataHelperSP.ts file and implement the helper there:
The final part is to create a data helper factory that will create a data helper based on current environment. Let's do it in a DataHelpersFactory.ts file.
That's it. We have everything we need to get information from mock store as well as from SharePoint. It means that it can be used on your local server or on workbench.aspx from your dev site collection. Let's test the results. In web part file add imports for factory, data helpers interface and base SP Entities:
Then, in render method add code to retrieve lists and views and log information to console:
And somewhere in console you'll find the results:
This is it for today. In the next post I'll describe how to create a custom field in a Property Pane that will use information from created data helpers and will dynamically update options in Views select when user selects a list. Have fun!