typescriptsharepoint-onlinetaggingspfxsharepointframework

Tag Picker in SPFx


I am trying to use the FluentUI Tag picker on https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers for one of my projects

Being a newbie , I am experiencing challenges implementing this on SPFx.

Also googled a lot for examples , no luck

I would really appreciate if anyone could help me with its implementation or examples if any

Thanks in advance


Solution

  • Simple example:

    import * as React from 'react';
    import styles from './OfficeUispfx.module.scss';
    import { IOfficeUispfxProps } from './IOfficeUispfxProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    
    import {
      TagPicker,
      IBasePicker,
      ITag,
      IInputProps,
      IBasePickerSuggestionsProps,
    } from 'office-ui-fabric-react/lib/Pickers';
    import { Toggle, IToggleStyles } from 'office-ui-fabric-react/lib/Toggle';
    import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
    import { useBoolean } from '@uifabric/react-hooks';
    
    export default class OfficeUispfx extends React.Component<IOfficeUispfxProps, any> {
      
      
      public render(): React.ReactElement<IOfficeUispfxProps> {    
        
        const rootClass = mergeStyles({
          maxWidth: 500,
        });
        
        const toggleStyles: Partial<IToggleStyles> = { root: { margin: '10px 0' } };
        
        const inputProps: IInputProps = {
          onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),
          onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),
          'aria-label': 'Tag picker',
        };
        
        const pickerSuggestionsProps: IBasePickerSuggestionsProps = {
          suggestionsHeaderText: 'Suggested tags',
          noResultsFoundText: 'No color tags found',
        };
        
        const testTags: ITag[] = [
          'black',
          'blue',
          'brown',
          'cyan',
          'green',
          'magenta',
          'mauve',
          'orange',
          'pink',
          'purple',
          'red',
          'rose',
          'violet',
          'white',
          'yellow',
        ].map(item => ({ key: item, name: item }));
        
        const listContainsTagList = (tag: ITag, tagList?: ITag[]) => {
          if (!tagList || !tagList.length || tagList.length === 0) {
            return false;
          }
          return tagList.some(compareTag => compareTag.key === tag.key);
        };
        
        const filterSuggestedTags = (filterText: string, tagList: ITag[]): ITag[] => {
          return filterText
            ? testTags.filter(
                tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0 && !listContainsTagList(tag, tagList),
              )
            : [];
        };
        
        const filterSelectedTags = (filterText: string, tagList: ITag[]): ITag[] => {
          return filterText ? testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) : [];
        };
        
        const getTextFromItem = (item: ITag) => item.name;
        
        
       
      
        return (
          <div className={ styles.officeUispfx }>
            <div className={ styles.container }>
              <div className={ styles.row }>
                <div className={ styles.column }>
                  <span className={ styles.title }>Welcome to SharePoint!</span>
                  <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
                  <p className={ styles.description }>{escape(this.props.description)}</p>
                  <a href="https://aka.ms/spfx" className={ styles.button }>
                    <span className={ styles.label }>Learn more</span>
                  </a>
                </div>
                
              </div>
            </div>
            <TagPicker
            removeButtonAriaLabel="Remove"
            onResolveSuggestions={filterSuggestedTags}
            getTextFromItem={getTextFromItem}
            pickerSuggestionsProps={pickerSuggestionsProps}
            itemLimit={2}
           
            inputProps={inputProps}
          />
         
          
          
          
          </div>
        );
      }
       
    }
    

    Test Result: enter image description here Another demo:
    https://github.com/RaspeR87/sp-dev-fx-webparts/blob/master/speaker-webpart/src/webparts/speakerSubmission/components/SpeakerSubmission.tsx