honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added sample.json, devcontainter

This commit is contained in:
Hugo Bernier 2022-09-06 00:01:04 -04:00
parent 4331b7163c
commit 223d5ed099
4 changed files with 170 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
samples/react-add-formcustomizer-to-list/.devcontainer/devcontainer.json Normal file
View File

@ -0,0 +1,39 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{
"name": "SPFx 1.15.0",
"image": "docker.io/m365pnp/spfx:1.15.0",
// Set *default* container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint"
],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [
4321,
35729
],
"portsAttributes": {
"4321": {
"protocol": "https",
"label": "Manifest",
"onAutoForward": "silent",
"requireLocalPort": true
},
// Not needed for SPFx>= 1.12.1
// "5432": {
// "protocol": "https",
// "label": "Workbench",
// "onAutoForward": "silent"
// },
"35729": {
"protocol": "https",
"label": "LiveReload",
"onAutoForward": "silent",
"requireLocalPort": true
}
},
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
"remoteUser": "node"
}

33
samples/react-add-formcustomizer-to-list/.devcontainer/spfx-startup.sh Normal file
View File

@ -0,0 +1,33 @@
echo
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
npm install
## commands to create dev certificate and copy it to the root folder of the project
echo
echo -e "\e[1;94mGenerating dev certificate\e[0m"
gulp trust-dev-cert
# Convert the generated PEM certificate to a CER certificate
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
# Copy the PEM ecrtificate for non-Windows hosts
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
## add *.cer to .gitignore to prevent certificates from being saved in repo
if ! grep -Fxq '*.cer' ./.gitignore
then
echo "# .CER Certificates" >> .gitignore
echo "*.cer" >> .gitignore
fi
## add *.pem to .gitignore to prevent certificates from being saved in repo
if ! grep -Fxq '*.pem' ./.gitignore
then
echo "# .PEM Certificates" >> .gitignore
echo "*.pem" >> .gitignore
fi
echo
echo -e "\e[1;92mReady!\e[0m"
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

55
samples/react-add-formcustomizer-to-list/README.md
View File

