SPFX Read operation using React framework - Show all the list items
First we are creating context from WebPartContext in props ts file.
import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface INewCrudWithReactProps {
description: string;
context:WebPartContext;
siteUrl:string;
}
Then go to main .ts file, supply values to context and siteUrlpublic render(): void {
const element: React.ReactElement<INewCrudWithReactProps> = React.createElement(
NewCrudWithReact,
{
description: this.properties.description,
context:this.context,
siteUrl:this.context.pageContext.web.absoluteUrl
}
);
ReactDom.render(element, this.domElement);
}
Create ISoftwareCatalog ts file.
export interface ISoftwareCatalog{
Id:number;
Title:string;
SoftwareName: string;
SoftwareVendor: string;
SoftwareVersion: string;
SoftwareDescription: string;
}
Now Create ISoftwareCatalogState.ts file.
import { ISoftwareCatalog } from "./ISoftwareCatalog";
export interface ISoftwareCatalogState{
status: string;
SoftwareCatalogItems: ISoftwareCatalog[];
SoftwareCatalogItem: ISoftwareCatalog;
}
import * as React from 'react';
import styles from './NewCrudWithReact.module.scss';
import { INewCrudWithReactProps } from './INewCrudWithReactProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { ISoftwareCatalogState } from './ISoftwareCatalogState';
import { ISPHttpClientOptions, SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { TextField, PrimaryButton, DetailsList, DetailsListLayoutMode, CheckboxVisibility, SelectionMode, Dropdown, IDropdown, IDropdownOption, ITextFieldStyles, IDropdownStyles, DetailsRowCheck, Selection } from 'office-ui-fabric-react';
import { ISoftwareCatalog } from './ISoftwareCatalog';
//configure columns for the details list component
let _softwareCatalogColumns = [
{
key: 'ID',
name: 'ID',
fieldName: 'ID',
minWidth: 50,
maxWidth: 100,
isResizable: true
},
{
key: 'Title',
name: 'Title',
fieldName: 'Title',
minWidth: 50,
maxWidth: 100,
isResizable: true
},
{
key: 'SoftwareName',
name: 'SoftwareName',
fieldName: 'SoftwareName',
minWidth: 50,
maxWidth: 100,
isResizable: true
},
{
key: 'SoftwareVendor',
name: 'SoftwareVendor',
fieldName: 'SoftwareVendor',
minWidth: 50,
maxWidth: 100,
isResizable: true
},
{
key: 'SoftwareVersion',
name: 'SoftwareVersion',
fieldName: 'SoftwareVersion',
minWidth: 50,
maxWidth: 100,
isResizable: true
},
{
key: 'SoftwareDescription',
name: 'SoftwareDescription',
fieldName: 'SoftwareDescription',
minWidth: 50,
maxWidth: 100,
isResizable: true
}
];
//local constants for styles
const textFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: { width: 300 } };
const narrowTextFields: Partial<ITextFieldStyles> = { fieldGroup: { width: 300 } };
const narrowDropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 300 } };
export default class NewCrudWithReact extends React.Component<INewCrudWithReactProps, ISoftwareCatalogState> {
//for selection of item, this function calls
private _selection: Selection;
private _onItemsSelectionChanged = () =>{
this.setState({
SoftwareCatalogItem:(this._selection.getSelection()[0] as ISoftwareCatalog)
});
}
constructor(props:INewCrudWithReactProps,state:ISoftwareCatalogState){
super(props);
this.state={
status: 'Ready',
SoftwareCatalogItems:[],
SoftwareCatalogItem:{
Id:0,
Title:"",
SoftwareName: "",
SoftwareVendor: "",
SoftwareVersion: "",
SoftwareDescription:"",
}
};
//for selection item
this._selection = new Selection({
onSelectionChanged:this._onItemsSelectionChanged,
});
}
private _getListItems():Promise<ISoftwareCatalog[]>{
const url:string = this.props.siteUrl+"/_api/web/lists/getbytitle('SoftwareCatalog')/items";
return this.props.context.spHttpClient.get(url,SPHttpClient.configurations.v1)
.then(response =>{
return response.json();
})
.then(json=>{
return json.value;
}) as Promise<ISoftwareCatalog[]>;
}
public bindDetailsList(message:string):void{
this._getListItems().then(listItems=>{
this.setState({
SoftwareCatalogItems:listItems,
status:message
});
});
}
public componentDidMount():void{
this.bindDetailsList("All records have been loaded successfully");
}
public render(): React.ReactElement<INewCrudWithReactProps> {
const dropdownRef = React.createRef<IDropdown>();
return (
<div className={styles.newCrudWithReact}>
<TextField
label="ID"
required={false}
value={(this.state.SoftwareCatalogItem.Id).toString()}
styles={textFieldStyles}
//onChange={this._onSearchForChanged.bind(this)}
/>
<TextField
label="Software Title"
required={false}
value={(this.state.SoftwareCatalogItem.Title).toString()}
styles={textFieldStyles}
//onChange={this._onSearchForChanged.bind(this)}
/>
<TextField
label="Software Name"
required={false}
value={(this.state.SoftwareCatalogItem.SoftwareName).toString()}
styles={textFieldStyles}
//onChange={this._onSearchForChanged.bind(this)}
/>
<TextField
label="Software Description"
required={false}
value={(this.state.SoftwareCatalogItem.SoftwareDescription).toString()}
styles={textFieldStyles}
//onChange={this._onSearchForChanged.bind(this)}
/>
<TextField
label="Software Version"
required={false}
value={(this.state.SoftwareCatalogItem.SoftwareVersion).toString()}
styles={textFieldStyles}
//onChange={this._onSearchForChanged.bind(this)}
/>
<Dropdown
componentRef={dropdownRef}
placeholder="select an option"
label="Software Vendor"
options={[
{ key: 'Microsoft', text: 'Microsoft' },
{ key: 'Sun', text: 'Sun' },
{ key: 'Oracle', text: 'Oracle' },
{ key: 'Google', text: 'Google' },
{ key: 'IBM', text: 'IBM' }
]}
defaultSelectedKey={this.state.SoftwareCatalogItem.SoftwareVendor}
required
styles={narrowDropdownStyles}
//onChange={this._onSearchForChanged.bind(this)}
/>
<p className={styles.title}>
{/* <PrimaryButton
text='Add'
title='Add'
onClick={this.btnAdd_click}
/> */}
<div id="divStatus">
{this.state.status}
</div>
<div>
<DetailsList
items={this.state.SoftwareCatalogItems}
columns={_softwareCatalogColumns}
setKey='Id'
checkboxVisibility={CheckboxVisibility.always}
selectionMode={SelectionMode.single}
layoutMode={DetailsListLayoutMode.fixedColumns}
compact={true}
selection={this._selection}
/>
</div>
</p>
</div>
);
}
}
Refer: CRUDWithReact webpart under spfx folder.
Comments
Post a Comment