European Sharepoint 2013 Hosting Blog

Microsoft has recently released SPFx 1.15.1 Preview version adding a few new features and updates for building SPFx-based solutions. We can find full release notes at the link. One of the major and important features coming with this version is the ability for users to customize new, edit, and display forms of lists and libraries. This has been la ong asked-for and awaited feature which we now have a way to achieve using SPFx.

Please note that as this is still in preview, it involves some manual steps to test the customizer. Also as of today, applying the customizer to list or content type is still in progress and we are developers would only be able to test and debug this and cannot deploy to actually list.

In this article, we will go step by step on creating a Form customizer and then test it by the local debugging experience of SPFx.

Assuming you have already set up your SPFx environment, below are steps to be followed.

Step 1 – Install the latest preview version of SPFx

Step 2 – Create the targeted List

For the sake of simplicity, we will create a list with only two columns,

Title – Single Line of Text

Description – Multiple lines of Text 

Next, we will have to enable Content type, Go to list settings -> Advanced Settings -> Select Yes on “Allow management of content types?” and click on Save.

In this step, we will also have to copy the List content type which we will need later. Now on the list settings, we will see Item content type added. Click on Item and then copy the content type id from url.

Copy this ctype value from the query string and keep it handy to be used later.

Step 3 – Create Project

Next, we will go ahead and create the SPFx project. Go to the command prompt and create a folder of your choice. Run below command

We will be asked a series of questions, choose the below options and continue.

Select component type as Extension and then type of extension as Form Customizer, this is a new option that you will find with this new release.

Once successful, we should see below screen:

Replace this in all the serveConfigurations objects. Refer screenshot below.

Step 5 – Modify render Method

Next, we will modify React component which is responsible for showing control when the form customizer is loaded.

Go to src\extensions\firstCustomizer\components\FirstCustomizer.tsx

Modify the render method to below

Step 6 – Test the configuration

Go to command prompt again and run

It should open the browser with the below screen,

Click on Load Debug Scripts, if it loads correctly, we will see the below screen.

Step 7 – Modify Code to Create a new Entry in the SP list

Now that we know the configuration is correct we will modify the Form code to add input controls and buttons and logic to save data to SP list. For saving data to SP list we will use pnpjs.

Kill the gulp serve and run the below command to install a specific version of pnpjs

Please note we are using an older version of pnpjs for simplicity and reuse my old code 🙂

Once it is installed, let us modify Go to src\extensions\firstCustomizer\components\FirstCustomizer.tsx.

Add a few imports which we need to use.

Replace render method to add controls

Create a State interface to hold values from controls, you can add below where IFirstCustomizerProps is declared.

Add below line below state declaration 

Modify FirstFormCustomizer class to use State and then create a constructor

Add below 4 methods to handle the logic to save state, save in sp list, and reset controls

Explanation about code

• So here we are adding two controls Title and Description from the user and associating these controls with the state object to hold its value, onChange method on these controls takes care of saving the value to State.
• Then we have added two buttons – one to Save and create a new items and the Reset button to reset the values in controls.
• Create new item button click will call the method createNewItem which uses PNP js to save the data from state to create a new entry in list.
• If you would have noticed we have used this.props.context.list.title to target the list name, so here we are using the context object from FormCustomizer which gives us objects and context on which the form Customizer is running.
• There are 3 important attributes that would be important for developers to
  • this.props.displayMode –  this will help us identify if the form is in new, edit or display mode and we can use this to control our logic, please note as we are debugging using gulp serve for now this will always be new
  • this.props.context.list – this provides us the list object on which the form customizer is running. it has 3 attributes which are list title, list GUID and list server relative url.
  • this.props.context.itemId – this will provides us itemId on which current form is opened, this will be applicable when displayMode would be “Edit” or “Display”

Step 8 – Test the latest code

Run gulp serve again and click on Load debug script on the browser once opened

We should see the below output

Enter some value in Title and Description and click on Create new item

Go to the list and see a new entry is created

This will conclude our First Demo on Form customizer with SPFx, you can refer to the source code at this repo. We’re waiting for the release of the new feature when we will be able to assoicate this with actual Lists. It will be interesting to see how this will work out and the experience when user clicks on New Item, Edit Item, etc…

Introduction

When working with SPFx projects, often time we might think of following questions

• How do I share the source code with other team members?
• What are the files to be checked into the source control repository like GitHub, Azure DevOps etc.

When working on .Net projects it is easy to share solutions and packages. The required binaries will be created in debug/bin or release folder, and source code can be zipped and shared with team or source code can be checked in Git repository. But the dependency is the user who is consuming this application should have .Net runtime installed (mostly available on all Windows OS and needs to be installed on other OS such as Linux) and to test and debug the application Visual studio needs to be installed.

Since SPFx (SharePoint Framework) is cross-platform developer environment, the run time will be provided by the NodeJS. Users who are working with the SPFx should have their machines installed with NodeJS application which provides runtime and required files for successful development, testing and packaging the solution. Please refer to the references section for installing node using NVM (node version manager) that has details.

SPFx Folder Structure

Let’s try to understand the basic SPFx folder structure that gets created. In this article, I have taken the folder structure for Application Customizer. A similar folder structure gets created for other SPFx project types.

Folder	Purpose	Image
src	The main repository for your application, and starting point, is where you write code and initialize the components.
lib	Contains processed code, that gets created during compilation and transpilation
dist	This folder gets created during gulp serve and contains the javascript bundle and manifest. During the testing the local node server will be distributing the content to your application in SharePoint workbench from this folder.
config	Contains set of configuration files used by projects for various build tasks such as how the solution is packaged, and where the static assets and code is hosted.
node_modules	Contains all the run time packages and dependencies which is created as part of npm install.
release	Folder gets created during serve, bundle and package commands. This contains assets folder that contains files generated when bundle and packaging the solution.
sharepoint	Contains the solution folder that contains sppkg file which is final package that will be deployed to tenant-level or site level app catalog. This also contains assets folder which has details about whether tenant wise install or specific to few sites.
temp	This folder gets created during serve and is used by local node server during testing

For source control, the following folder can be omitted and checked into to source code repository.

• lib
• dist
• release
• temp
• node_modules

Please refer to article, code check-in using git commands that tells the steps to check in the code to source control.

Steps to run the SPFx solution

Once the solution is downloaded from source control or unzipped, one can test the solution in other environment by following steps

Step 1

Unzip the file if downloaded as zip. Go to the command prompt and run the following command.

npm install

Step 2

Test the solution by running following command to make sure there are no run time issues before packaging the solution

gulp serve

Allow the debug scripts.

If there are no issues, you should be getting an alert message similar to below one.

Step 3

Build the solution to make sure there are no compile time issues.

gulp build

Step 4

If needs to be bundled to install into different environment, then run below command

gulp bundle –ship

Step 5

To package the solution run the below command

gulp package-solution –ship

Step 6

Observe the folder structure, you could see that the following folders got created again in destination, even if they are omitted from the source.

• dist
• lib
• node_modules
• release
• temp