9

Yes, you can have multiple webparts or extensions in the same solution. Think of it as a Visual Studio solution with multiple projects (i.e one sln file and multiple dlls). To add a webpart/extension in the existing solution, you simply need to run the yeoman generator again. yo @microsoft/sharepoint - run this command in your current solution and the ...


8

TLDR; The short answer is no, the package doesn't contain all of the code from node_modules, yet it contains some very small amount of proven code (mostly css-loader code from corresponding webpack loader). Long answer SharePoint Framework uses webpack to bundle your code into a single file (aka package). Apart your code SharePoint Framework ...


8

Web parts allow you to create components that can be added by content editors as content on a page. Extensions add functionality to known areas of pages on an entire site or site collection, for example to add things in the header or footer of every page, or add menu options in a list toolbar. Extensions are often added by administrators. Both use the ...


7

No its not removed or deprecated. Its working correctly . Just upgraded a sample and was able to work with the this.context object without any issue. You need to ensure that you are using it inside the onInit() method because this event occurs after this.context is populated. If you are using it before the onInit method, it will be undefined. I have used ...


7

Using Properties in Your Extension The this.properties property of your extension are defined by the Interface you setup. By default, the interface gets defined in your main extension class file. For instance, in the jQuery-Field-ItemOrder FieldCustomizer sample the properties interface is defined in the ISpfxItemOrderFieldCustomizerProperties interface. ...


6

The correct answer is valid but it will not cover all the scenarios, if you need to detect the edit mode from an SPFx solution on a classic page the Mode=Edit will not be available. A more reliable solution would be to use the DisplayMode //Detect display mode on classic and modern pages pages if(Environment.type == EnvironmentType.ClassicSharePoint){ let ...


6

This is possible by associating FieldCustomizer to existing field. Field object has ClientSideComponentId property, which should be updated to match the identifier of the FieldCustomizer manifest ID. You can perform needed update to existing field(s) by using CSOM/REST. Same model also applies to ApplicationCustomizers, which are associated to ...


6

There is a Microsoft sample project on github that does exactly the same. Looking at their code, it does mention that there is currently no way to refresh just the list view and their solution seems to be reloading the entire page using location.reload();. If you look at the file SpfxCloneCommandSet.ts they mention that there is currently no way to reload ...


6

Disclaimer - I don't work for Microsoft and cannot officially speak on their behalf. However, I do work closely with the engineering team and am very familiar with SPFx and long term plans. SPFx solutions developed using included, generally available APIs will continue to work regardless of changes to SharePoint Online. Solutions made with any released ...


5

Batching the 2 requests as suggested by Venkat Konjeti is a great idea, but the question of how to delay your render until these are finished is demonstrated in the jquery-application-toastr sample (full disclosure, this is my sample). Specifically in the SpfxToastrApplicationCustomizer.ts file. In the webpart class there is a private promise property. This ...


5

It is pretty easy. Because you know which item is selected, you know url of the file. event.selectedRows[0] holds a lot of information about the selected item. Or you can use query string. @override public onExecute(event: IListViewCommandSetExecuteEventParameters): void { switch (event.itemId) { case 'COMMAND_1': { var folderUrl: string;...


5

The tutorials configure a library or folder in a Doc Lib as CDN because of the immense performance benefits that are gained once it is enabled. In our tenants, post enabling of CDNs, we saw a performance gain of upto 30-40% while fetching assets like CSS and JS files. This rendered the pages quickly for end users. It executed the JS files faster, painted ...


4

1) If you are adding jquery & bootstrap via CDN, no need to npm install them 2) bootstap components depend on jQuery. So, you need to first load jQuery and then bootstrap js. You can specify the loading order by globalDependencies attribute 3) You can then import these libraries in your files using the import statement. So, modify your config.json ...


4

SPFx has some utility classes to help you get the folder url. Its not available in pageContextInfo or any other page property. However, you can split it from the query string's Id parameter. Add the below import statement: import { Log, UrlQueryParameterCollection } from '@microsoft/sp-core-library'; And in your execution logic, use it as: @override ...


4

This is currrently a SPFx limitation. You cannot directly use Fabric UI Icons as command set icons in SPFx list extension. Currently SPFx extension allows you only 2 ways to set extension icon, 1) setting external image icon (which you are already using) 2) Use base-64 encoded image You create your own image or download the fabric UI image(s) and ...


3

