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

Merge pull request #3099 from chandaniprajapati/react-data-table 

React-datatable: Added list attachment support
This commit is contained in:
Hugo Bernier 2022-11-08 14:00:08 -05:00 committed by GitHub
parent 14bb0aef75 332dd122a6
commit b034e1fe6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 60 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-datatable/.gitignore vendored
View File

@ -35,3 +35,4 @@ obj
*.cer
# .PEM Certificates
*.pem
*.scss.d.ts

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

@ -51,6 +51,7 @@ Version|Date|Comments
1.5|June 2, 2021|Added feature to show image in dataTable and upgraded to the SPFx version 1.12.1.
1.6|July 16, 2021|Changed library export-to-csv with react-csv
1.7|Feb 22, 2022|Upgrade to SPFx v1.14.0
1.8|November 01, 2022|Added support for list attachments
## Minimal Path to Awesome

2
samples/react-datatable/assets/sample.json
View File

@ -9,7 +9,7 @@
"This web part provides easy way to render SharePoint custom list in data table view with all the necessary features."
],
"creationDateTime": "2021-03-01",
"updateDateTime": "2022-02-22",
"updateDateTime": "2022-11-01",
"products": [
"SharePoint"
],

6
samples/react-datatable/fast-serve/config.json Normal file
View File

@ -0,0 +1,6 @@
{
"$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.latest.schema.json",
"cli": {
"isLibraryComponent": false
}
}

24
samples/react-datatable/fast-serve/webpack.extend.js Normal file
View File

@ -0,0 +1,24 @@
/*
* User webpack settings file. You can add your own settings here.
* Changes from this file will be merged into the base webpack configuration file.
* This file will not be overwritten by the subsequent spfx-fast-serve calls.
*/
// you can add your project related webpack configuration here, it will be merged using webpack-merge module
// i.e. plugins: [new webpack.Plugin()]
const webpackConfig = {
}
// for even more fine-grained control, you can apply custom webpack settings using below function
const transformConfig = function (initialWebpackConfig) {
// transform the initial webpack config here, i.e.
// initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.
return initialWebpackConfig;
}
module.exports = {
webpackConfig,
transformConfig
}

6
samples/react-datatable/gulpfile.js vendored
View File

@ -13,4 +13,10 @@ build.rig.getTasks = function () {
return result;
};
/* fast-serve */
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/* end of fast-serve */
build.initialize(require('gulp'));

6
samples/react-datatable/package.json
View File

@ -9,7 +9,8 @@
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
"test": "gulp test",
"serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve"
},
"dependencies": {
"@material-ui/core": "^4.12.3",
@ -39,6 +40,7 @@
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"@types/webpack-env": "1.14.0",
"@types/es6-promise": "0.0.33"
"@types/es6-promise": "0.0.33",
"spfx-fast-serve-helpers": "~1.14.0"
}
}

3
samples/react-datatable/src/shared/common/RenderImageOrLink/RenderImageOrLink.tsx
View File

@ -30,7 +30,7 @@ export function RenderImageOrLink(props: IImageOrLinkProps) {
alt={description}
height={50}
width={50}
onClick={() => window.location.href = url }
onClick={() => window.location.href = url}
imageFit={ImageFit.cover}
/>
) :
@ -40,5 +40,4 @@ export function RenderImageOrLink(props: IImageOrLinkProps) {
)
}
</>;
}

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

@ -25,7 +25,7 @@ export class SPService {
expandQuery.push(selectedFields[i].key);
break;
case 'SP.Field':
selectQuery.push('Attachments,AttachmentFiles');
selectQuery.push('AttachmentFiles');
expandQuery.push('AttachmentFiles');
break;
default:
@ -54,7 +54,7 @@ export class SPService {
const allFields: any[] = await sp.web.lists
.getById(selectedList)
.fields
.filter("Hidden eq false and ReadOnlyField eq false and Title ne 'Content Type' and Title ne 'Attachments'")
.filter("Hidden eq false and ReadOnlyField eq false and Title ne 'Content Type'")
.get();
return allFields;
}

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

@ -7,14 +7,14 @@ import { SPService } from '../../../shared/service/SPService';
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import { DisplayMode } from '@microsoft/sp-core-library';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Grid } from '@material-ui/core';
import { Link, Text } from 'office-ui-fabric-react';
import Grid from '@material-ui/core/Grid';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { ExportListItemsToCSV } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSV';
import { ExportListItemsToPDF } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDF';
import { Pagination } from '../../../shared/common/Pagination/Pagination';
import { RenderImageOrLink } from '../../../shared/common/RenderImageOrLink/RenderImageOrLink';
import { DetailsList, DetailsListLayoutMode, DetailsRow, IDetailsRowStyles, IDetailsListProps, IColumn, MessageBar, SelectionMode } from 'office-ui-fabric-react';
import { DetailsList, DetailsListLayoutMode, DetailsRow, IDetailsRowStyles, IDetailsListProps, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
import { pdfCellFormatter } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter';
import { csvCellFormatter } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter';
import { IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';
@ -66,7 +66,14 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
/** Format list items for data grid */
listItems = listItems && listItems.map(item => ({
id: item.Id, ...fields.reduce((ob, f) => {
ob[f.key] = item[f.key] ? this.formatColumnValue(item[f.key], f.fieldType) : '-';
if (f.key === "Attachments") {
ob[f.key] = this.formatColumnValue(item["AttachmentFiles"], f.fieldType);
}
else {
if (item[f.key]) {
ob[f.key] = this.formatColumnValue(item[f.key], f.fieldType);
}
}
return ob;
}, {})
}));
@ -88,7 +95,6 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
this.props.context.propertyPane.open();
}
public formatColumnValue(value: any, type: string) {
if (!value) {
return value;
@ -128,6 +134,9 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
case 'SP.FieldLocation':
value = JSON.parse(value).DisplayName;
break;
case 'SP.Field':
value = value?.map(v => <><RenderImageOrLink key={v['odata.id']} url={v['ServerRelativeUrl']} description={v['FileName']}></RenderImageOrLink><br /></>);
break;
default:
break;
}