mirror of
https://github.com/pnp/sp-dev-fx-webparts.git
synced 2025-02-09 06:25:01 +00:00
Merge pull request #1920 from chandaniprajapati/react-datatable-image
Added functionality to show image in DataTable and upgraded to SPFx 1…
This commit is contained in:
commit
6ee82587a1
@ -17,8 +17,8 @@ This web part provides easy way to render SharePoint custom list in datatable vi
|
||||
|
||||
## Compatibility
|
||||
|
||||
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
|
||||
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
|
||||
![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
|
||||
![Node.js LTS v14 | LTS v12 | LTS v10](https://img.shields.io/badge/Node.js-LTS%20v14%20%7C%20LTS%20v12%20%7C%20LTS%20v10-green.svg)
|
||||
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
|
||||
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
|
||||
![Workbench Hosted](https://img.shields.io/badge/Workbench-%20Hosted-yellow.svg)
|
||||
@ -44,6 +44,7 @@ Version|Date|Comments
|
||||
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.
|
||||
1.5|June 2, 2021|Added feature to show image in dataTable and upgraded to the SPFx version 1.12.1.
|
||||
|
||||
|
||||
## Disclaimer
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 75 KiB |
@ -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": "2021-04-10",
|
||||
"updateDateTime": "2021-06-02",
|
||||
"products": [
|
||||
"SharePoint",
|
||||
"Office"
|
||||
@ -21,7 +21,7 @@
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.11.0"
|
||||
"value": "1.12.1"
|
||||
},
|
||||
{
|
||||
"key": "PNPCONTROLS",
|
||||
|
@ -3,7 +3,7 @@
|
||||
"solution": {
|
||||
"name": "react-datatable-client-side-solution",
|
||||
"id": "35299377-f8c8-4721-bd53-05602fc0c4ee",
|
||||
"version": "1.1.0.0",
|
||||
"version": "1.5.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false,
|
||||
"developer": {
|
||||
|
9
samples/react-datatable/gulpfile.js
vendored
9
samples/react-datatable/gulpfile.js
vendored
@ -4,4 +4,13 @@ const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
|
||||
var getTasks = build.rig.getTasks;
|
||||
build.rig.getTasks = function () {
|
||||
var result = getTasks.call(build.rig);
|
||||
|
||||
result.set('serve', result.get('serve-deprecated'));
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
|
17632
samples/react-datatable/package-lock.json
generated
17632
samples/react-datatable/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-datatable",
|
||||
"version": "1.1.0",
|
||||
"version": "1.5.0",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
@ -12,33 +12,31 @@
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.11.3",
|
||||
"@material-ui/data-grid": "^4.0.0-alpha.19",
|
||||
"@material-ui/core": "^4.11.4",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.57",
|
||||
"@microsoft/sp-core-library": "1.11.0",
|
||||
"@microsoft/sp-lodash-subset": "1.11.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.11.0",
|
||||
"@microsoft/sp-property-pane": "1.11.0",
|
||||
"@microsoft/sp-webpart-base": "1.11.0",
|
||||
"@pnp/sp": "^2.1.1",
|
||||
"@pnp/spfx-controls-react": "^2.4.0",
|
||||
"@pnp/spfx-property-controls": "^2.3.0",
|
||||
"@microsoft/sp-core-library": "1.12.1",
|
||||
"@microsoft/sp-lodash-subset": "1.12.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.12.1",
|
||||
"@microsoft/sp-property-pane": "1.12.1",
|
||||
"@microsoft/sp-webpart-base": "1.12.1",
|
||||
"@pnp/sp": "2.5.0",
|
||||
"@pnp/spfx-controls-react": "3.1.0",
|
||||
"@pnp/spfx-property-controls": "^3.2.0-beta.ab74df5",
|
||||
"export-to-csv": "^0.2.1",
|
||||
"office-ui-fabric-react": "6.214.0",
|
||||
"office-ui-fabric-react": "7.156.0",
|
||||
"pdfmake": "^0.1.70",
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5"
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@microsoft/sp-build-web": "1.11.0",
|
||||
"@microsoft/sp-tslint-rules": "1.11.0",
|
||||
"@microsoft/sp-module-interfaces": "1.11.0",
|
||||
"@microsoft/sp-webpart-workbench": "1.11.0",
|
||||
"@types/react": "16.9.36",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"@microsoft/sp-build-web": "1.12.1",
|
||||
"@microsoft/sp-tslint-rules": "1.12.1",
|
||||
"@microsoft/sp-module-interfaces": "1.12.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.12.1",
|
||||
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||
"gulp": "~3.9.1",
|
||||
"gulp": "~4.0.2",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2",
|
||||
|
@ -0,0 +1,104 @@
|
||||
{
|
||||
"bundles": {
|
||||
"react-datatable-web-part": {
|
||||
"dependencies": [
|
||||
{
|
||||
"componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||||
"componentName": "@microsoft/sp-property-pane",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": true
|
||||
},
|
||||
{
|
||||
"componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
|
||||
"componentName": "@microsoft/sp-loader",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
|
||||
"componentName": "@ms/sp-telemetry",
|
||||
"componentVersion": "0.19.2",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "e40f8203-b39d-425a-a957-714852e33b79",
|
||||
"componentName": "@microsoft/sp-dynamic-data",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
|
||||
"componentName": "@microsoft/sp-lodash-subset",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||
"componentName": "@microsoft/sp-core-library",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "01c4df03-e775-48cb-aa14-171ee5199a15",
|
||||
"componentName": "tslib",
|
||||
"componentVersion": "1.10.0",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176",
|
||||
"componentName": "@ms/odsp-core-bundle",
|
||||
"componentVersion": "1.1.13",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
|
||||
"componentName": "@microsoft/sp-diagnostics",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
|
||||
"componentName": "@microsoft/sp-page-context",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "229b8d08-79f3-438b-8c21-4613fc877abd",
|
||||
"componentName": "@microsoft/load-themed-styles",
|
||||
"componentVersion": "0.1.2",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
|
||||
"componentName": "@microsoft/sp-http",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"componentName": "react",
|
||||
"componentVersion": "16.9.0",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"componentName": "react-dom",
|
||||
"componentVersion": "16.9.0",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||
"componentName": "@microsoft/sp-webpart-base",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": true
|
||||
},
|
||||
{
|
||||
"componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
|
||||
"componentName": "@microsoft/sp-component-base",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,154 @@
|
||||
{
|
||||
"id": "9d6e26c1-e57c-4005-ad6a-5b066f1acd65",
|
||||
"alias": "ReactDatatableWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "1.1.0",
|
||||
"manifestVersion": 2,
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": [
|
||||
"SharePointWebPart"
|
||||
],
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||||
"group": {
|
||||
"default": "Other"
|
||||
},
|
||||
"title": {
|
||||
"default": "Datatable"
|
||||
},
|
||||
"description": {
|
||||
"default": "Shows the sharepoint list items in data table format with some advanced features."
|
||||
},
|
||||
"officeFabricIconFontName": "Table",
|
||||
"properties": {
|
||||
"title": "Webpart Title (eg. DataTable)",
|
||||
"enableSorting": true,
|
||||
"enableSearching": true,
|
||||
"enableDownloadAsCsv": true,
|
||||
"enableDownloadAsPdf": true,
|
||||
"enablePagination": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"loaderConfig": {
|
||||
"internalModuleBaseUrls": [
|
||||
"<!-- PATH TO CDN -->"
|
||||
],
|
||||
"entryModuleId": "react-datatable-web-part",
|
||||
"scriptResources": {
|
||||
"react-datatable-web-part": {
|
||||
"type": "path",
|
||||
"path": "react-datatable-web-part.js"
|
||||
},
|
||||
"@microsoft/sp-property-pane": {
|
||||
"type": "component",
|
||||
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"@microsoft/sp-lodash-subset": {
|
||||
"type": "component",
|
||||
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"ControlStrings": {
|
||||
"type": "localizedPath",
|
||||
"paths": {
|
||||
"bg-BG": "ControlStrings_bg-bg.js",
|
||||
"ca-ES": "ControlStrings_ca-es.js",
|
||||
"da-DK": "ControlStrings_da-dk.js",
|
||||
"de-DE": "ControlStrings_de-de.js",
|
||||
"el-GR": "ControlStrings_el-gr.js",
|
||||
"en-US": "ControlStrings_en-us.js",
|
||||
"es-ES": "ControlStrings_es-es.js",
|
||||
"et-EE": "ControlStrings_et-ee.js",
|
||||
"eu-ES": "ControlStrings_eu-es.js",
|
||||
"fi-FI": "ControlStrings_fi-fi.js",
|
||||
"fr-CA": "ControlStrings_fr-ca.js",
|
||||
"fr-FR": "ControlStrings_fr-fr.js",
|
||||
"it-IT": "ControlStrings_it-it.js",
|
||||
"ja-JP": "ControlStrings_ja-jp.js",
|
||||
"lt-LT": "ControlStrings_lt-lt.js",
|
||||
"lv-LV": "ControlStrings_lv-lv.js",
|
||||
"nb-NO": "ControlStrings_nb-no.js",
|
||||
"nl-NL": "ControlStrings_nl-nl.js",
|
||||
"pl-PL": "ControlStrings_pl-pl.js",
|
||||
"pt-PT": "ControlStrings_pt-pt.js",
|
||||
"ro-RO": "ControlStrings_ro-ro.js",
|
||||
"ru-RU": "ControlStrings_ru-ru.js",
|
||||
"sk-SK": "ControlStrings_sk-sk.js",
|
||||
"sr-Latn-RS": "ControlStrings_sr-latn-rs.js",
|
||||
"sv-SE": "ControlStrings_sv-se.js",
|
||||
"tr-TR": "ControlStrings_tr-tr.js",
|
||||
"vi-VN": "ControlStrings_vi-vn.js",
|
||||
"zh-CN": "ControlStrings_zh-cn.js",
|
||||
"zh-TW": "ControlStrings_zh-tw.js"
|
||||
},
|
||||
"defaultPath": "ControlStrings_en-us.js"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"ReactDatatableWebPartStrings": {
|
||||
"type": "path",
|
||||
"path": "ReactDatatableWebPartStrings_en-us.js"
|
||||
},
|
||||
"@microsoft/sp-webpart-base": {
|
||||
"type": "component",
|
||||
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"version": "16.9.0"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"version": "16.9.0"
|
||||
},
|
||||
"@microsoft/sp-http": {
|
||||
"type": "component",
|
||||
"id": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"PropertyControlStrings": {
|
||||
"type": "localizedPath",
|
||||
"paths": {
|
||||
"bg-BG": "PropertyControlStrings_bg-bg.js",
|
||||
"ca-ES": "PropertyControlStrings_ca-es.js",
|
||||
"da-DK": "PropertyControlStrings_da-dk.js",
|
||||
"de-DE": "PropertyControlStrings_de-de.js",
|
||||
"el-GR": "PropertyControlStrings_el-gr.js",
|
||||
"en-US": "PropertyControlStrings_en-us.js",
|
||||
"es-ES": "PropertyControlStrings_es-es.js",
|
||||
"et-EE": "PropertyControlStrings_et-ee.js",
|
||||
"fi-FI": "PropertyControlStrings_fi-fi.js",
|
||||
"fr-FR": "PropertyControlStrings_fr-fr.js",
|
||||
"it-IT": "PropertyControlStrings_it-it.js",
|
||||
"ja-JP": "PropertyControlStrings_ja-jp.js",
|
||||
"lt-LT": "PropertyControlStrings_lt-lt.js",
|
||||
"lv-LV": "PropertyControlStrings_lv-lv.js",
|
||||
"nb-NO": "PropertyControlStrings_nb-no.js",
|
||||
"nl-NL": "PropertyControlStrings_nl-nl.js",
|
||||
"no": "PropertyControlStrings_no.js",
|
||||
"pl-PL": "PropertyControlStrings_pl-pl.js",
|
||||
"pt-PT": "PropertyControlStrings_pt-pt.js",
|
||||
"ro-RO": "PropertyControlStrings_ro-ro.js",
|
||||
"ru-RU": "PropertyControlStrings_ru-ru.js",
|
||||
"sk-SK": "PropertyControlStrings_sk-sk.js",
|
||||
"sr-Latn-RS": "PropertyControlStrings_sr-latn-rs.js",
|
||||
"sv-SE": "PropertyControlStrings_sv-se.js",
|
||||
"tr-TR": "PropertyControlStrings_tr-tr.js",
|
||||
"vi-VN": "PropertyControlStrings_vi-vn.js",
|
||||
"zh-CN": "PropertyControlStrings_zh-cn.js",
|
||||
"zh-TW": "PropertyControlStrings_zh-tw.js"
|
||||
},
|
||||
"defaultPath": "PropertyControlStrings_en-us.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -8,6 +8,7 @@ export function csvCellFormatter(value: any, type: string) {
|
||||
break;
|
||||
case 'SP.FieldUser':
|
||||
value = value.props.displayName;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
@ -28,13 +28,13 @@ export function ExportListItemsToPDF(props: IExportToPDF) {
|
||||
let dataTableRows = dataSource().map(lItem => columns.reduce((arr, c) => [...arr, isNullOrUndefined(lItem[c]) ? '' : lItem[c]], []));
|
||||
|
||||
let data = {
|
||||
content: [
|
||||
content: [
|
||||
{
|
||||
text: title,
|
||||
fontSize: 16,
|
||||
alignment: 'center',
|
||||
margin: [0, 0, 0, 15]
|
||||
},
|
||||
},
|
||||
{
|
||||
style: 'tableExample',
|
||||
table: {
|
||||
@ -46,7 +46,7 @@ export function ExportListItemsToPDF(props: IExportToPDF) {
|
||||
]
|
||||
},
|
||||
layout: {
|
||||
fillColor: function (rowIndex: number) {
|
||||
fillColor: (rowIndex: number)=> {
|
||||
if (oddRowColor && evenRowColor)
|
||||
return (rowIndex % 2 === 0) ? evenRowColor : oddRowColor;
|
||||
else
|
||||
@ -57,7 +57,7 @@ export function ExportListItemsToPDF(props: IExportToPDF) {
|
||||
]
|
||||
};
|
||||
pdfMake.createPdf(data).download(`${listName}.pdf`);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PrimaryButton
|
||||
@ -67,4 +67,4 @@ export function ExportListItemsToPDF(props: IExportToPDF) {
|
||||
className={styles.btnPDF}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -8,7 +8,8 @@ export function pdfCellFormatter(value: any, type: string) {
|
||||
value = { text, link, color: 'blue' };
|
||||
break;
|
||||
case 'SP.FieldUser':
|
||||
value = value.props.displayName;
|
||||
value = value.props.displayName;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
@ -0,0 +1,44 @@
|
||||
import * as React from 'react';
|
||||
import * as strings from 'ReactDatatableWebPartStrings';
|
||||
import { isImageUrl, isNullOrUndefined } from '../../../shared/utilities/utilities';
|
||||
import { Link } from '@material-ui/core';
|
||||
import { Image, IImageProps, ImageFit } from 'office-ui-fabric-react/lib/Image';
|
||||
import styles from '../ExportListItemsToCSV/ExportListItemsToCSV.module.scss';
|
||||
|
||||
interface IImageOrLinkProps {
|
||||
url: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export function RenderImageOrLink(props: IImageOrLinkProps) {
|
||||
|
||||
const [isImage, setIsImage] = React.useState<boolean>();
|
||||
let { url, description } = props;
|
||||
|
||||
React.useEffect(() => {
|
||||
isImageUrl(url).then(response => {
|
||||
setIsImage(response);
|
||||
});
|
||||
}, [props]);
|
||||
|
||||
return <>
|
||||
{
|
||||
!isNullOrUndefined(isImage) && (
|
||||
isImage ? (
|
||||
<Image
|
||||
src={url}
|
||||
alt={description}
|
||||
height={50}
|
||||
width={50}
|
||||
onClick={() => window.location.href = url }
|
||||
imageFit={ImageFit.cover}
|
||||
/>
|
||||
) :
|
||||
(
|
||||
<Link href={url} target="_blank">{description}</Link>
|
||||
)
|
||||
)
|
||||
}
|
||||
</>;
|
||||
|
||||
}
|
@ -16,7 +16,7 @@ export function RenderProfilePicture(props: IProfilePicProps) {
|
||||
getUserProfileUrl().then(url => {
|
||||
setProfileUrl(url);
|
||||
});
|
||||
}, [props])
|
||||
}, [props]);
|
||||
|
||||
return (
|
||||
<Persona
|
||||
@ -26,4 +26,4 @@ export function RenderProfilePicture(props: IProfilePicProps) {
|
||||
imageAlt={displayName}
|
||||
styles={{ primaryText: { fontSize: '12px' } }}
|
||||
/>);
|
||||
}
|
||||
}
|
||||
|
@ -1,3 +1,17 @@
|
||||
/** utility function to check null or undefined */
|
||||
export const isNullOrUndefined = (value: any) => value === null || value === undefined;
|
||||
|
||||
/** check url is image url or not */
|
||||
export const isImageUrl = (url: string) => {
|
||||
return fetch(url, { method: "HEAD" })
|
||||
.then(response => {
|
||||
let contentType = response.headers.get("Content-Type");
|
||||
if (contentType.match("image/*")) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
.catch(error => {
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
@ -13,6 +13,7 @@ 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 { pdfCellFormatter } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter';
|
||||
import { csvCellFormatter } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter';
|
||||
@ -46,7 +47,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
|
||||
}
|
||||
|
||||
private getUserProfileUrl = (loginName: string) => {
|
||||
return this._services.getUserProfileUrl(loginName)
|
||||
return this._services.getUserProfileUrl(loginName);
|
||||
}
|
||||
|
||||
public componentDidUpdate(prevProps: IReactDatatableProps) {
|
||||
@ -120,7 +121,9 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
|
||||
value = value;
|
||||
break;
|
||||
case 'SP.FieldUrl':
|
||||
value = <Link href={value['Url']} target="_blank">{value['Description']}</Link>;
|
||||
let url = value['Url'];
|
||||
let description = value['Description'];
|
||||
value = <RenderImageOrLink url={url} description={description}></RenderImageOrLink>;
|
||||
break;
|
||||
case 'SP.FieldLocation':
|
||||
value = JSON.parse(value).DisplayName;
|
||||
|
@ -0,0 +1,71 @@
|
||||
{
|
||||
"id": "dfb5229a-c1c3-4e98-870b-c40dd6e4ec4b",
|
||||
"alias": "PageContributorsWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": [
|
||||
"SharePointWebPart"
|
||||
],
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
"groupId": "dfb5229a-c1c3-4e98-870b-c40dd6e4ec4b",
|
||||
"group": {
|
||||
"default": "Other"
|
||||
},
|
||||
"title": {
|
||||
"default": "Page Contributors"
|
||||
},
|
||||
"description": {
|
||||
"default": "Displays page contributors in reverse chronological order"
|
||||
},
|
||||
"officeFabricIconFontName": "People",
|
||||
"properties": {
|
||||
"numberOfFaces": 5,
|
||||
"personaSize": 3
|
||||
}
|
||||
}
|
||||
],
|
||||
"loaderConfig": {
|
||||
"internalModuleBaseUrls": [
|
||||
"https://localhost:4321/dist/"
|
||||
],
|
||||
"entryModuleId": "page-contributors-web-part",
|
||||
"scriptResources": {
|
||||
"page-contributors-web-part": {
|
||||
"type": "path",
|
||||
"path": "page-contributors-web-part_4d2033f670297cd13b0c.js"
|
||||
},
|
||||
"@microsoft/sp-property-pane": {
|
||||
"type": "component",
|
||||
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"pageContributorsStrings": {
|
||||
"type": "path",
|
||||
"path": "pageContributorsStrings_en-us_6ae41e2edb727df21538267edcd92249.js"
|
||||
},
|
||||
"@microsoft/sp-webpart-base": {
|
||||
"type": "component",
|
||||
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"version": "16.9.0"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"version": "16.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
File diff suppressed because one or more lines are too long
@ -0,0 +1,17 @@
|
||||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Displays page contributors in reverse chronological order",
|
||||
"PropertyPaneNbPersonasText": "Maximum number of persons to display",
|
||||
"PropertyPaneBasicGroupName": "General",
|
||||
"PropertyPanePersonaSizeText": "Icons size",
|
||||
"PropertyPaneIconsSizeTiny": "tiny",
|
||||
"PropertyPaneIconsSizeEES": "extraExtraSmall",
|
||||
"PropertyPaneIconsSizeES": "extraSmall",
|
||||
"PropertyPaneIconsSizeS": "small",
|
||||
"PropertyPaneIconsSizeR": "regular",
|
||||
"PropertyPaneIconsSizeL": "large",
|
||||
"PropertyPaneIconsSizeEL": "extraLarge",
|
||||
"PropertyPanePageUrlText": "Page server relative URL (leave empty for current page)",
|
||||
"Loading": "Loading..."
|
||||
}
|
||||
});
|
@ -0,0 +1,104 @@
|
||||
{
|
||||
"bundles": {
|
||||
"page-contributors-web-part": {
|
||||
"dependencies": [
|
||||
{
|
||||
"componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||||
"componentName": "@microsoft/sp-property-pane",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": true
|
||||
},
|
||||
{
|
||||
"componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
|
||||
"componentName": "@microsoft/sp-loader",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
|
||||
"componentName": "@ms/sp-telemetry",
|
||||
"componentVersion": "0.19.2",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "e40f8203-b39d-425a-a957-714852e33b79",
|
||||
"componentName": "@microsoft/sp-dynamic-data",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
|
||||
"componentName": "@microsoft/sp-lodash-subset",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||
"componentName": "@microsoft/sp-core-library",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "01c4df03-e775-48cb-aa14-171ee5199a15",
|
||||
"componentName": "tslib",
|
||||
"componentVersion": "1.10.0",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176",
|
||||
"componentName": "@ms/odsp-core-bundle",
|
||||
"componentVersion": "1.1.13",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
|
||||
"componentName": "@microsoft/sp-diagnostics",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
|
||||
"componentName": "@microsoft/sp-page-context",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "229b8d08-79f3-438b-8c21-4613fc877abd",
|
||||
"componentName": "@microsoft/load-themed-styles",
|
||||
"componentVersion": "0.1.2",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
|
||||
"componentName": "@microsoft/sp-http",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"componentName": "react",
|
||||
"componentVersion": "16.9.0",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"componentName": "react-dom",
|
||||
"componentVersion": "16.9.0",
|
||||
"isDirectDependency": false
|
||||
},
|
||||
{
|
||||
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||
"componentName": "@microsoft/sp-webpart-base",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": true
|
||||
},
|
||||
{
|
||||
"componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
|
||||
"componentName": "@microsoft/sp-component-base",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,71 @@
|
||||
{
|
||||
"id": "dfb5229a-c1c3-4e98-870b-c40dd6e4ec4b",
|
||||
"alias": "PageContributorsWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": [
|
||||
"SharePointWebPart"
|
||||
],
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
"groupId": "dfb5229a-c1c3-4e98-870b-c40dd6e4ec4b",
|
||||
"group": {
|
||||
"default": "Other"
|
||||
},
|
||||
"title": {
|
||||
"default": "Page Contributors"
|
||||
},
|
||||
"description": {
|
||||
"default": "Displays page contributors in reverse chronological order"
|
||||
},
|
||||
"officeFabricIconFontName": "People",
|
||||
"properties": {
|
||||
"numberOfFaces": 5,
|
||||
"personaSize": 3
|
||||
}
|
||||
}
|
||||
],
|
||||
"loaderConfig": {
|
||||
"internalModuleBaseUrls": [
|
||||
"<!-- PATH TO CDN -->"
|
||||
],
|
||||
"entryModuleId": "page-contributors-web-part",
|
||||
"scriptResources": {
|
||||
"page-contributors-web-part": {
|
||||
"type": "path",
|
||||
"path": "page-contributors-web-part_4d2033f670297cd13b0c.js"
|
||||
},
|
||||
"@microsoft/sp-property-pane": {
|
||||
"type": "component",
|
||||
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"pageContributorsStrings": {
|
||||
"type": "path",
|
||||
"path": "pageContributorsStrings_en-us_6ae41e2edb727df21538267edcd92249.js"
|
||||
},
|
||||
"@microsoft/sp-webpart-base": {
|
||||
"type": "component",
|
||||
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"version": "16.9.0"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"version": "16.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,71 @@
|
||||
{
|
||||
"id": "dfb5229a-c1c3-4e98-870b-c40dd6e4ec4b",
|
||||
"alias": "PageContributorsWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "1.0.0",
|
||||
"manifestVersion": 2,
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": [
|
||||
"SharePointWebPart"
|
||||
],
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
"groupId": "dfb5229a-c1c3-4e98-870b-c40dd6e4ec4b",
|
||||
"group": {
|
||||
"default": "Other"
|
||||
},
|
||||
"title": {
|
||||
"default": "Page Contributors"
|
||||
},
|
||||
"description": {
|
||||
"default": "Displays page contributors in reverse chronological order"
|
||||
},
|
||||
"officeFabricIconFontName": "People",
|
||||
"properties": {
|
||||
"numberOfFaces": 5,
|
||||
"personaSize": 3
|
||||
}
|
||||
}
|
||||
],
|
||||
"loaderConfig": {
|
||||
"internalModuleBaseUrls": [
|
||||
"<!-- PATH TO CDN -->"
|
||||
],
|
||||
"entryModuleId": "page-contributors-web-part",
|
||||
"scriptResources": {
|
||||
"page-contributors-web-part": {
|
||||
"type": "path",
|
||||
"path": "page-contributors-web-part_4d2033f670297cd13b0c.js"
|
||||
},
|
||||
"@microsoft/sp-property-pane": {
|
||||
"type": "component",
|
||||
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"pageContributorsStrings": {
|
||||
"type": "path",
|
||||
"path": "pageContributorsStrings_en-us_6ae41e2edb727df21538267edcd92249.js"
|
||||
},
|
||||
"@microsoft/sp-webpart-base": {
|
||||
"type": "component",
|
||||
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"react": {
|
||||
"type": "component",
|
||||
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
|
||||
"version": "16.9.0"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"version": "16.9.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user