SharePoint Framework Field Customizer project with multiple columns
SharePoint Framework is growing fast and is doing well.
With Field Customizer you can build an own rendering for columns in views like you used to build in CSR with JSLink.
So there is an guide by Microsoft how to migrating your CSR applications into SPFx applications. It makes sense using this guide, because the Modern UI does not support CSR. The only struggle I had: Some CSR applications are rendering more than one column.
So here is the topic of this post: How to build a SPFx Field Customizer Solution with multiple columns.
At first you should follow the guide linked above to setup your project with
yo @microsoft/sharepoint
Until you reach the step "What is your Field Customizer name?". It is important to be sure in naming. Changing the name later on is possible, but difficult - there are a lot of references to change.
So let's say you name it "column1".
Now you can continue the setup.
After finishing it you can open up the solution, and build your extension or add another Field Customizer - but how?
You can try your luck by copying some files and folders, but more easy is using Yeoman again. So type into your Poweshell yo @microsoft/sharepoint again.
Yeoman will know the setup you made and won't ask you for a solution again. Instead it will go directly into the component type step.
Selecting Extension and Field Customizer again will add all you need.
But be careful, the solution is not ready yet. The /sharepoint/assets/elemens.xml file was not updated by Yeoman!
You need to add a new field definition for your second Field Customizer. You can copy the Field node in the XML, but pay attention the Name and the ID are required to be unique!
After this you need to copy the ID of your second Field Customizer (found at /src/extensions/column2/Column2FieldCustomizer.manifest.json) and paste it into the ClientSiteComponentId property.
That's it, you're done with the setup. Now you need to write your code, build the solution, run it and enjoy!
With Field Customizer you can build an own rendering for columns in views like you used to build in CSR with JSLink.
So there is an guide by Microsoft how to migrating your CSR applications into SPFx applications. It makes sense using this guide, because the Modern UI does not support CSR. The only struggle I had: Some CSR applications are rendering more than one column.
So here is the topic of this post: How to build a SPFx Field Customizer Solution with multiple columns.
At first you should follow the guide linked above to setup your project with
yo @microsoft/sharepoint
Until you reach the step "What is your Field Customizer name?". It is important to be sure in naming. Changing the name later on is possible, but difficult - there are a lot of references to change.
So let's say you name it "column1".
Now you can continue the setup.
After finishing it you can open up the solution, and build your extension or add another Field Customizer - but how?
You can try your luck by copying some files and folders, but more easy is using Yeoman again. So type into your Poweshell yo @microsoft/sharepoint again.
Yeoman will know the setup you made and won't ask you for a solution again. Instead it will go directly into the component type step.
Selecting Extension and Field Customizer again will add all you need.
But be careful, the solution is not ready yet. The /sharepoint/assets/elemens.xml file was not updated by Yeoman!
You need to add a new field definition for your second Field Customizer. You can copy the Field node in the XML, but pay attention the Name and the ID are required to be unique!
After this you need to copy the ID of your second Field Customizer (found at /src/extensions/column2/Column2FieldCustomizer.manifest.json) and paste it into the ClientSiteComponentId property.
That's it, you're done with the setup. Now you need to write your code, build the solution, run it and enjoy!
Comments
Post a Comment