Nov 05 2021 06:08 PM - edited Nov 06 2021 04:33 PM
I am trying to achieve this using SPFX web part:-
The web part will render a Button and has a text field inside its settings.
The user add the Web Part >> edit it >> enter the text inside the text field (inside the setting page) >> save the web part>> then the web part will render a button >> if the user clicks on the button a Popup will be shown with the entered text.
Now i found this link @ https://www.c-sharpcorner.com/article/modal-popup-in-spfx/ which almost achieve what i am looking for, except that the Popup text inside the example is been hard-coded inside the .tsx file.. so what are the steps to make the Popup text configurable inside the web part settings instead of been hard-coded?
Thanks
Here is my `ReactPortalWebPart.ts` file:-
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 'ReactPortalWebPartStrings';
import ReactPortal from './components/ReactPortal';
import { IReactPortalProps } from './components/IReactPortalProps';
export interface IReactPortalWebPartProps {
description: string;
}
export default class ReactPortalWebPart extends BaseClientSideWebPart<IReactPortalWebPartProps> {
public render(): void {
const element: React.ReactElement<IReactPortalProps> = React.createElement(
ReactPortal,
{
description: this.properties.description
}
);
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('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
and here is the `ReactPortal.tsx`:-
import * as React from 'react';
import { IReactPortalProps } from './IReactPortalProps';
import Myportal from "./Myportal";
export default class ReactPortal extends React.Component<IReactPortalProps, {}> {
public render(): React.ReactElement<IReactPortalProps> {
return (
<div >
<Myportal/>
</div>
);
}
}
Here is the `Myportal.tsx`:-
import* as React from "react";
import usePortal from "react-cool-portal";
import "./mystyle.scss";
const Myportal = () => {
// const { Portal } = usePortal({ containerId: "my-portal-root" });
const { Portal, show, hide } = usePortal({ defaultShow: false,containerId:"my-portal-root" });
const handleClickBackdrop = (e: React.MouseEvent) => {
const { id } = e.target as HTMLDivElement;
if (id === "modal") hide();
};
return (
<div className="App">
<button className="btn" onClick={show} type="button">
Who we are
</button>
<button className="btn" onClick={show} type="button">
Our value
</button>
<Portal>
<div
id="modal"
className="modal"
onClick={handleClickBackdrop}
tabIndex={-1}
>
<div
className="modal-dialog"
role="dialog"
aria-labelledby="modal-label"
aria-modal="true"
>
<div className="modal-header">
<button
className="modal-close"
onClick={hide}
type="button"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<h1> Who we are</h1>
<h3>.................................................</h3>
Our overriding purpose is to dramatically improve the reliability, efficiency........
</div>
</div>
</div>
</Portal>
</div>
);
};
export default Myportal;
Nov 08 2021 06:21 AM - edited Nov 08 2021 06:25 AM
SolutionYou need to pass the text to display variable (which looks like the description property in the property panel) into the MyPortal React element. It is already being passed into the ReactPortal React component as part of the IReactPortalProps object, so you just need to pass that through to MyPortal as an attribute.
First, change line 4 in MyPortal.tsx to
const Myportal = (textToDisplay: string) => {
To use the parameter, place it in the return object. It looks like you want to replace line 49 in MyPortal.tsx with
{textToDisplay}
To pass the description property into MyPortal, replace line 8 in ReactPortal.tsx with
<Myportal textToDisplay={props.description}/>
I hope this help show how to pass properties into React function components. If this helps, please consider marking this as the approved solution.
Good luck,
Don Kirkham
Nov 08 2021 08:13 AM
@Don Kirkhamok thanks a lot for the help.. but how i can show the Description field as Multi-line of text that accept HTML code? or if i can render it as Rich Text Editor? as i need the text inside the Popup to be rich text rather than been just a text-only.. can i achieve this?
Nov 08 2021 09:24 AM
Nov 08 2021 06:21 AM - edited Nov 08 2021 06:25 AM
SolutionYou need to pass the text to display variable (which looks like the description property in the property panel) into the MyPortal React element. It is already being passed into the ReactPortal React component as part of the IReactPortalProps object, so you just need to pass that through to MyPortal as an attribute.
First, change line 4 in MyPortal.tsx to
const Myportal = (textToDisplay: string) => {
To use the parameter, place it in the return object. It looks like you want to replace line 49 in MyPortal.tsx with
{textToDisplay}
To pass the description property into MyPortal, replace line 8 in ReactPortal.tsx with
<Myportal textToDisplay={props.description}/>
I hope this help show how to pass properties into React function components. If this helps, please consider marking this as the approved solution.
Good luck,
Don Kirkham