Hot answers tagged

4

I believe this example is really not the best code I've seen. To summarize the way SPFx works: - The parent component HelloWorldWebPart only exists to be loaded by the Framework and to handle the property pane. It should not send callback methods as props for the child component in most cases. - The child component is the one rendered as Root in the WebPart ...


3

For the same problem I used a different approach. 2 child components had button click event which gave a call back to a common parent component. In parent component I using switch case to decide which child component to display next.


3

Try following workarounds: Using window.open(): window.open(imageUrl, '_blank'); Using Anchor tag / hyperlink: Add your image somewhere in SharePoint library/picture gallery Add anchor tag (hyperlink) with target="_blank attribute and give image path in href attribute.


3

This looks like it'll be a cool sample. You weren't far from getting something that works. If I can give you a little trick: take advantage of Typescript and define what each variable type will be. That way, it'll help identify issues quickly in your code. For example, your getCellProps method returns (or should return) an array of IPropertyPaneGroup, so ...


2

The average rating of a column is stored in a list column whose internal name is AverageRating. However, to sort on that column we need to make a POST request with a CAML query as it can't be ordered by in a normal HTTP GET request. Make the changes from the below sample code in your spHttpClient's methods : const options: ISPHttpClientOptions = { ...


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

Try using context.placeholderProvider.navigatedEvent instead This has been suggested as the way going forward. Unfortunately the documentation hasn't been updated to reflect this.


2

Edit - Without Iframe option. You can also use directline to customize web chat UI. For react below is sample from MS documentation(link) To install the production build from NPM, run 'npm install botframework-webchat' import { DirectLine } from 'botframework-directlinejs'; import React from 'react'; import ReactWebChat from 'botframework-webchat'; export ...


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

Old reply, but someone is bound to run into the same error. When you're passing the context as a prop in the base WebPart, make sure you're passing it by using the this.context. Passing the WebPartContext prop from the base web part component to the child component: export default class SpTestAppWebPart extends BaseClientSideWebPart { public render() { ...


2

You can create a CSS class in your WebPartName.module.scss file in your web-part project like: /* Default background color for Document Card */ .documentCardStyle { background-color: green !important; } /* Background color for Document Card on Hover */ .documentCardStyle:hover { background-color: yellow !important; } Then use this class in your ...


2

I think, here you are passing the style as a prop property for the component. That's the reason color is not visible. Solution 1. Just pass the color-code form the master page. like <DocumentCard style={ this.myColor(key)} Apply the color-code as a background css property in the DocumentCard component of the parent div. Code like this: < div ...


2

Here is the accordion example built-in SPFx with react which displays the SharePoint list data. Using React Accordion plugin with SPFx It will be helpful to get the start. You can update the logic based on your requirements.


2

The standard react workflow produces a bundle with all your dependencies already inside - no CDNs or external references of any kind. There's no reason you couldn't drop the bundle in SharePoint. Your development machine will need to reach out to the internet to fetch those resources but SharePoint would not.


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

You could use item.userHasPermissions(LoginName,PermissionKind) to check user permission for the folder item. Check @pnp/sp/security https://pnp.github.io/pnpjs/sp/security/


2

You can create a .ts file with necessary information and import it anywhere in your web-part project. Reference: AppSettings in your SPFx solutions OR You can create a property pane field to pass the Result Source GUID and use it in your web-part. Reference: Make your SharePoint client-side web part configurable


1

SharePoint framework works only on SharePoint online and SharePoint 2016 on-premise : https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview Having said that, you can still write typescript code, bundle it and use as client side code in your 2013 on premise env also : https://sii.pl/blog/creating-sharepoint-solutions-with-...


1

You could add the CSS at end of your webpart .scss file.


1

Create a file , let's say customCSS.css inside your component folder and paste the below code : div[class^='pageTitle_']{ display: none ; } Now in your main .ts file call this css file with the following syntax on top of the code : require("../../webparts/WebpartName/components/customCSS.css"); Let me know if this helps.


1

Create a file , let's say customCSS.css inside your component folder and paste the below code : div[class^='pageTitle_']{ display: none ; } Now in your main .ts file call this css file with the following syntax on top of the code : require("../../webparts/WebpartName/components/customCSS.css"); To refresh the page on load only once, paste the below ...


1

This is throwing an error because you are using setState method in your autoPlay attribute, which returns void after setting the state. Try using something like below: <Carousel dynamicHeight={true} showThumbs={false} > {this.state.items.map((imageList, key) => { if (imageList.SourceType == "Video") { this.setState({ autoplayvideo: ...


1

You can try using this: <video width="320" height="240" controls> <source src={ imageList.Image ? imageList.Image["Url"] : '' } type="video/mp4"> Text if video is not loaded </video> where type is optional. instead of: <video src = { imageList.Image ? imageList.Image["Url"] : '' }> </video>


1

I solved this issue using below code: toggle(b) { if (this.state.description === b) { this.setState({ description: null }) } else { this.setState({ description: b }) } } myColor(b) { if (this.state.description === b) { return "#ff9933"; } return ""; } Reference: Change color of selected element - React.


1

This error is because you are missing one property in IReactGetitemsProps.ts file. I am guessing you are missing siteurl property in your file. It should be something like: export interface IReactGetitemsProps { description: string; siteurl: string; }


1

Yes get call is asynchrnous, you should not use render method to get data because render method will be called every time react state will changed and it will again call api causing infinite loop. for you case, on high level I think you can use below. componentDidMount(){ sp.web.get().then((data)=>{ var arbol=[]; arbol.push({name: data....


1

Insert 2 lines to your gulpfile.js 'use strict'; const path = require('path'); const gulp = require('gulp'); const build = require('@microsoft/sp-build-web'); build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); build.configureWebpack.mergeConfig({ additionalConfiguration: (...


1

I guess the best thing to start is gulp clean Then gulp build and then gulp serve. Maybe these simple steps will help you to refresh all dependencies and get rid of outdated artifacts


1

If you're in the TSX then you're in the component, not the web part. A component is a dumb rendering construct. All your logic should be dealt with inside the web part itself, passing data to the component. I don't like the way the SPFX tooling puts components in the same folder as web parts. It exacerbates misunderstandings like this. A much better ...


1

Yeah, you'll have performance issues, but even worse, you're going to have a supremely brittle solution that will take forever to build and deploy. Think about it - if you need to make a small change to page 57 then you need to rebuild, redeploy, and retest the entire project. Organize your web parts into a few solutions, logically grouped. Use shared ...


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