15

this.context.pageContext is available on render() method within top level class that extends BaseClientSideWebPart. Simply pass this.context as a props of to HelloWorld.tsx to reuse it. Sample (HelloWorldWebpart.ts): public render(): void { const element: React.ReactElement<any > = React.createElement( HelloWorld, { description: this....


9

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. ...


9

You can make use of a standard boolean check to determine whether your toggle component has value. Based on that, you can show/hide your slider component. You can do this bool check in the getPropertyPaneConfiguration method itself as below. Here, if the toggle component is off, we will show an emptly label. protected getPropertyPaneConfiguration(): ...


9

The difference between jquery call and the native httclient call is a method of making http asynchronous request. jquery uses old good xhr, but httpclient uses modern fetch api. When making CORS request with fetch API sometimes browser sends preflight request to understand server CORS possibilities (which origins are accepted, which headers, etc.). Your ...


9

Very interesting question.. let us first understand the background of what is all 3 about. MSFlow - To Automate a business process we generally use workflows. Ms flow are alternative to workflows. Before MS flow, Sharepoint designer workflow was used for simple things but for complex things you had to rely on custom workflow(visual studio) or any third ...


8

To be able to use SPFX for SharePoint Server 2016, you must first patch you SharePoint Server 2016 with Feature Pack 2 (September 2017 Public Update for SharePoint 2016). Once it installed, you will be able to upload and deploy SharePoint Framework packages that contain web parts via the SharePoint App Catalog just as you would with SharePoint Add-ins. Is ...


7

Ronak, Working with attachments can be frustrating, but I have found that using the awesome PnP library makes it easy. Here's a quick summary of how to do it: Install the sp-pnp-js library by using npm: npm I sp-pnp-js --save In your code, import sp-pnp-js, and refer to Web, List, and ItemAddResult import { Web, List, ItemAddResult } from "sp-pnp-js/lib/...


7

This is happening because your SPFx solution has an extension added to it. Whenever you add SPFx extension to the solution, after running the yeoman generator, it will modify the config > serve.json file. If you take a look at the serve.json file, you will find that it has a serveConfigurations section with pageUrl property whose value is by default ...


6

The SPFx Examples are a place to learn SPFx https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples Alas they hardly have documentation, and some archaic code patterns cry for a code review. So don't just copy/paste code, always question if the code is correct! The TaxonomyPicker shows how to load (SharePoint) JavaScript libraries. It could ...


6

It is better to use correct type WebPartContext instead of any. Don't forget to put namespace. import { WebPartContext } from '@microsoft/sp-webpart-base'; export interface WebPartProps { context: WebPartContext; description: string; } ... public render(): void { const element: React.ReactElement<WebPartProps> = React.createElement( ...


6

You can follow the below mentioned steps and after that you will be able to add your webpart to a classic page. 1) Go to your SharePoint workbench page (i.e https://tenant.sharepoint.com/sites/test/_layouts/15/workbench.aspx) 2) Add your SPFx webpart on the page and configure it as per your requirements. 3) Once done, you can export your webpart data by ...


5

Recent changes in lodash module made it incompatible with typescript 2.0.x. You can either upgrade typescript to 2.1.5 by running npm install typescript --save-dev or install previous definitions for lodash by removing node_modules/@types/lodash, and running npm install @types/lodash@ts2.0. More info here PS. welcome to "awesome" web-frontend world....


5

Currently there's no way to deploy a SPFx web part using a private CDN. Private CDN's URL is not static - which is a strict requirement for SPFx web parts. Your best shot would be to convince your superior to use public CDNs. Using public CDNs, confidential information will not be shared in any manners, as it's only for sharing the JS code for the web part. ...


5

In the office fabric UI, we have a property itemLimit that you can use to restrict the selection to a single person. So, you need to modify it as below: public render(): React.ReactElement<ISPPeoplePickerProps> { return ( <div className={ css('ms-TextField', {'is-required': this.props.required }) }> <Label>{ this.props....


5

You need to add an additional header, odata-version and set it to 3. This error happens because SPFx's built-in SPHttpClient uses the odata-version header whose value is set to 4. So, simply change it as below and check: const reqOptions: ISPHttpClientOptions = { headers: { "Accept": "application/json;odata=verbose", "Content-...


4

Adding external libraries with a CDN (such as jQuery) to an SPFx project can be broken down into a few parts: Saving the types (for jQuery navigate to the folder through cmd, then put npm install --save @types/jquery) Adding an entry in the 'externals' section of the config.json ("jquery": "https://code.jquery.com/jquery-3.1.0.min.js") Importing the library....


4

Yeah, no good option available right now to close the property pane via API. But then you can use document.querySelector to find the close button element and then programmatically trigger the click event. You can modify from below sample code: if(this.context.propertyPane.isPropertyPaneOpen()){ var element = document.querySelector("button[class*='...


4

You can restrict it to individual site collections by using the Site Collection app catalog which will ensure that SPFx webparts are only available in that specific site collection Target audiences is not currently supported as webpart property. So, you cant target webpart like you did with classic webparts References - Use the site collection app catalog ...


4

Your external entry is correct. However, you should reference it in your code like this: var statuspage:any = require('StatusPage');


4

I do observe the same here. Interestingly, the deprecated onChanged event fires and not onChange. Works if extending a basecomponent and something is missing while extending React.Component. In the end, there's no error.


4

You have to select "SharePoint Online only (latest)" or "SharePoint 2019 onwards, including SharePoint Online" for the question Which baseline packages do you want to target for your component(s)? to get option for "Extension". If the answer is helpful, please upvote and mark as accepted.


3

A little late to this answer, but you can follow the below approach: 1) Create 2 private variables, _listOptions of type IPropertyPaneDropdownOption and loadingIndicator of type boolean (set it to true) in your base webpart class. It would be somewhat as below: export default class HelloWorldWebPartWebPart extends BaseClientSideWebPart<...


3

There will be return type ISplistitemsState instead of void in Splistitems class. Change following line export default class Splistitems extends React.Component<ISplistitemsProps, void> { To export default class Splistitems extends React.Component<ISplistitemsProps, ISplistitemsState> {


3

There is a specific guidance article describing how to use SharePoint JSOM with SharePoint Framework client-side web parts available at https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/connect-to-sharepoint-using-jsom. The article explains the different possible approaches of loading JSOM and their pros and cons.


3

In the screenshot, i see that you are running the Node v6.9.4 . You should uninstall this Node version and instead install the Node v4.6.0 LTS version. Today SharePoint Framework requires Node.js 4.6.0 to run, in future it may run on the latest and greatest version of Node, but right now you should install v4.6.0 to get it running. Download link - Node v4.6....


3

You can create a custom button to start a workflow on a List item. Here I have used SP services to achieve this. The whole logic lies in - how create a Url that redirects to Workflow initiation page? This url looks like this; ../sites/your_sitename/layouts/15/IniWrkflIP.aspx?List="+your_List_guid+"&ID="+<your_ItemID>+"&TemplateID={"+WFguid+"} ...


3

If you want a reference to a SP.User stored on a SP.ListItem the user must exist in the SP.UserCollection siteusers of the specific SP.Web (i.e. tenant.sharepoint.com/sites/web/subweb/_api/web/siteusers). The reason for this is that only the local reference to the Id in the siteusers-list is stored when a user is referenced (using a SP.FieldLookup). So ...


3

You can use onResolveSuggestions. public render() { const suggestionProps: IBasePickerSuggestionsProps = { suggestionsHeaderText: 'Suggested People', noResultsFoundText: 'No results found', loadingText: 'Loading' }; return <CompactPeoplePicker onResolveSuggestions={this.onFilterChanged.bind(this)} ...


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

Addin: App part loads in an iframe. Every authentication requires a request to be made from host web to app web. Impersonation possible. Spfx web part: These are web-parts with real web part properties(configurable). Directly sits in the DOM (Data object model). If coding standard is in accordance to Microsoft, web part will be working the same with all ...


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