honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

react-datatable: Added feature to show profile picture of user column

This commit is contained in:
chandaniprajapati 2021-04-10 15:08:18 +05:30
parent cc44e4e0f1
commit 901c9054f1
7 changed files with 80 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-datatable/README.md
View File

@ -43,6 +43,7 @@ Version|Date|Comments
1.1|February 24, 2021|Added support for large lists
1.2|March 01, 2021|Fixed search issue for number field
1.3|March 31,2021| Changed UI as per SharePoint list, Set themeing as per current SharePoint site theme, Created custom pagination by using reusable controls, Added features to export CSV based on the filter if the filter is available, Added hyperlink feature for image and link column in export to pdf and also set alternative row formatting in generated pdf as per property pane configuration odd/even row color, fixed object issue (for people/hyperlink, etc) in export to CSV.
1.4|April 10, 2021|Added feature to show profile picture in user column and shows display name of user field in export to CSV and PDF.
## Disclaimer

BIN
samples/react-datatable/assets/preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 48 KiB

22
samples/react-datatable/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter.ts
View File

@ -1,14 +1,16 @@
export function csvCellFormatter(value: any, type: string) {
if (!value) {
return value;
}
switch (type) {
case 'SP.FieldUrl':
value = value.props.children;
break;
default:
break;
}
if (!value) {
return value;
}
switch (type) {
case 'SP.FieldUrl':
value = value.props.children;
break;
case 'SP.FieldUser':
value = value.props.displayName;
default:
break;
}
return value;
}

24
samples/react-datatable/src/shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter.ts
View File

@ -1,15 +1,17 @@
export function pdfCellFormatter(value: any, type: string) {
if (!value) {
return value;
}
switch (type) {
case 'SP.FieldUrl':
let { children: text, href: link } = value.props;
value = { text, link, color: 'blue' };
break;
default:
break;
}
if (!value) {
return value;
}
switch (type) {
case 'SP.FieldUrl':
let { children: text, href: link } = value.props;
value = { text, link, color: 'blue' };
break;
case 'SP.FieldUser':
value = value.props.displayName;
default:
break;
}
return value;
}

29
samples/react-datatable/src/shared/common/RenderProfilePicture/RenderProfilePicture.tsx Normal file
View File

@ -0,0 +1,29 @@
import * as React from 'react';
import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
interface IProfilePicProps {
loginName: string;
displayName: string;
getUserProfileUrl: () => Promise<string>;
}
export function RenderProfilePicture(props: IProfilePicProps) {
const [profileUrl, setProfileUrl] = React.useState<string>();
let { displayName, getUserProfileUrl } = props;
React.useEffect(() => {
getUserProfileUrl().then(url => {
setProfileUrl(url);
});
}, [props])
return (
<Persona
imageUrl={profileUrl}
text={displayName}
size={PersonaSize.size32}
imageAlt={displayName}
styles={{ primaryText: { fontSize: '12px' } }}
/>);
}

7
samples/react-datatable/src/shared/service/SPService.ts
View File

@ -17,7 +17,7 @@ export class SPService {
for (var i = 0; i < selectedFields.length; i++) {
switch (selectedFields[i].fieldType) {
case 'SP.FieldUser':
selectQuery.push(`${selectedFields[i].key}/Title,${selectedFields[i].key}/Name`);
selectQuery.push(`${selectedFields[i].key}/Title,${selectedFields[i].key}/EMail,${selectedFields[i].key}/Name`);
expandQuery.push(selectedFields[i].key);
break;
case 'SP.FieldLookup':
@ -63,9 +63,10 @@ export class SPService {
}
}
public async getUserProfileUrl(loginName: string, propertyName: string) {
public async getUserProfileUrl(loginName: string) {
try {
const profileUrl = await sp.profiles.getUserProfilePropertyFor(loginName, propertyName);
const properties = await sp.profiles.getPropertiesFor(loginName);
const profileUrl = properties['PictureUrl'];
return profileUrl;
}
catch (err) {

35
samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx
View File

@ -17,7 +17,7 @@ import { DetailsList, DetailsListLayoutMode, DetailsRow, IDetailsRowStyles, IDet
import { pdfCellFormatter } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter';
import { csvCellFormatter } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter';
import { IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';
import { RenderProfilePicture } from '../../../shared/common/RenderProfilePicture/RenderProfilePicture';
export default class ReactDatatable extends React.Component<IReactDatatableProps, IReactDatatableState> {
@ -45,6 +45,10 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
this.getSelectedListItems();
}
private getUserProfileUrl = (loginName: string) => {
return this._services.getUserProfileUrl(loginName)
}
public componentDidUpdate(prevProps: IReactDatatableProps) {
if (prevProps.list !== this.props.list) {
this.props.onChangeProperty("list");
@ -82,7 +86,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
private _onConfigure() {
this.props.context.propertyPane.open();
}
public formatColumnValue(value: any, type: string) {
if (!value) {
@ -102,7 +106,9 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
value = value['Title'];
break;
case 'SP.FieldUser':
value = value['Title'];
let loginName = value['Name'];
let userName = value['Title'];
value = <RenderProfilePicture loginName={loginName} displayName={userName} getUserProfileUrl={() => this.getUserProfileUrl(loginName)} ></RenderProfilePicture>;
break;
case 'SP.FieldMultiLineText':
value = <div dangerouslySetInnerHTML={{ __html: value }}></div>;
@ -124,6 +130,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
}
return value;
}
public formatValueForExportingData(value: any, type?: string) {
if (!value) {
return value;
@ -144,17 +151,17 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
return value;
}
private exportDataFormatter(fields: Array<IPropertyPaneDropdownOption & { fieldType: string }>, listItems: any[], cellFormatterFn: (value: any, type: string) => any){
private exportDataFormatter(fields: Array<IPropertyPaneDropdownOption & { fieldType: string }>, listItems: any[], cellFormatterFn: (value: any, type: string) => any) {
return listItems && listItems.map(item => ({
...fields.reduce((ob, f) => {
ob[f.text] = item[f.key] ? cellFormatterFn(item[f.key], f.fieldType) : '-';
return ob;
}, {})
}));
...fields.reduce((ob, f) => {
ob[f.text] = item[f.key] ? cellFormatterFn(item[f.key], f.fieldType) : '-';
return ob;
}, {})
}));
}
private handlePaginationChange(pageNo: number, pageSize: number) {
this.setState({ page: pageNo, rowsPerPage: pageSize });
private handlePaginationChange(pageNo: number, rowsPerPage: number) {
this.setState({ page: pageNo, rowsPerPage: rowsPerPage });
}
public handleSearch(event: React.ChangeEvent<HTMLInputElement>) {
@ -257,8 +264,8 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
columnHeader={columns.map(c => c.name)}
listName={list}
description={title}
dataSource={()=> this.exportDataFormatter(fields, filteredItems, csvCellFormatter)}
/> : <></>}
dataSource={() => this.exportDataFormatter(fields, filteredItems, csvCellFormatter)}
/> : <></>}
{enableDownloadAsPdf
? <ExportListItemsToPDF
listName={list}
@ -266,7 +273,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
columns={columns.map(c => c.name)}
oddRowColor={oddRowColor}
evenRowColor={evenRowColor}
dataSource={()=> this.exportDataFormatter(fields, filteredItems, pdfCellFormatter)} />
dataSource={() => this.exportDataFormatter(fields, filteredItems, pdfCellFormatter)} />
: <></>}
</Grid>
<Grid container justify='flex-end' xs={6}>