Jitz-office-fabric-sharepoint-react-controls NPM

JitzOfficeFabricSharePointReactControls

Office fabric UI React controls for SharePoint Framework(SPFx) extended to connect to SharePoint

Getting Started

The package depends on the packages generated by Yoeman generator for SPFx template

Prerequisites

Create the SPFx project according to Microsoft's documentation

How to use

Install the package using the command below

npm i jitz-office-fabric-sharepoint-react-controls

Import the package in your React component

import {JitzPeoplePicker} from 'jitz-office-fabric-sharepoint-react-controls/lib/controls/JitzPeoplePicker';
import {JitzDatePicker} from 'jitz-office-fabric-sharepoint-react-controls/lib/controls/JitzDatePicker';
import { JitzGrid } from 'jitz-office-fabric-sharepoint-react-controls/lib/controls/JitzGrid';

People picker usage

<JitzPeoplePicker description={""} spHttpClient={this.props.context.spHttpClient}
       siteUrl={this.props.context.pageContext.site.absoluteUrl} typePicker={"Normal"} 
       errorMessage={this.state.errorMessage}
       principalTypeUser={true} principalTypeSharePointGroup={false}   
       disabled={false}                                             
       principalTypeSecurityGroup={false}
       multiSelect={false}
       principalTypeDistributionList={false} 
       onChange={ (vals) => this.changeEvent(vals)} 
       numberOfItems={10} 
       prePopulatedItems={[this.state.arrayOfLoginNames]} 
       >
</JitzPeoplePicker>

Date Picker Usage

<JitzDatePicker value={session.startDate}     
disabled={false}                                                           
onSelectDate={(date)=>{this.sessionProperty<Date>(date,"startDate",index);}} />

Grid Usage

<JitzGrid key='Title' items={this.state.items} 
    renderCustomColumns={(fieldContent,fieldName)=>{ return this.renderCustomColumns(fieldContent,fieldName);}}
    modifyColumns={(col)=>{return this.modifyColumns(col);}}
    onItemSelect={(items)=>{this.setSelectedItems(items);}} 
    onItemInvoked={(item,index)=>{this.itemInvoked(item,index);}}/>

    renderCustomColumns=(fieldContent:any,fieldName:string)=>{
              if(fieldName === 'date'){     
                    return <span>{this.formatDate(fieldContent)}</span>;
                }
              else {
                  return <span>{fieldContent}</span>;
                }
        }
    
    modifyColumns = (columns: IColumn[]) =>{
           columns.map((column,index)=>{
              switch(column.key){
                  case "fieldName":{
                      column.name = "Coulmn Name";
                      break;
                  }
                  default:{
                      break;
                  }
              }
           });
           return columns;
         }
    
    setSelectedItems = (items:IGridItem[])=>{
             if(items.length> 0){
                 this.setState({selectedItemId:items[0].id});
             }
             else{
                 this.setState({selectedItemId:undefined});
             }
           }

    itemInvoked = (item:any, index:number|undefined) => {
            this.setState({selectedItemId:item.id});
         }