SPFx ListItemPicker Control

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-selectlistListItemPicker-selectlist2

Can find the source code here :   https://github.com/joaojmendes/listItemPicker

How to use this control in your solutions

  •  run   npm i list-item-picker –save
  • Import the control into your component:
 
import { ListItemPicker } from 'list-item-picker/lib/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}
          />

Control 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