Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange
10

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


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


7

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(): ...


6

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


6

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


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

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

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

To can 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 there ...


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

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

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

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


4

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


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

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

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


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 use onResolveSuggestions. public render() { const suggestionProps: IBasePickerSuggestionsProps = { suggestionsHeaderText: 'Suggested People', noResultsFoundText: 'No results found', loadingText: 'Loading' }; return <CompactPeoplePicker onResolveSuggestions={this.onFilterChanged.bind(this)} ...


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


3

We have taken multiple initiatives where in we are developing client side web-parts using react for our clients. Traditionally we had been using jquery for making ajax requests in script editors. But with Typescript we are able to use ES6(which is compiled to ES5 at runtime). Using PnP-JS Core with Typescript, we have not only saved a lot of time( by ...


3

You Will find in the following link all available operations of PnP-JS-Core and how to use them with SharePoint Framework. https://github.com/SharePoint/PnP-JS-Core/wiki/Developer-Guide


3

SPFx framework by default doesn't include SP JS. There are following two solutions, Include the JS Reference (In order to reduce the code change) Use the Office Fabric UI (Microsoft recommended way in SPFx) 1. Add JS Reference In order to get Callout feature to SPFx solution you need to include following JS references: /_layouts/15/init.js" /_layouts/15/...


3

You're getting a format exception saying "String was not recognized as a valid DateTime". This means that somewhere in your code you're setting a value to a DateTime that isn't valid. Maybe you have an empty string or have misplaced month, year or day values. Could also be that you're not parsing a string value properly. Check all places where a ...


3

One more option you can try would be a workflow on document library. This workflow would trigger on adding / uploading new document and you can insert new item in other list. All the best!!!


3

Yes you can use the ALM Rest API, Its available in CSOM, Powershell aswell as Javascript.


3

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


3

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


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