Hot answers tagged

3

You could use react-slick slider. Sample test demo in my SPFx: You could customize the Previous Next as image instead of text. Update: The library supports custom HTML. Update part2: My test component(many test scenarios, ignore others) import * as React from 'react'; import styles from './ReactSpFx.module.scss'; import { IReactSpFxProps } from './...


2

As per my understanding adding dots is not possible as of now (correct me if I am wrong). However, you can add style to your previous and next button using prevButtonStyles and nextButtonStyles as given in documentation. Or as a work around you can use React Carousel control: Carousels.


2

Try to use catch in the code snippet to get the exception in the code snippet like below: import { default as pnp, ItemAddResult } from "sp-pnp-js"; private PnPAddItem():void { pnp.sp.web.lists.getByTitle("Jerry").items.add({ EmployeeName : document.getElementById('EmployeeName')["value"], Experience : document.getElementById('Experience')["...


2

In the previous versions 'web' was still present in the rest.d.ts file of the @pnp/sp package. That's not the case anymore. In your main webpart TypeScript file, you have to use the import as follow: import { sp } from "@pnp/sp/presets/all";


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

You don't really add it inside a lifecycle function, you just add a reference to your handler function in the onClick property of your element. Which I guess technically is "inside" the render function. Here's a little pseudo-code example (without all the TypeScript stuff from SPFx): class MyComponent extends React.Component { componentDidMount = () =&...


2

Try using base64-encoded image as recommended in below documentation: When using a custom image, rather than specifying an absolute URL to the image file hosted together with other web part assets, you can have your image base64-encoded and use the base64 string instead of the URL. A number of services are available online that you can use to base64-...


2

Please use npm install for ..\sp-starter-kit-master\solution folder path: Then use gulp serve in the same path like this: In workbench, The Tiles web part can be found and use:


1

it will work with the "&selectProperties='ManagedPropertyName,ManagedPropertyName2,...'" And that is, where your problem is. You are trying with the Display Name of the column and not the ManagedProperyName. If you add a field (e.g: 'Last Review Date') the Sharepoint crawler will find/create a new crawled property. It will be named something like '...


1

As per my understanding, SPFx webparts are responsive by design. So, most of the times you don't need to use bootstrap or media query. It is recommended to use Office UI Fabric React components (not compulsory) which is a responsive and simple for you to create web experiences by using the Office Design Language. Read more at Design considerations for ...


1

Try Using something like below: var ItemArray = []; var internalNameOfTitleCol = "Title" var titleColValue = "Here is a dynamic value for list item Title"; var body = {}; body[internalNameOfTitleCol] = titleColValue; ItemArray.push(pnp.sp.web.lists.getByTitle('listdisplayname').items.inBatch(batch).add(body)); Promise.all(ItemArray).then(function() { ...


1

You can insert some code into React script editor web part to append the custom button. <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var commandset= $("button[name='Send by email'][role='menuitem']").parent()....


1

You should use a SharePoint Framework Extension to do this.


1

In IReactSpfxProps.ts file: import { WebPartContext } from "@microsoft/sp-webpart-base"; export interface IReactSpfxProps { description: string; context: WebPartContext; } WebPart.ts: import * as React from 'react'; import * as ReactDom from 'react-dom'; import { Version } from '@microsoft/sp-core-library'; import { ...


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