@ -1,13 +1,13 @@
# react-add-formcustomizer-to-list
# Add Form Customizer to List
A react based SPFx utility web part which will help admins/user(s) to associate and remove association of the list form customizer extension to a particular list.
A React based SPFx utility web part which will help admins/user(s) to associate and remove association of the list form customizer extension to a particular list.
With SPFx version 1.15.1, we can now create new type of Extension as Form customizer which allows use to associate custom forms to SharePoint List.
As of writing this webpart, this no direct way to associate this form customizer to SP list. We will have to either write PowerShell or Use REST API to associate it with the list.
As of writing this web part, this no direct way to associate this form customizer to SP list. We will have to either write PowerShell or Use REST API to associate it with the list.
This webpart serves as utility so the developers can use to associate single form customizer with multiple lists with control over option to associate New/Edit/View form seperately.
This web part serves as utility so the developers can use to associate single form customizer with multiple lists with control over option to associate New/Edit/View form separately.
Note - This webpart only serve to associate the Form customizer, so it is required that the actual SPFx Form Customizer solution is deployed and installed to targeted Site before association.
Note - This web part only serve to associate the Form customizer, so it is required that the actual SPFx Form Customizer solution is deployed and installed to targeted Site before association.
WebPart in Action
@ -16,13 +16,21 @@ Note - This webpart only serve to associate the Form customizer, so it is requir
### Highlights
* Option to Select Site->List->Content Type
* Option to choose asssociate either with one or more type of forms(New/Edit/View)
* Option to choose associate either with one or more type of forms(New/Edit/View)
* Option to remove association of form
* Associate single customizer with mutiple lists/forms
* Associate single customizer with multiple lists/forms
## Used SharePoint Framework Version
## Compatibility
![SPFx 1.15.0](https://img.shields.io/badge/SPFx-1.15.0-green.svg)
![Node.js v16 | v14 | v12](https://img.shields.io/badge/Node.js-v16%20%7C%20v14%20%7C%20v12-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
![1.15.0](https://img.shields.io/badge/version-1.15.0-green.svg)
## Applies to
@ -41,14 +49,19 @@ git clone the repo
npm i
gulp serve
```
- Execute the following gulp task to bundle your solution. This executes a release build of your project by using a dynamic label as the host URL for your assets. This URL is automatically updated based on your tenant CDN settings:
```bash
gulp bundle --ship
```
- Execute the following task to package your solution. This creates an updated `react-add-formcustomizer-to-list.sppkg` package on the `sharepoint/solution` folder.
```bash
gulp package-solution --ship
```
- Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant.
- Based on your tenant settings, if you would not have CDN enabled in your tenant, and the `includeClientSideAssets` setting would be true in the `package-solution.json`, the loading URL for the assets would be dynamically updated and pointing directly to the `ClientSideAssets` folder located in the app catalog site collection.
@ -59,18 +72,18 @@ gulp package-solution --ship
* Create new modern page. Add **react-add-formcustomizer-to-list** web part to page.
* Publish the page.
To do the association or removing the assoication , user needs to follow the below steps:
To do the association or removing the association , user needs to follow the below steps:
* Select the site from available sites
* Choose a list from the available options
* Choose the content type to which the form customizer needs to associate/remove association if its already associated
* User needs to grab client component id present in form customizer manifest json file (Information is added in the client component id section with image)
* User needs to grab client component id present in form customizer manifest `json` file (Information is added in the client component id section with image)
* Select the required check box option New Form/Edit Form/View Form
* After filling the required values, click on Associate/Remove Association button
* Once it is successful then go to respective list and check the forms
* Users can only associate/remove association of the form customizer to lists of the sites that they have access
You can copy the actual component ID of form customizer with from its manifest.json file.
You can copy the actual component ID of form customizer with from its `manifest.json` file.
## Solution
@ -82,8 +95,24 @@ react-add-formcustomizer-to-list | [Siddharth Vaghasia](https://www.linkedin.com
Version|Date|Comments
-------|----|--------
1.0.0|Septemeber 04, 2022|Initial release
1.0.0|September 04, 2022|Initial release
## Help
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-add-formcustomizer-to-list%22) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-add-formcustomizer-to-list) and see what the community is saying.
If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-add-formcustomizer-to-list&template=bug-report.yml&sample=react-add-formcustomizer-to-list&authors=@siddharth-vaghasia&title=react-add-formcustomizer-to-list%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-add-formcustomizer-to-list&template=question.yml&sample=react-add-formcustomizer-to-list&authors=@siddharth-vaghasia&title=react-add-formcustomizer-to-list%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-add-formcustomizer-to-list&template=suggestion.yml&sample=react-add-formcustomizer-to-list&authors=@siddharth-vaghasia&title=react-add-formcustomizer-to-list%20-%20).
## Disclaimer

56
samples/react-add-formcustomizer-to-list/assets/sample.json Normal file
View File

@ -0,0 +1,56 @@
[
{
"name": "pnp-sp-dev-spfx-web-parts-react-add-formcustomizer-to-list",
"source": "pnp",
"title": "Add Form Customizer to List",
"shortDescription": "A React based SPFx utility web part which will help admins/user(s) to associate and remove association of the list form customizer extension to a particular list.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-formcustomizer-to-list",
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-formcustomizer-to-list",
"longDescription": [
"A react based SPFx utility web part which will help admins/user(s) to associate and remove association of the list form customizer extension to a particular list."
],
"creationDateTime": "2022-09-05",
"updateDateTime": "2022-09-05",
"products": [
"SharePoint"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.14"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-add-formcustomizer-to-list/assets/YOUR-IMAGE-NAME-HERE",
"alt": "Web Part Preview"
},
// {
// "type": "video",
// "order": 101,
// "url": "https://www.youtube.com/embed/FS-_0KENJkI",
// "alt": "Community demo of the web part"
// }
],
"authors": [
{
"gitHubAccount": "siddharth-vaghasia",
"pictureUrl": "https://github.com/siddharth-vaghasia.png",
"name": "Siddharth Vaghasia"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]