Skip to content
No description, website, or topics provided.
TypeScript CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
assets
config
src
.editorconfig
.gitignore
.npmignore
.yo-rc.json
README.md
gulpfile.js
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

ListItemPicker control

This control allows you to select one or more item from list, based in a column value, the control suggest values based on characters typed

Here is an example of the control:

ListItemPicker select list items

ListItemPicker select list items

ListItemPicker selected Items

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the control into your component:
 
import { ListItemPicker } from '@pnp/spfx-controls-react/listItemPicker';
  • Use the ListItemPicker control in your code as follows:
          <ListItemPicker
            listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
            columnInternalName='Title'
            itemLimit={2}
            onSelectedItem={this.onSelectedItem}
            context={this.props.context}
          />
  • The onSelectedItem change event returns the list items selected and can be implemented as follows:
private onSelectedItem(data: { key: string; name: string }[]) {
    for (const item of data) {
      console.log(`Item value: ${item.name}`);
    }
  }

Implementation

The ListItemPicker control can be configured with the following properties:

Property Type Required Description
listId string yes Gui of List
columnInternalName string yes InternalName of column to search and get values
onSelectedItem: (item:any) =>void; function yes Callback function
className string no CSS className
webUrl string no URL of site if different of current site, user must have permissions
value Array no Default Value
disabled Boolean no Disable Control
itemLimit number yes Number os items to select / return
context WebPartContext|ApplicationCustomizerContext yes WebPart or Application customiser context
sugestedHeaderText string no Text header to display
noresultsFoundTextstring string no Text message when no items

You can’t perform that action at this time.