11

TSX allows for embedding JSX elements inside the file, and is largely used by React. TS files are plain old Typescript files and do not support adding JSX Elements. Typically you would seperate concerns by placing only code relating to presentation in the TSX files. The following link is useful for understanding some of the key differences https://...


8

The mystery is solved. The typescript version is pulled in by tslint and in turn by the internal gulp-related typescript. The output of "TypeScript version: 2.1.6" happens when the tslint task starts a typescript compilation: Looking at the "package.json" in "node_modules/@microsoft/sp-tslint-rules" I can see this typescript dependency: "@microsoft/gulp-...


4

You dont need to query user profile to get the login name or display name. It is already available inside the this.context.pageContext.user object. Try and modify the below sample code. You can get the login name, display name as well as email without making a REST call to user profile: public render(): void { const element: React.ReactElement<any> =...


4

Since an interface in TypeScript is open ended this means that you can just add members to the interfaces declared in lib.d.ts and TypeScript will pick up on the additions. Note that you need to make these changes in a global module for these interfaces to get associated with lib.d.ts Reference - Typescript lib.d.ts Deep dive So, you can just ...


4

The simplest option here is declare the function not as a class member but just like a variable in window like window.myFunction = function {} But I would look at removing your dangerous html insertion at all. You can return a set of React components from your .map function and insert them into div. Like that var els = items.map(i => return (<li>....


4

I didnt work with inBatch. I will show you an example without it, and i guess you will be able to make it in the way you need. Btw, your code isn't working as you want because you are not adding the elements when the previous element is already added, and some calls can end before the previous one. Here is a function that you can use: /** * Add an ...


3

you can install Debugger for Chrome extension in the VS Code and follow the step as described in Github Debug SharePoint Framework solutions in Visual Studio Code


3

This question was posted 2 years ago. I'm asking myself the same thing now, but it still appears that Visual Studio Code is the way most people go here. Visual Studio 2019 includes the ability to do Node.js projects, but doesn't mention SharePoint Framework. I'd guess that the method could be worked out, but personally I'm going to go with the approach ...


3

Looks like you are using a Modern Team site, the full width column is currently available only for Communication Site. To enable your webpart to full-width, you need to set the property "supportsFullBleed": true, in your webpart's manifest file. Also, you wont be able to test this webpart locally as full width section is not available on the workbench page. ...


3

pnp.sp.web.lists.getByTitle("TestTask").items.add({ Title: TaskNameVal, StartDate: StartDateVal, DueDate: DueDateVal, PercentComplete: CompleteVal, AssignedToId: [AssignedToVal], Body: DescriptionVal, Priority: PriorityVal, Status: statusVal, }).then(r => { alert('Success') $("input").val("") location....


2

There's some guidance on using Visual Studio as the development environment for SharePoint Framework (SPFx) client-side web parts at https://dev.office.com The documentation is a little out of date as it still refers to the SharePoint Framework as being in preview. The documentation is also not terribly expansive! It is likely that support for development ...


2

Your code tell the TypeScript that the state object is empty object with no members. React.Component accepts two generic types - properties object and state object. You have to change this line export default class ReactPnP extends React.Component<IReactPnPProps, {}> { to export default class ReactPnP extends React.Component<IReactPnPProps, any&...


2

Fabio, I'm assuming that you're using Office UI Fabric Checkbox and DefaultButton for this answer -- let me know if you aren't. To solve this issue use the following steps: Make sure to add a state variable to your state definition. Example: export interface IExampleState { isChecked: boolean; } Initialize your state in your constructor to a default ...


2

there is already "Add-ins" WebPart to display documents in the modern Pages Just Choose Highlighted content WebPart, Configure it as you want not smart to develop an app when it's already exist ;)


2

using @pnp/sp, you can simply get the current user's property using import { sp } from '@pnp/sp'; return sp.web.currentUser.get().then((user) => { console.log(user); return user; }); and store in a state like so: this.setState({ currentUser: await getCurrentUser() });


2

There is guidance available from Microsoft around moving your existing customisations to SharePoint Framework: https://dev.office.com/blogs/converting-existing-js-apps-to-sharepoint-framework https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/migrate-script-editor-web-part-customizations https://docs.microsoft.com/en-us/sharepoint/dev/...


2

As Vipul Kelkar mentioned in his 2nd paragraph, you can perfectly use that development stack with SharePoint 2013. You can use whatever front-end framework you like. However, you cannot use the SPFx template. You need to build your own react / typescript / webpack configuration and a way to deploy your code. In the end the toolstack just builds you a ...


2

All of the PnP JavaScript libraries are written in TypeScript. As such, there are no exemplar JavaScript files. All of the tooling to implement customizations in SharePoint has changed. e.g.: SP Designer —> Gulp, Yeoman, Node, etc. This is a major hurdle that I and other DevOps have had to overcome (in my case, I still am).


2

Try using something like below: const list = sp.web.lists.getById(ListId); const folderName = 'My subfolder'; list.items.add({ FileSystemObjectType: 1, ContentTypeId: '0x0120' FileLeafRef: folderName }).then(console.log); Reference: Folders and sub folders inside Generic List.


2

The error seems to be coming from the tsconfig.json file. You need to ensure that the file is as below. Notice, the extends attribute that is located above compilerOptions { "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json", "compilerOptions": { "target": "es5", "forceConsistentCasingInFileNames": true, ...


2

Please check the below steps for adding multiple language in SPFX webparts: Within "loc" folder you will see a file named "mystrings.d.ts". At first add property here like below: declare interface ITestWebPartStrings { WebpartTitle: string; } There is a file for english language named "en-us.js". If you want to add another language you have to create ...


2

As per the official documentation, Use theme colors in your SharePoint Framework customizations, When you scaffold a new SharePoint Framework client-side web part, by default, it uses the fixed blue palette. And you need to follow the steps described at Use theme colors in your customizations with the necessary adjustments to have the web part use theme ...


2

Try following steps: Run npm i modernizr and then npm i @types/modernizr --save-dev. Then add its reference to config.json in externals{} like: "externals": { "modernizr": { "path": "node_modules/modernizr/src/modernizr.js", "globalName": "modernizr" } } Then reference the file in your WebPart.ts file like: ...


2

The sppkg file is actually a zip archive that you can extract, but it contains the compiled and minified js files, not the source typescript files.


2

I finally got this working. I deleted the node modules and run npm install to retrieve the modules according to package.json. I did try that several times before still getting the same error, but this time I added this command: npm install --save-dev typescript I'm pretty sure I did that too at some point before, but this time everything started working. ...


2

AssignedTo field expects the ID of person/user and not email address. You need set this field like: AssignedToId: 3 Where 3 is ID of user. Additional Reference: How to get the User Principle ID based on the Email Id For multiple selection person or group field you need to use: AssignedToId: { results: [3,11,100] }


2

The error message is quite clear, you can't assign a type 'number' or 'string' as 'IReduxCounterProps' on line 40 & 41. The type must be strictly according to the definition. const c = new Counter({ description: `blavla`, value: 1 }); Whereas for line 42, you've declared a const 'props' to create an instance of class Counter with the same const 'props'.


1

The user id used in SharePoint User Fields is not the one your retrieve. It actually is a lookup to a hidden list (User Information List) which exists on your Root Web of your site collection. The id is unique to a site collection, and will change on every site collection (the id is generated the first time a user appears on the site collection, and ...


1

Looks like a bug with @pnp/sp while using the verbose mode. However, while using the nometadata or minimalmetadata mode, its works fine. Have created a minimal noscript SPFx webpart. Using @pnp/sp version 1.0.4. Minimal code: import { sp } from '@pnp/sp'; export default class testWebPart extends BaseClientSideWebPart<ItestWebPartProps> { ...


1

Also found that the @microsoft/sp-lodash-subset has an intersection method I can use. https://lodash.com/docs/4.17.4#intersection import { escape, intersection } from '@microsoft/sp-lodash-subset'; let array1 : any= ["Panda", "Zebra", "Lion", "Cat", "Dog", "Fish", "whatever", "Bird"]; let array2 : any = ["Panda", "Cat"]; intersection(array1, array2);


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