Hot answers tagged

9

Add a property to your IAutoCompleteProps interface for your click handler. Then pass the function from the AutoCompleteWebPart into the interface as one of the component's properties. So in your IAutoCompleteProps something like this: export interface IAutoCompleteProps { //Other properties clickHandler: () => void; } Then in your ...


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 too get same problem, and i resolved it by using the SPComponentLoader.loadScript, please refer below code snippet SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', { globalExportsName: '$_global_init' }) .then((): Promise<{}> => { return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/MicrosoftAjax.js', { ...


4

Have web part C import the components for the other two web parts. Use shared services to load data for A and B, and reuse them in web part C. import ComponentA from './../../webparts/WebPartA/components/ComponentA'; import ComponentB from './../../webparts/WebPartB/components/ComponentB'; import ServiceA from './../../services/WebPartAService'; import ...


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

I don't know what you are trying to achieve but you can call your method like this: public render(): React.ReactElement<IReportingProps> { return ( <div> <CompoundButton id='button1' ariaLabel='Button1' description='First button description' onClick={ () => this._RequestButton('Button 1')}>Button 1</CompoundButton> ...


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

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

In 1.6.0 projects the config/tslint.json file was removed and a new one is created at the root of the solution. Delete E:\DevEnv\WebParts\react-full-iframe\config\tslint.json. You should also add the new tslint.json at the root of your project. To help upgrade your project and make sure you didn't forget anything, you could use the office 365 cli. the next ...


3

I believe that there is no REST API that could manage nor read alerts whatsoever. Also alerts are per site (web) so it would require to iterate through all subsites which could take really long time to load. This functionality was introduced in CSOM at January 2017. So long time there was no way how to manage alerts in the cloud and I don't think that it ...


3

I see two issues: You need to close your constructor public constructor(props: IDCLabelProps, state: IDCLabelProps) { super(props); } You probably named your component file YourComponentName.ts -- with a .ts extension. Rename your file to YourComponentName.tsx and it should magically start working. I hope this helps?


3

Looks likely that your document library does not have a Description field, i.e. a field with the internal name "Description". PnP wants you to specify the internal name, not the display name of the fields to set. Does the field perhaps have a different internal name and only the display name is "Description"? Try checking by going into the List Settings ...


3

It seems you are not setting any value to your components: <DatePicker isRequired label={strings.datePickUp} value={this.state.datePickup} //Add this key={"1"} onSelectDate={pickUpDate => { this.setState({ pickUpDate }); }} firstDayOfWeek={DayOfWeek.Monday} />


3

The SharePoint Framework webpack config already contains a definition for source-map-loader but it doesn't have the exclude property. You can check this by doing a console.log(generatedConfiguration.module.rules) Even if you add a new definition for the loader, both tests will execute as part of the webpack config and the warnings will be thrown for the out ...


2

The problem here is that newer versions of office-ui-fabric-react are incompatible with the typescript version required by spfx 1.0.2. You can try this version, it should be supported. npm -i office-ui-fabric-react@2.20.0 --save


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

You are missing the 'static' keyword in your class definition. I have tried below in my test environment and it works superfine : export class PanelSmallRightExample2 { public static _string = "" public static _onShowPanel1() { alert("other"); }; } and using them in another web part TS file as: import {PanelSmallRightExample2} from './...


2

Use PNP SP taxonomy in your SPFX code as below,it easy to use and supported with SPFx import { taxonomy, ITermStore, ITerms, ILabelMatchInfo, ITerm, ITermData } from "@pnp/sp-taxonomy"; const store: ITermStore = await taxonomy.termStores.getByName("Taxonomy_v5o/SbcTE2cegwO2dtAN9l=="); // get a single term by id const term: ITerm = ...


2

From my point, you should start with Azure AD application. Create a new app registration in Azure AD, give it permissions to SharePoint. Then go ahead with react-native-azure-ad and build an app, which gets access token for SharePoint. With access token, you can easily call SharePoint REST API. As far as I know, react native also supports OAuth implicit ...


2

Yes, you can do that without having to enable CDN. In your config > write-manifests.json file, there is a cdnBasePath property. Modify that value to a document library path as below: { "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", "cdnBasePath": "https://<tenant>.sharepoint.com/sites/test/...


2

TL;DR You're on the right track, but look at the mso:CanvasContent1 tag instead! The real answer It looks like the bulk of your configuration would be in the <mso:CanvasContent1 ...> line. Note the contents of the tag is encoded. Here it is, decoded and formatted as HTML: <mso:CanvasContent1 msdt:dt="string"> <div> <div ...


2

In your code, you are mixing up the Node "require" with a module export and a default export for the class "Cart". You should try the following: Remove the module export from Cart.tsx (last line) Replace var Cart = require('./Cart.tsx'); in ShoppingWebPart.tsx with import Cart from './Cart'; Provide the required props to the Cart element in the render ...


2

A react component is just a .tsx file. So just add a new file, give it a .tsx extension, copy an existing component's code, change its class name and fill out the props and implementation. I'm not aware of any way to generate it, but i don't really think it's necessary.


2

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


2

You can use dangerouslySetInnerHTML attribute to add the HTML. Modify your code as below: return <div> <Label><div dangerouslySetInnerHTML={props.appendTextDetails} /></Label> </div> React DOM elements


1

It seems like you don't have correct config proxy url. Please try to set the proxy url by using the following command. It may help you to resolve the issue. npm config set https-proxy "full proxy url" npm config set proxy "same url" npm config set strict-ssl false To check the current config list use the below command. npm config list


1

You need to run npm install -g yo gulp to install yo and gulp from global first so that you can have yo and gulp command ready. Please reference Set up your SharePoint Framework development environment for detail


1

For dynamic list item url: render() { return ( <a href="http://my.company.corp/sites/mySite/Lists/Termin Radar/"> <div> {this.state.data.map( function( article, i ){ return( //react.js, not far from solution with onClick //<div className="target" key={article.Id} onClick={article.ContentTypeId}>&...


1

You need to a make a POST call to the EnsureUser endpoint and pass the login name as the payload. Try with the below sample code, modify the login name as per your requirement: const payload: string = JSON.stringify({ 'logonName': this.context.pageContext.user.loginName // i:0#.f|membership|firstname.lastname@contoso.onmicrosoft.com }); var ...


1

You can do this using SPServices $().SPServices.SPCascadeDropdowns({ relationshipList: "States", relationshipListParentColumn: "Country", relationshipListChildColumn: "Title", parentColumn: "Country", childColumn: "State", debug: true }); You can check the example in the below link https://social.technet.microsoft.com/wiki/contents/articles/37676....


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