spfx provisioning

Deploy files like image,js,css,html and aspx files using Module in SPFX.

1.       Add elements.xml file Inside assets folder  under SharePoint and below xml inside elements.xml file

2.  <?xml version="1.0" encoding="utf-8"?>

3.  <Elements xmlns="http://schemas.microsoft.com/sharepoint/">

4.   

5.     <!-- Upload files to the SPFxDocumentLibrary -->

6.      <Module Name="Files" Url="Doc">

7.          <!-- ISSUE: For some reason `gulp package-solution` breaks the .jpg, .png images.

8.           Workaround is to open the .sppkg with winrar and add the images manually. -->

9.          <File Path="10.jpg" Url="NewFolder/10.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

10.         </File>

11.         <File Path="3.jpg" Url="NewFolder/3.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

12.         </File>

13.         <File Path="4.jpg" Url="NewFolder/4.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

14.         </File>

15.         <File Path="5.jpg" Url="NewFolder/5.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

16.         </File>

17.         <File Path="6.jpg" Url="NewFolder/6.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

18.         </File>

19.         <File Path="11.jpg" Url="CustomFolder/11.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE">

20.         </File>

21.     </Module>

22. </Elements>

23.  

2.  Add files or images inside Assetes folder

3. Open  package-solution.json file and add features inside json properties .

{

  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",

  "solution": {

    "name": "spfx-solution-client-side-solution",

    "id": "ac493257-69d8-4c9e-a712-063b9afeba56",

    "version": "1.0.0.4",

    "features": [{

      "title": "spfx-solution-client-side-solution",

      "description": "spfx-solution-client-side-solution",

      "id": "94017C10-F387-43A6-9736-F50CFE8663EF",

      "version": "1.0.0.4",

      "assets": {

        "elementManifests": [

          "elements.xml"

        ],

        "elementFiles":[

          "10.JPG",

          "11.JPG",

          "3.JPG",

          "4.JPG",

          "5.JPG",

          "6.JPG"

        ]

      }

    }],

    "includeClientSideAssets": true,

    "isDomainIsolated": false

  },

  "paths": {

    "zippedPackage": "solution/spfx-solution.sppkg"

  }

}

4. Run the command gulp bundle --ship

5. Run the command gulp package-solution --ship

6. Deploy solution in app catalog

7. add app on site

8. check the library where your assets has been added

upload file in document library using pnp and spfx

How to upload file in document library using pnp in SharePoint framework

private UploadFile():void

{

    // to find file uploader control by element id

    let input = <HTMLInputElement>document.getElementById("thefileinput");

    let file = input.files[0];

   if (file.size <= 10485760)

   {

    //upload small file in document library

    pnp.sp.web.getFolderByServerRelativeUrl("/sites/apps/TestDoc").files.add(file.name,file,true).then(f=>

    {

      // use below to update the properties of document

        f.file.getItem().then(item =>{

          item.update({

            FirstName:'test001',

            LastName:'test',

            Age:50

          }).then(f=>{

            alert("File uploaded successfully"+f.data["odata.etag"]);

          });

        });

    });

  }

  else

  {

    //upload large file in document library

      pnp.sp.web.getFolderByServerRelativeUrl("/sites/apps/TestDoc").files.addChunked(file.name,file,data =>

      {

         console.log({ data: data, message: "progress" });

      }, true).then(f=>

      {

              alert("File uploaded successfully"+f.data["odata.etag"]);  

      });

    }

}

Bind dropdown list in property pane spfx

Prerequisite:

Make sure installation of spfx is already done and we are using pnp to access the SharePoint lists from current site so make sure pnp is also installed.

How to bind property pane Dropdown list in Client side webpart in SharePoint Framework.

We have a scenario suppose that we have to bind a dropdown list with current site’ s lists/libraries.

 Just need to follow below instruction step by step  

1.       Create a Solution  .

2.       Add a Webpart to the solution.

3.       Declare the property pane  “PropertyPaneDropdown” for dropdown list.

import {

  BaseClientSideWebPart,

  IPropertyPaneConfiguration,

  PropertyPaneDropdown,

} from '@microsoft/sp-webpart-base';

4.       Come to the property pane under “getPropertyPaneConfiguration”.

5.       Define your own group of property pane or leave  the default and add under existing group fields.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [

        {

          header: {

            description: strings.PropertyPaneDescription

          },

          groups: [

            {

              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneDropdown('dropdownLists', {

                  label: "Lists",

                  options:this._dropdownOptions,

                  disabled:this.listsDropdownDisabled

                })

              ]

            }

          ]

        }

      ]

    };

  }

6.       Declare Interface “IPropertyPaneDropdownOption”  and “IODataList” to map the dropdown list with the list

                  

                        export interface IPropertyPaneDropdownOption

{

  key:string;

text:string;

}

export interface IODataList

{

  Id:string;

 Title:string;

}

7.       Define two variables for dropdown option and to disable the dropdown while lists loading just below the .

      

export default class HellowWebpartWebPart extends BaseClientSideWebPart<IHellowWebpartWebPartProps> {

         private _dropdownOptions: IPropertyPaneDropdownOption[];

  private listsDropdownDisabled: boolean = true;

8.       Now override the existing method onPropertyPaneConfigurationStart() and paste the below code

protected onPropertyPaneConfigurationStart(): void

  {

    //Bind DropDown List in Peropert pane

    this.listsDropdownDisabled = !this._dropdownOptions;

    if (this._dropdownOptions)

    {

      return;

    }

      this.context.statusRenderer.displayLoadingIndicator(this.domElement, '_dropdownOptions');

      pnp.sp.web.lists.get()

      .then((listOptions: IODataList[]): void =>

      {

          var options: Array<IPropertyPaneDropdownOption> = new Array<IPropertyPaneDropdownOption>();

          listOptions.map((list: IODataList) => {

          options.push( { key: list.Id, text: list.Title });

      });

        this._dropdownOptions=options

        this.listsDropdownDisabled = false;

        this.context.propertyPane.refresh();

        this.context.statusRenderer.clearLoadingIndicator(this.domElement);

        this.render();

      });

  }

9.       Start terminal and run gulp bundle

10.   Now run the gulp serve –nobrowser command in terminal

11.   Open workbench on the site open direct link https://tenant.sharepoint.com/sites/demo/_layouts/15/workbench.aspx

12.   Add client side webpart on the bench.

13.   Click on Edit properties

14.   You see on  right side in properties will be dropdown list bind with current site’s lists/libraries

Happy coding  !!!