Get the values of SharePoint lists items inside the SPFx react web part
I have built a Web Part which have the following:- Inside the Web Part settings page >> there are 2 fields named as "Who We Are" & "Our Value" which allow the user to enter HTML. The web part will render 2 buttons "Who We Are" & "Our Value" >> and when the user clicks on any button >> a Popup will be shown with the entered HTML code in step-1. Something as follow:= Now i am trying to change the way this web part works.. so instead of getting the HTML from the "Who We Are" & "Our Value" fields inside the web part settings, i created a SharePoint custom list to store these values as follow:- so can i get the Popups HTML from the above SharePoint lists instead of getting them from the web part settings fields? Here is my Web Part full code, inside my MyModal.tsx:- import * as React from 'react'; import { useId, useBoolean } from '@fluentui/react-hooks'; import { getTheme, mergeStyleSets, FontWeights, Modal, IIconProps, IStackProps, } from '@fluentui/react'; import { IconButton, IButtonStyles } from '@fluentui/react/lib/Button'; export const MYModal = (myprops) => { const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false); const [isPopup, setisPopup] = React.useState(true); const titleId = useId('title'); React.useEffect(() => { showModal(); }, [isPopup]); function ExitHandler() { hideModal(); setisPopup(current => !current) myprops.handler(); } return ( <div> <Modal titleAriaId={titleId} isOpen={isModalOpen} onDismiss={ExitHandler} isBlocking={true} containerClassName={contentStyles.container} > <div className={contentStyles.header}> <span id={titleId}>Modal Popup</span> <IconButton styles={iconButtonStyles} iconProps={cancelIcon} ariaLabel="Close popup modal" onClick={ExitHandler} /> </div> <div className={contentStyles.body}> <p dangerouslySetInnerHTML={{__html:myprops.OurValue}}> </p> </div> </Modal> </div> ); }; const cancelIcon: IIconProps = { iconName: 'Cancel' }; const theme = getTheme(); const contentStyles = mergeStyleSets({ container: { display: 'flex', flexFlow: 'column nowrap', alignItems: 'stretch', }, header: [ // eslint-disable-next-line deprecation/deprecation theme.fonts.xLarge, { flex: '1 1 auto', borderTop: '4px solid ${theme.palette.themePrimary}', color: theme.palette.neutralPrimary, display: 'flex', alignItems: 'center', fontWeight: FontWeights.semibold, padding: '12px 12px 14px 24px', }, ], body: { flex: '4 4 auto', padding: '0 24px 24px 24px', overflowY: 'hidden', selectors: { p: { margin: '14px 0' }, 'p:first-child': { marginTop: 0 }, 'p:last-child': { marginBottom: 0 }, }, }, }); const stackProps: Partial<IStackProps> = { horizontal: true, tokens: { childrenGap: 40 }, styles: { root: { marginBottom: 20 } }, }; const iconButtonStyles: Partial<IButtonStyles> = { root: { color: theme.palette.neutralPrimary, marginLeft: 'auto', marginTop: '4px', marginRight: '2px', }, rootHovered: { color: theme.palette.neutralDark, }, }; inside the MyModalPopupWebPart.ts: import * as React from 'react'; import * as ReactDom from 'react-dom'; import { Version } from '@microsoft/sp-core-library'; import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import * as strings from 'MyModalPopupWebPartStrings'; import MyModalPopup from './components/MyModalPopup'; import { IMyModalPopupProps } from './components/IMyModalPopupProps'; export interface IMyModalPopupWebPartProps { description: string; WhoWeAre: string; OurValue:string; } export default class MyModalPopupWebPart extends BaseClientSideWebPart<IMyModalPopupWebPartProps> { public render(): void { const element: React.ReactElement<IMyModalPopupProps> = React.createElement( MyModalPopup, { description: this.properties.description, WhoWeAre: this.properties.WhoWeAre, OurValue: this.properties.OurValue } ); ReactDom.render(element, this.domElement); } protected onDispose(): void { ReactDom.unmountComponentAtNode(this.domElement); } protected get dataVersion(): Version { return Version.parse('1.0'); } protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { return { pages: [ { header: { description: strings.PropertyPaneDescription }, groups: [ { groupName: strings.BasicGroupName, groupFields: [ PropertyPaneTextField('WhoWeAre', { label: "who We Are", multiline: true }), PropertyPaneTextField('OurValue', { label: "Our value" }), PropertyPaneTextField('description', { label: "Description", multiline: true }), ] } ] } ] }; } } inside the MyModalPopup.tsx: import * as React from 'react'; import { IMyModalPopupProps } from './IMyModalPopupProps'; import { DefaultButton } from '@fluentui/react/lib/Button'; import { MYModal } from './MYModal'; import { MYModal2 } from './MYModal2'; interface IPopupState { showModal: string; } export default class MyModalPopup extends React.Component<IMyModalPopupProps, IPopupState> { constructor(props: IMyModalPopupProps, state: IPopupState) { super(props); this.state = { showModal: '' }; this.handler = this.handler.bind(this); this.Buttonclick = this.Buttonclick.bind(this); } handler() { this.setState({ showModal: '' }) } private Buttonclick(e, whichModal) { e.preventDefault(); this.setState({ showModal: whichModal }); } public render(): React.ReactElement<IMyModalPopupProps> { const { showModal } = this.state; return ( <div> <DefaultButton onClick={(e) => this.Buttonclick(e, 'our-value')} text="Our Value" /> { showModal === 'our-value' && <MYModal2 OurValue={this.props.OurValue} myprops={this.state} handler={this.handler} />} <DefaultButton onClick={(e) => this.Buttonclick(e, 'who-we-are')} text="Who We Are" /> { showModal === 'who-we-are' && <MYModal WhoWeAre={this.props.WhoWeAre} myprops={this.state} handler={this.handler} />} </div> ); } }
Can I show a Rich Text inside Popup for our SPFX web part instead of Plain-Text
I want to build an SPFX web part which render 2 buttons and when the user clicks on the buttons, 2 Popups should be shown + have 2 fields ("Who We Are" & "Our Value") to enter the 2 Popups text inside the web part's settings, something as follow:- So i did the following:- inside the `MyModalPopupWebPart.ts`:- import * as React from 'react'; import * as ReactDom from 'react-dom'; import { Version } from '@microsoft/sp-core-library'; import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import * as strings from 'MyModalPopupWebPartStrings'; import MyModalPopup from './components/MyModalPopup'; import { IMyModalPopupProps } from './components/IMyModalPopupProps'; export interface IMyModalPopupWebPartProps { description: string; WhoWeAre: string; OurValue:string; } export default class MyModalPopupWebPart extends BaseClientSideWebPart<IMyModalPopupWebPartProps> { public render(): void { const element: React.ReactElement<IMyModalPopupProps> = React.createElement( MyModalPopup, { description: this.properties.description, WhoWeAre: this.properties.WhoWeAre, OurValue: this.properties.OurValue } ); ReactDom.render(element, this.domElement); } protected onDispose(): void { ReactDom.unmountComponentAtNode(this.domElement); } protected get dataVersion(): Version { return Version.parse('1.0'); } protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { return { pages: [ { header: { description: strings.PropertyPaneDescription }, groups: [ { groupName: strings.BasicGroupName, groupFields: [ PropertyPaneTextField('WhoWeAre', { label: "who We Are" }), PropertyPaneTextField('OurValue', { label: "Our value" }), PropertyPaneTextField('description', { label: "Description" }), ] } ] } ] }; } } inside the `MyModalPopup.tsx`:- import * as React from 'react'; import { IMyModalPopupProps } from './IMyModalPopupProps'; import { DefaultButton } from '@fluentui/react/lib/Button'; import { MYModal } from './MYModal'; import { MYModal2 } from './MYModal2'; interface IPopupState { showModal: string; } export default class MyModalPopup extends React.Component<IMyModalPopupProps, IPopupState> { constructor(props: IMyModalPopupProps, state: IPopupState) { super(props); this.state = { showModal: '' }; this.handler = this.handler.bind(this); this.Buttonclick = this.Buttonclick.bind(this); } handler() { this.setState({ showModal: '' }) } private Buttonclick(e, whichModal) { e.preventDefault(); this.setState({ showModal: whichModal }); } public render(): React.ReactElement<IMyModalPopupProps> { const { showModal } = this.state; return ( <div> <DefaultButton onClick={(e) => this.Buttonclick(e, 'our-value')} text="Our Value" /> { showModal === 'our-value' && <MYModal2 OurValue={this.props.OurValue} myprops={this.state} handler={this.handler} />} <DefaultButton onClick={(e) => this.Buttonclick(e, 'who-we-are')} text="Who We Are" /> { showModal === 'who-we-are' && <MYModal WhoWeAre={this.props.WhoWeAre} myprops={this.state} handler={this.handler} />} </div> ); } } inside the `MYModal.tsx` :- import * as React from 'react'; import { useId, useBoolean } from '@fluentui/react-hooks'; import { getTheme, mergeStyleSets, FontWeights, Modal, IIconProps, IStackProps, } from '@fluentui/react'; import { IconButton, IButtonStyles } from '@fluentui/react/lib/Button'; export const MYModal = (myprops) => { const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false); const [isPopup, setisPopup] = React.useState(true); const titleId = useId('title'); React.useEffect(() => { showModal(); }, [isPopup]); function ExitHandler() { hideModal(); setisPopup(current => !current) myprops.handler(); } return ( <div> <Modal titleAriaId={titleId} isOpen={isModalOpen} onDismiss={ExitHandler} isBlocking={true} containerClassName={contentStyles.container} > <div className={contentStyles.header}> <span id={titleId}>Modal Popup</span> <IconButton styles={iconButtonStyles} iconProps={cancelIcon} ariaLabel="Close popup modal" onClick={ExitHandler} /> </div> <div className={contentStyles.body}> <p>{myprops.WhoWeAre} </p> </div> </Modal> </div> ); }; const cancelIcon: IIconProps = { iconName: 'Cancel' }; const theme = getTheme(); const contentStyles = mergeStyleSets({ container: { display: 'flex', flexFlow: 'column nowrap', alignItems: 'stretch', }, header: [ // eslint-disable-next-line deprecation/deprecation theme.fonts.xLarge, { flex: '1 1 auto', borderTop: '4px solid ${theme.palette.themePrimary}', color: theme.palette.neutralPrimary, display: 'flex', alignItems: 'center', fontWeight: FontWeights.semibold, padding: '12px 12px 14px 24px', }, ], body: { flex: '4 4 auto', padding: '0 24px 24px 24px', overflowY: 'hidden', selectors: { p: { margin: '14px 0' }, 'p:first-child': { marginTop: 0 }, 'p:last-child': { marginBottom: 0 }, }, }, }); const stackProps: Partial<IStackProps> = { horizontal: true, tokens: { childrenGap: 40 }, styles: { root: { marginBottom: 20 } }, }; const iconButtonStyles: Partial<IButtonStyles> = { root: { color: theme.palette.neutralPrimary, marginLeft: 'auto', marginTop: '4px', marginRight: '2px', }, rootHovered: { color: theme.palette.neutralDark, }, }; inside the `MYModal2.tsx`:- import * as React from 'react'; import { useId, useBoolean } from '@fluentui/react-hooks'; import { getTheme, mergeStyleSets, FontWeights, Modal, IIconProps, IStackProps, } from '@fluentui/react'; import { IconButton, IButtonStyles } from '@fluentui/react/lib/Button'; export const MYModal2 = (myprops) => { const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false); const [isPopup, setisPopup] = React.useState(true); const titleId = useId('title'); React.useEffect(() => { showModal(); }, [isPopup]); function ExitHandler() { hideModal(); setisPopup(current => !current) myprops.handler(); } return ( <div> <Modal titleAriaId={titleId} isOpen={isModalOpen} onDismiss={ExitHandler} isBlocking={true} containerClassName={contentStyles.container} > <div className={contentStyles.header}> <span id={titleId}>Modal Popup</span> <IconButton styles={iconButtonStyles} iconProps={cancelIcon} ariaLabel="Close popup modal" onClick={ExitHandler} /> </div> <div className={contentStyles.body}> <p>{myprops.OurValue} </p> </div> </Modal> </div> ); }; const cancelIcon: IIconProps = { iconName: 'Cancel' }; const theme = getTheme(); const contentStyles = mergeStyleSets({ container: { display: 'flex', flexFlow: 'column nowrap', alignItems: 'stretch', }, header: [ // eslint-disable-next-line deprecation/deprecation theme.fonts.xLarge, { flex: '1 1 auto', borderTop: '4px solid ${theme.palette.themePrimary}', color: theme.palette.neutralPrimary, display: 'flex', alignItems: 'center', fontWeight: FontWeights.semibold, padding: '12px 12px 14px 24px', }, ], body: { flex: '4 4 auto', padding: '0 24px 24px 24px', overflowY: 'hidden', selectors: { p: { margin: '14px 0' }, 'p:first-child': { marginTop: 0 }, 'p:last-child': { marginBottom: 0 }, }, }, }); const stackProps: Partial<IStackProps> = { horizontal: true, tokens: { childrenGap: 40 }, styles: { root: { marginBottom: 20 } }, }; const iconButtonStyles: Partial<IButtonStyles> = { root: { color: theme.palette.neutralPrimary, marginLeft: 'auto', marginTop: '4px', marginRight: '2px', }, rootHovered: { color: theme.palette.neutralDark, }, }; Currently the "Who We Are" & "Our Value" fields only allow to enter plain-text, and even if i add HTML code inside the "Who We Are" & "Our Value" fields>> the popup will show the HTML as-is and not as a Rich-Text. So is there a way to allow my popup to show rich text instead of just a plain-text? either by entering pure HTML code inside the "Who We Are" & "Our Value" fields and allow the popup to render HTML rich text? or have the "Who We Are" & "Our Value" fields as Rich Text editors and allow the popup to render the entered rich text? is this possible? ThanksSharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG recording - 5th of October
SharePoint Patterns and Practices (PnP) - PnP Core, PnP PowerShell and provisioning engine Special Interest Group (SIG) bi-weekly call recording from the 5th of October meeting is now available from PnP YouTube channel at http://aka.ms/sppnp-videos. The presentation is available from the PnP docs at http://aka.ms/sppnp-docs. Topics covered on 5th of October 2017 Miscellaneous announcements - 2:22 Quick look on latest SharePoint Developer Roadmap - 5:26 Modern themes and site designs - Provisioning - 10:36 DEMO - End-to-end Site Design provisioning process - How to setup, configure and extend with your own logic? - Vesa Juvonen - 31:02 PnP Core Component, PnP PowerShell and provisioning engine Special Interest Group bi-weekly calls are targeted for anyone who's interested in the PnP Core component and PnP PowerShell capabilities in SharePoint Online and in SharePoint on-premises. You can download recurrent invite from http://aka.ms/SPPnP-Core-SIG-Call. Welcome and join the discussion. If you have any questions, comments or feedback, feel free to provide your input as comments to this post as well.
SharePoint 2019 Column Formatting On Premise doesn't work when you add it on a Page with List Web P
SharePoint 2019 Column Formatting On Premise doesn't work when you add it on a Page with List Web Part How to test Try this on SharePoint online and On premise Do column formatting with this json Then add a page with communication template Add list select the view check the conditional formatting is gone on On Prem check the conditional formatting is working on On Office 365 Json used is { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "debugMode": true, "elmType": "div", "txtContent": "@currentField", "style": { "background-color": { "operator": "?", "operands": [ { "operator": "==", "operands": [ "[$ColorCoded]", "Red" ] }, "red", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "[$ColorCoded]", "Blue" ] }, "aqua", { "operator": "?", "operands": [ { "operator": "==", "operands": [ "[$ColorCoded]", "Green" ] }, "Green", "silver" ] } ] } ] }, "color": "black", "padding-left": "10px" } }Command Bar is missing from Lists and Libraries Sharepoint online
Hi, I am using SharePoint Online Modern site page to build a web application. Created a SPFx Extension to build the top navigation. This was working fine but later I came to face an issue of missing commandbar in all the lists & libraries. Not sure this was caused by the top navigation extension i am using. Below image is a list, the highlighted part is where the command bar should be displayed. If i am not making it clear, the command bar(new, quick edit etc..) that i referring to is in the below image, highlighted part, Please let me know what is causing this issue and any solution to fix this? Help ASAP will be much appreciated. Thanks, MV
How to disable Drag and Drop feature in sharepoint online document library
Hi All, Based on project requirement, we are using custom forms while uploading documents in SharePoint Online site using SPFx. However the drag and drop feature directly uploads the document, without loading the custom form. We are looking for 2 solutions if possible: 1. How can we disable the drag drop feature in sharepoint online. Is it possible with spfx or any other workaround? 2. If a document is drag dropped, our custom form should load immediately after uploading the document, so that the purpose of creating the custom form will be served. Can this be achieved in any way..? Any lead will be helpful.
The given path's format is not supported.
CorrelationId : d131859f-70be-0000-6773-a9dff3f46f43 TimeStampUtc : 10/19/2020 1:01:06 PM Message : The given path's format is not supported. Stacktrace : at OfficeDevPnP.Core.Framework.Provisioning.ObjectHandlers.SiteToTemplateConversion.ApplyRemoteTe mplate(Web web, ProvisioningTemplate template, ProvisioningTemplateApplyingInformation provisioningInfo, Boolean calledFromHierarchy, TokenParser tokenParser) at PnP.PowerShell.Commands.Provisioning.Site.ApplyProvisioningTemplate.ExecuteCmdlet() at PnP.PowerShell.Commands.PnPSharePointCmdlet.ProcessRecord() ScriptLineNumber : 1
SharePoint Webpart view Keeps Changing Based on Screen Resolution
Hi, I have a SharePoint site which I have designed, however, the view of the page keeps on changing depending on what resolution the page is viewed at. For example, the below is what I see when the SP page is viewed at 90% resolution: Note: this is the view which I would like to see at constant (i.e. the tiles should be displaying 5 by 3 at all times). Even when the page is viewed at different screen resolution. However, when I increase my screen resolution e.g. I zoom into the page and view it at 120%, the view changes to the image below i.e. the fifth icon is not fully displaying/has been cut off. What I have concluded is that SP has a certain screen resolution in which the page is best viewed at. Am I able to change this setting to make the view to be static i.e. users can view all 15 tiles laid out in 3 rows of 5 despite the different screen resolutions they may view their screen at? Additional notes: - I believe that I am working under the SP Online environment, I believe that it is version 2016 - I am referring to the promoted links webpart - This is a sahrepoint teams site - I have utilised custom codes to adjust the promoted links e.g. display the 15 tiles in 3 rows of 5