Update: Based on this, numerous customization options are not supported in the modern list/library like jslink field and view customization, custom css via alternate css url, custom masterpages, custom js embedded via User custom action etc. The old approach where the command action would contain javascript like CommandAction="javascript:alert('My custom ...


3

theChrisKent's answer set me on the right track, but as I noted in my comment on his answer, I was really looking for something that could be used from a web interface (such as a client side webpart), without having to use PowerShell. And this is indeed possible using SharePoint's REST APIs: Field Customizer To associate a field with a particular field ...


3

When the modern page is in edit mode. you can find there will be query string added on the url Mode=Edit. if you remove that query string the page will go in read mode. you can get query string values in the spfx webparts. ex: https://tenant.sharepoint.com/sites/demosite1/SitePages/modernpage.aspx?Mode=Edit


3

Recently, SPFx extensions have moved from preview to RC. So, this has introduced some breaking changes for extensions. MS has deprecated onRefreshCommand method and suggested that you use the onListViewUpdated method. Reference - List view command set changes Since, it looks like you are just beginning to start working on SPFx extensions, I would suggest ...


3

To get the Share URL, you can use any of the 3 approaches mentioned below: Option 1 - using ServerRedirectedEmbedUrl You can make use the ServerRedirectedEmbedUrl to get the URL as below: event.selectedRows.getValueByName('ServerRedirectedEmbedUrl'); Option 2 - using ?web=1 query string parameter Another thing you can do is append the ?web=1 query ...


3

As you know, the officiel Theme Palette is quite limited concerning customization of your site. I've personally been using SharePoint Framework to customize it's appearing. When you make a SPFx Project, you can create an Application Customizer which will be able to execute JavaScript on every frontend page. In your project, you may know that you have SASS ...


3

You can use event.listItem.getValueByName("FileRef") to get the path of the document in library. This will give you a server relative URL of the file in the document library. If you want to have an anonymous link, then you can use event.listItem.getValueByName('.spItemUrl'). This will work for anonymous users.


3

It is not supported currently. The List View commandset extension currently supports RegistrationType="List" and RegistrationId="100" which is the list template ID. References - Command Set Extension: Ability to set RegistrationType="ContentType" and RegistrationId="0x01" UserVoice Link - Support RegistrationType "ContentType" in Command Set Extensions ...


3

You can use nvm (node version manager) to quickly switch between different nodejs versions. Download for windows or OSX version. How to use Install nvm $ nvm install 8.11.0 - installs nodejs version 8.11.0 $ nvm use 8.11.0 - now your system uses 8.11 version of nodejs. With that version you can run gulp serve without issues.


3

The problem you're having is that the loadCss method doesn't return a Promise or anything you can block on (in comparison loadScript does). So during runtime it starts to go get the css file and moves on to the next line right away. A workaround could be to use fetch to go get the file first, which returns a promise you can block on. The browser should ...


3

You are on the right track. Based on the code that you posted in the question, am assuming that you are using pnpjs. Using that, we can get the page properties as below: pnp.sp.web.lists.getById(this.context.pageContext.list.id.toString()) .items.getById(this.context.pageContext.listItem.id) .select("Footer1","Footer2","Footer3") .get() ...


3

It looks like a limitation of SPFx's feature framework's that you can't associate field customizer to existing OOTB fields. Reference - Highlighting which page is the welcome page in a site Having said that, you can associate Field Customizer extension to existing OOTB list columns or site columns by setting ClientSideComponentId property of column with ...


3

Try using below solutions: Solution 1: Use legacyPageContext to access the pageContext information: // This is how you can access the page context info this.context.pageContext.legacyPageContext; // Retreive current user display name this.context.pageContext.legacyPageContext["userDisplayName"]); Source: Access _spPageContextInfo details in SharePoint ...


2

The SPFx extensions are not yet ready for production use. But with the recent update to RC, you can play with them in the Developer tenants or First release tenants. If you have developer tenant, it should work there. Reference - Changes in SPFx extensions between Preview and RC


2

As Vesa suggested, you can update the existing site column 'StockAvailable' property "ClientSideComponentId" by using pnp powershell. Set-PnPField -Identity 'StockAvailable' -Values @{ClientSideComponentId=[GUID]"213b4c84-b9f6-49bd-ba46-c5a531825421"} Here replace the above GUID by your SPFX field customizer Id found in manifest src/extension/...


Only top voted, non community-wiki answers of a minimum length are eligible