Skip to main content

Posts

SPFX how to make webpart full width support

 In SPFX, full width webpart support by modern site SitePage or Pages. Communication Site, Team Sites are supported. In our webpart solution, Go to manifest.json file add an attribute/property called "supportsFullBleed":true After that, Go to your page or site page Add new section (plus icon), select fullwidth layout then your webpart show over there since in your webpart solution you have added "supportsFullBleed" as true.

SPFX how to do provisioning or how to create site columns, site content types through code

Firstly, Provision the site meaning we want to provision the site columns, content types, List everything through our app. Now using SPFx, we will be creating site columns, content types, list instances through our XML. After creating the webpartscaffold using yo @microsoft/sharepoint. Step: In this demonstration, we won't work with webparts at all, but we will be working with XML files. Create a folder called sharepoint under your webpart root folder. under sharepoint folder, create an assets folder under assets folder create an elements.xml file and schema.xml file. Step:  Now we are going to create site columns, content type and a list instance. Elements.xml file:  In elements.xml file we are going to create fields with Field tag. https://tejasadventure.blogspot.com/2021/07/spfx-provisioning-elementsxml.html Create GUID for FieldRef ID represents GUID. GUID can be created by the user itself or we can generate it by VS Code. example: press cntrl shift p -> insert guid-...

SPFX provisioning package-solution.json

First go to this article to understand better https://tejasadventure.blogspot.com/2021/07/spfx-provisioning-elementsxml.html   CODE   {    "$schema" :  "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json" ,    "solution" : {      "name" :  "provisionassetsdemo-client-side-solution" ,      "id" :  "2f1c1ccf-1db7-41b1-b790-f6d9dc3fb5d4" ,      "version" :  "1.0.0.0" ,      "includeClientSideAssets" :  true ,      "isDomainIsolated" :  false ,      "features" : [{        "title" : "Provision Assets" ,        "description" :  "Provision Assets" ,        "id" : "cab9963d-1be6-4832-95fc-3e40ef7c729c" ,        "version" :  "2.0.0.0" , ...

SPFX provisioning schema.xml

First go to this article to understand better https://tejasadventure.blogspot.com/2021/07/spfx-provisioning-elementsxml.html   <List   xmlns:ows = "Microsoft SharePoint"   Title = "Basic List"   EnableContentTypes = "TRUE"   FolderCreation = "FALSE"   Direction = "$Resources:Direction;"   Url = "Lists/Basic List"   BaseType = "0"   xmlns = "http://schemas.microsoft.com/sharepoint/" >    <MetaData>      <ContentTypes>        <ContentTypeRef   ID = "0x0100F132E371DCCF4A8E9D08D47E54214C32"   />      </ContentTypes>      <Fields></Fields>      <Views>        <View   BaseViewID = "1"   Type = "HTML"   WebPartZoneID = "Main"   DisplayName = "$Resources:core,objectiv_schema_mwsidcamlidC24;"   DefaultVie...

SPFX provisioning elements.xml

First go to this article to understand better https://tejasadventure.blogspot.com/2021/07/spfx-provisioning-elementsxml.html    <?xml  version = "1.0"  encoding = "utf-8" ?> <Elements   xmlns = "http://schemas.microsoft.com/sharepoint/" >    <Field   ID = "{53A51AF9-70D2-4731-A815-B038A56CFC3D}"    Name = "SoftwareName"    Group = "CustomDemoGroup"    Type = "Text"    Hidden = "FALSE"    DisplayName = "SoftwareName"   />    <Field   ID = "{287F71C5-026D-42B2-9FB8-5DB35A69ACF3}"    Name = "SoftwareVersion"    Group = "CustomDemoGroup"    Type = "Text"    Hidden = "FALSE"    DisplayName = "SoftwareVersion"   />    <Field   ID = "{86BFF556-D9B5-45CE-8187-E523DEB6F5A5}"    Name = "SoftwareDescription"    Group = "CustomDemoGroup"    Type = "Text"  ...

SPFX PnP JS

In our previous demo,  https://tejasadventure.blogspot.com/2021/07/spfx-crud-operation-using-no-javascript.html We observed how to implement CRUD operations using SPHttpClient library using no javascript framework (Using JQuery) and Rest Full services of Create, Read, Update, Delete and Read All Items. Using SP REST full services using SPHttpClient - little bit coding is tricky. Microsoft has simplified the whole process using PnP Js. Once we have handy in understanding the code, it is very easy to implement PnP js always for SPFX. Let get started. 1. First we need to install "npm shrinkwrap" It will ensure wrap, shirnk and lock our dependencies. Also the version of the depedencies.  2. We need to save the PnP js using the below command for our webpart project. npm install sp-pnp-js --save 3. first in code, we need to import sp pnp js. import   *   as   pnp   from   'sp-pnp-js' ; 4. to add list item. pnp.sp.web.lists.getByTitle('YourList...

SPFX CRUD operation code using pnp JS

Implemented Site URL: https://mercedessaga.sharepoint.com/sites/teja_dev/SitePages/SPFX-CRUD-operation-using-PnP-Js.aspx CODE import  {  Version  }  from   '@microsoft/sp-core-library' ; import  {    IPropertyPaneConfiguration ,    PropertyPaneTextField }  from   '@microsoft/sp-property-pane' ; import  {  BaseClientSideWebPart  }  from   '@microsoft/sp-webpart-base' ; import  {  escape  }  from   '@microsoft/sp-lodash-subset' ; import   styles   from   './SppnpcruddemoWebPart.module.scss' ; import   *   as   strings   from   'SppnpcruddemoWebPartStrings' ; import   *   as   pnp   from   'sp-pnp-js' ; export   interface   ISppnpcruddemoWebPartProps  {    description :  string ; } export   default   class   SppnpcruddemoWebPart   extends   BaseClientSideWebPart ...