pnp / sp-dev-fx-controls-react Goto Github PK
View Code? Open in Web Editor NEWReusable React controls for SPFx solutions
Home Page: https://pnp.github.io/sp-dev-fx-controls-react/
License: MIT License
Reusable React controls for SPFx solutions
Home Page: https://pnp.github.io/sp-dev-fx-controls-react/
License: MIT License
[x] Bug
[x] Question
[ 1.2.5 ]
Selection prop is not required.
We're updating the content of a listview based on a button click. The initial load is fine but the second time we set 'items' we get 'TypeError: Cannot read property 'setItems' of undefined'.
This looks to be caused by a dependency on 'selection' in ListView.componentDidUpdate. Adding a 'selection' property resolves the issue.
Create a list view without 'selection'
Set items on mount
Set items for a second time
An error is thrown
I am using SharePoint Framework React controls's list view to render the items from document library. I am able to get the items from library by selecting the list from dropdown. But While rendering the items, it is not showing any items in the view. But, when i click on item I am able to write data in that row in console. It is rendering like below:
I am using ListView like below
<ListView
items={this.state.listData}
iconFieldName="ServerRelativeUrl"
compact={true}
selectionMode={SelectionMode.multiple}
selection={this._getSelection}
/>
[X] Question
[x ] Enhancement
A rich text editor that lets users 'enhanced' rich text inline, like in classic pages.
[ ] Enhancement
[ ] Bug
[ X ] Question
I'm new to React and to SPFx. :-)
The relevant files are attached in a .zip
Primary questions
I was able to get the PlaceHolder content control to work but I'm wondering if there's a better way.
My project is called React00 so this is the prefix for all the files.
I put the <Placeholder markup in the React00.tsx file (attached) that has the default React Welcome code.
I got the context from the React00WebPart.ts.
To do that, I used code from a previous project that uses the pnp object in the sp-pnp-js package. After installing the package.
To get it from the WebPart to the React file, I added a WebPartContext property to the IReact00Props.ts interface.
This all works as expected but I'm curious if there's a simpler route.
Thanks!
[ X] Bug
Step 3 of "How to use this component in your solutions" on wiki pages for Placeholder and SiteBreadcrumb is referring to the file type icon component.
Thanks
Joel
[ ] Enhancement
[x] Bug
[ ] Question
Please specify what version of the library you are using: [1.3.0@next]
When selecting the items in the tree view, the onChanged
event doesn't get triggered.
[x] Enhancement
[ ] Bug
[ ] Question
Add a new control which renders the child components if the user has the right permissions.
[ x] Enhancement
[ ] Bug
[ ] Question
Just like we have in the Property pane controls, but to put in the webpart body, Just a adropdown on lists on the site. Would be really great to be able to have it select only lists based on a specific template, or better yet, lists that have a specific content type.
[ ] Enhancement
[ ] Bug
[ X] Question
Please specify what version of the library you are using: [1.1.3]
"gulp serve" command serves web par without errors
"gulp serve" emmits an error: "Error - 'collectLocalizedResources' sub task errored after 22 ms
"Error for resource "ControlStrings": No localized files found under the "lib" directory matching pattern "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"""
Generate project with @microsoft/generator 1.4
npm install @pnp/spfx-controls-react --save --save-exact
Add "ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js" to config.json
Run "gulp serve" command
What I did wrong?
Thanks!
[x] Bug
Please specify what version of the library you are using: [1.1.1]
When loading a webpart using these controls I expect one load of the web part.
When using this the web part loads multiple times before success. In IE/Edge it often seems to fail on the third attempt, thus failing the web part all together.
See SharePoint/sp-dev-docs#1204 for more information.
Seems loading of AppInsights for tracking usage of this component should be async, not hindering the normal load process.
Try the search-refiner web part sample from https://github.com/SharePoint/sp-dev-fx-webparts.
[x] Enhancement
[ ] Bug
[ ] Question
Please specify what version of the library you are using: [1.3.0]
At the moment the TaxonomyPicker can only be used in a web part. It would be useful to also make it available to be used in an application customizer.
Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!
Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.
[ ] Enhancement
[x ] Bug
[ ] Question
After running install and trying to use a control like this:
import {ListView} from "@pnp/spfx-property-controls";
I get an error saying,
Cannot find module '@pnp/spfx-property-controls'.
The "main" is missing from package.json
[x] Enhancement
[ ] Bug
[ ] Question
There is one in the poroperty pane controls, bit we need one in the webpart controls too. Need to be able to let users select from anyone , or just members of a group (like the classic one).
[ ] Enhancement
[ ] Bug
[x] Question
Please specify what version of the library you are using: [@pnp/[email protected]]
Hello, how I can reset selected items in ListView?
For example in cases when delete an item from list, UI still keeps selecting another item I guess with the same index as was the last.
Thanks!
Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!
Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.
[ ] Enhancement
[ ] Bug
[x ] Question
[x] Cpmment
In the ListView control, should the item array have at least an Id and Title rather than being any. This might save a lot of trouble down the road.
It would nice to have a property which allows you to specify term IDs which may not be used or selectable.
[x ] Enhancement
[ ] Bug
[ ] Question
Property control to query the search results.
Similar to Search Results in classic SharePoint.
Thanks!
[ ] Enhancement
[ ] Bug
[X ] Question
@VesaJuvonen any chance to reveal the list of reusable components that may be added to this repository by the Engineering team in the future?
The reason I ask is because this may make people hold back on contributions, thinking that they may be working on something that is already being developed by the team at MS and it would be a "waste" of time to have duplication ( I personally feel that way)
Thanks!
[X ] Bug
Please specify what version of the library you are using: [ "@pnp/spfx-controls-react": "1.0.0-beta.8" ]
In Viewfields
_viewFields: IViewField[] some fields have underscores, e.g.
{
name: "requester_name",
displayName: "Requester Name",
minWidth: 100,
sorting: true
}
Sorting should allow the column to be sorted
We get an error in the console
1512467795079][OtherGlobalError.window.onerro] TypeError: Cannot read property 'name' of undefined
TraceLogger._writeToConsole @ sp-loader-assembly_en-us.js:20165
TraceLogger._log @ sp-loader-assembly_en-us.js:20148
TraceLogger.logError @ sp-loader-assembly_en-us.js:20107
SPGlobalErrorHandler.basicTracingHandler @ SPGlobalErrorHandler.js:15
ReactErrorUtils.invokeGuardedCallback @ react-dom.js:9017
executeDispatch @ react-dom.js:3006
executeDispatchesInOrder @ react-dom.js:3029
executeDispatchesAndRelease @ react-dom.js:2431
executeDispatchesAndReleaseTopLevel @ react-dom.js:2442
forEachAccumulated @ react-dom.js:15423
processEventQueue @ react-dom.js:2645
runEventQueueInBatch @ react-dom.js:9041
handleTopLevel @ react-dom.js:9052
handleTopLevelImpl @ react-dom.js:9129
perform @ react-dom.js:14724
batchedUpdates @ react-dom.js:8805
batchedUpdates @ react-dom.js:12852
dispatchEvent @ react-dom.js:9204
Followed by
ListView.tsx:279 Uncaught TypeError: Cannot read property 'name' of undefined
at ListView.tsx:279
at baseFindIndex (sp-loader-assembly_en-us.js:13012)
at r.findIndex (sp-loader-assembly_en-us.js:17205)
at ListView._columnClick (ListView.tsx:279)
at DetailsHeader._onColumnClick (DetailsHeader.tsx:581)
at Object.ReactErrorUtils.invokeGuardedCallback (react-dom.js:9017)
at executeDispatch (react-dom.js:3006)
at Object.executeDispatchesInOrder (react-dom.js:3029)
at executeDispatchesAndRelease (react-dom.js:2431)
at executeDispatchesAndReleaseTopLevel (react-dom.js:2442)
In your JSON feed have a column with an underscore
e.g.
requester_name
[x ] Bug
Please specify what version of the library you are using: [ 1.2.1 ]
I expect that selected records would update when sorting invoked
The records selected do not move, they stay in the same position. i.e. records 1,2,3 selected and then user invokes sorting then the selection does not stay with the same records
Use List View with multiple selection and sorting enabled for each column. select 3 records. Sort on a column.
Thanks!
[ ] Enhancement
[x] Bug
[ ] Question
Please specify what version of the library you are using: [1.1.2 ]
FileTypeIcon control is displayed correctly when used in Field Customizer.
FileTypeIcon is not displayed
@pnp/spfx-controls-react
<div className={styles.cell}>
<FileTypeIcon type={IconType.font} path={'.docx'} />
</div>
The reason for that is that default office ui fabric classes with font-family
definitions are not referenced by the component and it has default inherited font-family
[x] Enhancement
[ ] Bug
[ ] Question
Only enable or show the button of the placeholder control when page is in edit mode.
[ ] Enhancement
[ ] Bug
[x] Question
Please specify what version of the library you are using: [1.2.4]
Hello team !
We developped a SPFx webpart for one of our customers. Sometimes the component fails to load. This customer uses a third party product on his SharePoint tenant that uses AppInsights. Our component and this product sometines have conflicts because of that.
I was surprised because we do not use AppInisghts, but I found that you do. Can you explain me why you need this and what informations do you track please ?
Thanks
shouldn't we have some kind of class hierarchy in these controls? at a minimum, controls used to render list fields should have a common base class.
also, would be good to design the interface separately from the library so we could more easily move away from fabric if needed.
[ ] Enhancement
[X] Bug
[ ] Question
1.0.0-beta.6
I have a ListView component that is set like this:
<ListView
items={this.state.reactListItems}
compact={true}
viewFields={viewFields}
selectionMode={SelectionMode.single}
selection={ (e) => this.setState({
showPanel: true,
panelInfo: JSON.stringify(e)
})} />
In the selection area I have set a state update using local fat arrow to pass the this object, which I want to use in a panel (or modal or whatever).
My issue is that this code will execute twice; once where it passes the output from the selection but does not update the state, then again where it updates the state, but now it does not pass the selection.
So in the code above, the value is ultimately [] on this.state.panelInfo.
I expected the item value and the state update to execute once with the values passed from the selected item.
The code above should be sufficient to repro.
I also tried using this function for debugging:
public _getSelection(item: any, ctx: any) {
console.log('Selected items:', item);
ctx.setState({
showPanel: true,
panelInfo: JSON.stringify(item)
});
console.log(ctx.state);
}
Thanks for any suggestions on how to proceed!
A new chart control that simplifies usage of chart.js
[X ] Question
Does the control support pre-selection of items
Hi, I'm trying to pre-select items on the ListView component, but I can't find a way to do that. My main problem is that if I update the state, the render method fires again and any selection on the list is lost.
I'm not sure if the component was designed to allow this (checked the source code and I believe it was not) but is there any way to overcome this?
Add the ListView component to a page
Add a button to the page that calls a function where the status is updated
Select some items on the list
Click the button to update the status
The list renders and the previous selection is lost
Thanks!
Web part title that is changeable when the page is in edit mode.
[x] Enhancement
[ ] Bug
[ ] Question
Quick Edit control -- would work like quick edit mode on a list, but let us provide the data as input and callback methods to do the updates.
[ ] Enhancement
[ ] Bug
[x] Question
Please specify what version of the library you are using: [1.1.1]
I'm new to the react world and still learning. That said, with the WebPartTitle component how do we get the same reactive behavior we get OOTB from the @microsoft/sharepoint webpart template's description field?
Below are my edits to the files generated by the @microsoft/sharepoint yeoman template.
import { DisplayMode } from '@microsoft/sp-core-library/lib';
export interface IHelloWorldProps {
title: string;
description: string;
displayMode: DisplayMode;
updateProperty: (value: string) => void;
}
export interface IHelloWorldWebPartProps {
title: string;
description: string;
}
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
render(): void {
const element: React.ReactElement<IHelloWorldProps> = React.createElement(
HelloWorld,
{
title: this.properties.title,
description: this.properties.description,
displayMode: this.displayMode,
updateProperty: (value: string) => this.properties.title = value
}
);
ReactDom.render(element, this.domElement);
}
}
...
import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle';
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
public render(): React.ReactElement<IHelloWorldProps> {
<div className={ styles.helloWorld }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
{ /* <span className={ styles.title }>Welcome to SharePoint!</span> */}
<WebPartTitle className={ styles.title}
title={this.props.title}
displayMode={this.props.displayMode}
updateProperty={this.props.updateProperty}
/>...
...
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
...
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('title', {
label: 'Title Field'
}),
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}...
[ ] Enhancement
[ ] Bug
[ x] Question
Please specify what version of the library you are using: [ 1.2.1 ]
How do I add an application image for an application which is not included OOTB?
Unable to use image for my application while using a ListView
set iconFieldName=link to file
Thanks!
[x] Enhancement
[ ] Bug
[ ] Question
Please specify what version of the library you are using: [1.3.0@next]
It would be nice to have a property to specify if the term set itself can be selected in the TaxonomyPicker
. This would be useful if you want to create new terms in a specific termset. Currently, you can only select the terms in the termset.
[ ] Enhancement
[X] Bug
[ ] Question
Please specify what version of the library you are using: [ 1.1.1 ]
When switching between 'live/preview' to 'edit' mode my className styles should still prevail.
When switching between 'live/preview' to 'edit' mode the styles set by the className are overridden by the controls 'edit' style. The problem is that I may be using a background color that is close or matching the style used in edit mode making the text unreadable. Additionally, it doesn't allow you to see the true styles of the title while in edit mode.
Set the className for the WebPartTitle component. Start the workbench and switch between Preview and Edit mode.
Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!
Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.
[X] Enhancement
[ ] Bug
[ ] Question
Please specify what version of the library you are using: [ ]
If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.
If you are reporting an issue please describe the expected behavior. If you are suggesting an enhancement please
describe thoroughly the enhancement, how it can be achieved, and expected benefit. If you are asking a question, ask away!
If you are reporting an issue please describe the behavior you expected to occur when performing the action. If you are making a
suggestion or asking a question delete this section.
If you are reporting an issue please describe the steps to reproduce the bug in sufficient detail to allow testing. If you are making
a suggestion or asking a question delete this section.
Delete this section after reading
Thanks!
Align documentation with the property controls project. Version badges, remarks about version, ...
[ x] Enhancement
A datepicker that works like the classic datepicker-- has an option to include time, or not.
[ ] Enhancement
[x] Bug
[ ] Question
[ 1.2.5 ]
Documentation example contains the 'selection' property, although this is currently an option property and omitting it causes a JavaScript error.
Property should not be optional or code should check if this._selection is not undefined.
Happy to submit a PR if given direction on the preferred approach (check if this._selection is not undefined?)
"TypeError: Cannot read property 'setItems' of undefined"
ListView.tsx, line 63
Add a ListView control without 'selection' property.
Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!
Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.
[ ] Enhancement
[X ] Bug
[ ] Question
Please specify what version of the library you are using: [ 1.0.0-beta.8 ]
If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.
When giving af path that ends in .pdf I would expect to get a PDF icon.
No application specific icon is given - just the default icon (white shet of paper like thing).
Create a webpart and render
A new control that allows you to include a map into your SPFx solution.
Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!
Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.
[ ] Enhancement
[ ] Bug
[X ] Question
Please specify what version of the library you are using: [ current ]
Question
I can't seem to figure out quite how i use this control, could you provide a link to an actual demo sample or maybe elaborate more in the documentation?
Keep up the great work, i appreciate it daily:)
I cant seem to figure out how exactly to use the control following the specification in the documentation. I use it and i get promise errors with sp.dialog.js. I am using the control in the render as below and nothing pops up when its invoked and i cannot also use the property iframeOnLoad={this._onIframeLoaded.bind(this)} as it gives a compilation error for the {this._onIframeLoaded.bind(this)}. Do i have to explicitly implement the method ? Please clarify
public render(): JSX.Element {
return (<IFrameDialog
url={this.props.url}
hidden = {false}
modalProps={{
isBlocking: true,
containerClassName: "cs-dialog"
}}
dialogContentProps={{
type: DialogType.close,
showCloseButton: true
}}
width={'800px'}
height={'800px'}/>);
}
}
We should have SPFieldType be part of the column definitions, and then separate controls for each of the field types.
Hello,
I'm currently working on my own webpart ans I would like to use buttons that allow me to dynamically add or delete some fields in the property pane.
I saw that you've managed to do it in your "PropertyFieldsSPListQuery"
I would like to know and understand how did you manage to do that ?
Thank you very much in advance
Best regards
[x ] Enhancement
A taxonomy picker control that works similarly to the classic one.
Hi, is anyone working on grouping in the listview? I can add that if needed, but don't want to duplicate effort.
[ ] Enhancement
[x] Bug
[ ] Question
Please specify what version of the library you are using: [1.3.0]
Icon not always show up in the placeholder control.
When installing the controls via NPM it would be useful to automatically configure the locale
file in the config.json
file.
[ ] Enhancement
[ ] Bug
[ X ] Question
Hi,
Can you open the wiki for contributions please
Thanks
Joel
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.