Category

[x] Bug

Version

Please specify what version of the library you are using: [1.1.1]

Expected / Desired Behavior / Question

When loading a webpart using these controls I expect one load of the web part.

Observed Behavior

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.

Steps to Reproduce

Try the search-refiner web part sample from https://github.com/SharePoint/sp-dev-fx-webparts.

A new chart control that simplifies usage of chart.js

Category

[x] Bug

[x] Question

Version

[ 1.2.5 ]

Expected / Desired Behavior / Question

Selection prop is not required.

Observed Behaviour

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.

Steps to Reproduce

Create a list view without 'selection'
Set items on mount
Set items for a second time
An error is thrown

Web part title that is changeable when the page is in edit mode.

Category

[x] Enhancement
[ ] Bug
[ ] Question

Only enable or show the button of the placeholder control when page is in edit mode.

Category

[ ] Enhancement

[x ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [1.1.3]

Observed Behavior

The color of WebpartTitle with a theme dark is not iso with title of default title (see screenshot)

Thanks!

Category

[ ] Enhancement
[x] Bug
[ ] Question

Version

Please specify what version of the library you are using: [1.3.0@next]

Expected / Desired Behavior / Question

When selecting the items in the tree view, the onChanged event doesn't get triggered.

Category

[ ] Enhancement

[ ] Bug

[ X ] Question

Expected / Desired Behavior / Question

Hi,
Can you open the wiki for contributions please

Thanks
Joel

Thanks!

Category

[X ] Question

Expected / Desired Behavior / Question

Does the control support pre-selection of items

Observed Behavior

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?

Steps to Reproduce

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!

Category

[ x] Enhancement

A datepicker that works like the classic datepicker-- has an option to include time, or not.

[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.

Category

• Enhancement
• Bug
• Question

Desired Behavior

When installing the controls via NPM it would be useful to automatically configure the locale file in the config.json file.

[X ] Bug

Please specify what version of the library you are using: [ "@pnp/spfx-controls-react": "1.0.0-beta.8" ]

Expected / Desired Behavior / Question

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

Observed Behavior

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)

Steps to Reproduce

In your JSON feed have a column with an underscore

e.g.

requester_name

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

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.

Category

[X] Enhancement

[ ] Bug

[ ] Question

Version

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.

Expected / Desired Behavior / Question

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!

Observed Behavior

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.

Steps to Reproduce

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.

Submission Guidelines

Delete this section after reading

• All suggestions, questions and issues are welcome, please let us know what's on your mind.
• Remember to include sufficient details and context.
• If you have multiple suggestions, questions, or bugs please submit them in separate issues so we can track resolution.

Thanks!

Category

[ ] Enhancement

[ ] Bug

[x] Question

Version

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

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.

Category

[ ] 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.

[ ] Enhancement

[ ] Bug

[ X ] Question

Version

[email protected]

Question - Easier way to implement the Place Holder control?

I'm new to React and to SPFx. :-)
The relevant files are attached in a .zip

Primary questions

• Best place to put the <Placeholder markup code
• Best way to get the context to get at the propertyPane

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!

PlaceHolderSPFxCode.zip

Category

[ ] Enhancement

[ ] Bug

[x] Question

Version

Please specify what version of the library you are using: [@pnp/[email protected]]

Question

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!

Category

[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).

Category

[x] Enhancement
[ ] Bug
[ ] Question

Version

Please specify what version of the library you are using: [1.3.0]

Expected / Desired Behavior / Question

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.

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'}/>);
        }  
        
        
          
}

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.

Category

[x ] Bug

Version

Please specify what version of the library you are using: [ 1.2.1 ]

Expected

I expect that selected records would update when sorting invoked

Observed Behavior

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

Steps to Reproduce

Use List View with multiple selection and sorting enabled for each column. select 3 records. Sort on a column.

Thanks!

Category

[x] Enhancement

[ ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [1.3.0@next]

Expected / Desired Behavior / Question

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.

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.

Category

[ ] Enhancement

[x ] Bug

[ ] Question

Version

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

Category

[ ] Enhancement

[ ] Bug

[ X] Question

Version

Please specify what version of the library you are using: [1.1.3]

Expected / Desired Behavior / Question

"gulp serve" command serves web par without errors

Observed Behavior

"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"""

Steps to Reproduce

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!

Category

[ ] Enhancement

[ ] Bug

[ x] Question

Version

Please specify what version of the library you are using: [ 1.2.1 ]

Question

How do I add an application image for an application which is not included OOTB?

Observed Behavior

Unable to use image for my application while using a ListView

Steps to Reproduce

set iconFieldName=link to file

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.

Category

[ ] Enhancement

[X ] Bug

[ ] Question

Version

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.

Expected / Desired Behavior / Question

When giving af path that ends in .pdf I would expect to get a PDF icon.

Observed Behavior

No application specific icon is given - just the default icon (white shet of paper like thing).

Steps to Reproduce

Create a webpart and render

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.1.1 ]

Expected / Desired Behavior / Question

When switching between 'live/preview' to 'edit' mode my className styles should still prevail.

Observed Behavior

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.

Steps to Reproduce

Set the className for the WebPartTitle component. Start the workbench and switch between Preview and Edit mode.

[x ] Enhancement

[ ] Bug

[ ] Question

Property control to query the search results.
Similar to Search Results in classic SharePoint.

Thanks!

[x ] Enhancement

A rich text editor that lets users 'enhanced' rich text inline, like in classic pages.

Category

[ ] Enhancement
[x] Bug
[ ] Question

Version

Please specify what version of the library you are using: [1.3.0]

Expected / Desired Behavior / Question

Icon not always show up in the placeholder control.

[ ] Enhancement

[ ] Bug

[x] Question

Version

Please specify what version of the library you are using: [1.1.1]

Expected / Desired Behavior / Question

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.

IHelloWorldProps.ts

import { DisplayMode } from '@microsoft/sp-core-library/lib';
export interface IHelloWorldProps {
   title: string;
   description: string;
   displayMode: DisplayMode;
   updateProperty: (value: string) => void;
}

HelloWorldWebPart.ts (truncated for brevity)

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);
   }
}

HelloWorld.tsx (truncated for brevity)

...
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}
                  />...

HelloWorldWebPart.ts (truncated for brevity)

...
 protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
      ...
      groups: [
         {
            groupName: strings.BasicGroupName,
            groupFields: [
               PropertyPaneTextField('title', {
                  label: 'Title Field'
               }),
              PropertyPaneTextField('description', {
                 label: strings.DescriptionFieldLabel
              })
            ]
         }...

Category

[ ] Enhancement

[ ] Bug

[X ] Question

Expected / Desired Behavior / 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!

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

1.0.0-beta.6

Expected / Desired Behavior / Question

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.

Observed Behavior

I expected the item value and the state update to execute once with the values passed from the selected item.

Steps to Reproduce

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!

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [1.1.2 ]

Expected / Desired Behavior / Question

FileTypeIcon control is displayed correctly when used in Field Customizer.

Observed Behavior

FileTypeIcon is not displayed

Steps to Reproduce

• create Field Customizer Project with React Framework
• install and reference @pnp/spfx-controls-react
• change the customizer markup to be something like

<div className={styles.cell}>
  <FileTypeIcon type={IconType.font} path={'.docx'} />
</div>

• nothing is rendered

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

A taxonomy picker control that works similarly to the classic one.

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

[ 1.2.5 ]

Expected / Desired Behavior / Question

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?)

Observed Behavior

"TypeError: Cannot read property 'setItems' of undefined"
ListView.tsx, line 63

Steps to Reproduce

Add a ListView control without 'selection' property.

We should have SPFieldType be part of the column definitions, and then separate controls for each of the field types.

Category

[ ] Enhancement
[x] Bug
[ ] Question

Expected / Desired Behavior / Question

Fix for sorting listview items introduced an issue #48. Reported by @BubaGuM

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.

Category

[ ] Enhancement

[ ] Bug

[X ] Question

Version

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:)

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

Category

[ X] Bug

Observed Behavior

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

Category

[x] Enhancement
[ ] Bug
[ ] Question

Add a new control which renders the child components if the user has the right permissions.

Align documentation with the property controls project. Version badges, remarks about version, ...

Category

• Enhancement
• Bug
• Question

Expected / Desired Behavior / Question

It would nice to have a property which allows you to specify term IDs which may not be used or selectable.

Hi, is anyone working on grouping in the listview? I can add that if needed, but don't want to duplicate effort.

Category

[ x] Enhancement

[ ] Bug

[ ] Question

Version

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.

A new control that allows you to include a map into your SPFx solution.