Updated readme and sample json
This commit is contained in:
Hugo Bernier
parent
f3ce92356e
commit
34ed3714b6
|
|
@ -9,7 +9,14 @@ The web part will fetch data from directory using Graph API and display in detai
|
|||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -31,6 +38,7 @@ Solution|Author(s)
|
|||
--------|---------
|
||||
react-graph-telephonedirectory | [Dipen Shah](https://github.com/Dips365) ([@Dips_365](https://twitter.com/Dips_365))
|
||||
react-graph-telephonedirectory | [Aimery Thomas](https://github.com/a1mery) ([@aimery_thomas](https://twitter.com/aimery_thomas))
|
||||
react-graph-telephonedirectory | [mrkhandev](https://github.com/mrkhandev)
|
||||
|
||||
|
||||
## Version history
|
||||
|
|
@ -39,12 +47,8 @@ Version|Date|Comments
|
|||
-------|----|--------
|
||||
1.0|July 14,2020 | Initial Release
|
||||
1.1|November 7,2020 | Upgraded to SPFx 1.11
|
||||
1.2|August 7, 2021|Adding the Title from the Property Pane into the Web Part
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
|
|
@ -71,4 +75,20 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
* Microsoft Graph API
|
||||
* External API Integration with SharePoint Framework
|
||||
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
## Help
|
||||
|
||||
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
|
||||
|
||||
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-graph-telephonedirectory&authors=@Dips365%20@a1mery%20@mrkhandev&title=react-graph-telephonedirectory%20-%20).
|
||||
|
||||
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-graph-telephonedirectory&authors=@Dips365%20@a1mery%20@mrkhandev&title=react-graph-telephonedirectory%20-%20).
|
||||
|
||||
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-graph-telephonedirectory&authors=@Dips365%20@a1mery%20@mrkhandev&title=react-graph-telephonedirectory%20-%20).
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-telephonedirectory" />
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"This is sample web part using SPFx and MSGraph to fetch the users information based on First Name, Last Name and Email Address. web part will fetch data from directory using Graph API and display in details list."
|
||||
],
|
||||
"creationDateTime": "2020-11-07",
|
||||
"updateDateTime": "2020-11-07",
|
||||
"updateDateTime": "2021-08-07",
|
||||
"products": [
|
||||
"SharePoint",
|
||||
"Office"
|
||||
|
|
@ -52,6 +52,11 @@
|
|||
"pictureUrl": "https://avatars.githubusercontent.com/u/7100077?s=460\u0026v=4",
|
||||
"name": "Aimery Thomas",
|
||||
"twitter": "aimery_thomas"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "mrkhandev",
|
||||
"pictureUrl": "https://github.com/mrkhandev.png",
|
||||
"name": "mrkhandev"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
{
|
||||
"bundles": {
|
||||
"react-htm-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": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
|
||||
"componentName": "@microsoft/sp-component-base",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": true
|
||||
},
|
||||
{
|
||||
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
|
||||
"componentName": "@microsoft/sp-webpart-base",
|
||||
"componentVersion": "1.12.1",
|
||||
"isDirectDependency": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
{
|
||||
"id": "3c0443ba-8202-4d11-817e-482586feeb6f",
|
||||
"alias": "ReactHtmWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": [
|
||||
"SharePointWebPart",
|
||||
"SharePointFullPage"
|
||||
],
|
||||
"supportsThemeVariants": true,
|
||||
"supportsFullBleed": true,
|
||||
"preconfiguredEntries": [
|
||||
{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||||
"group": {
|
||||
"default": "Other"
|
||||
},
|
||||
"title": {
|
||||
"default": "React HTM (Hyperscript Tagged Markup)"
|
||||
},
|
||||
"description": {
|
||||
"default": "Use HTM (Hyperscript Tagged Markup) as Template Engine for React components like 'Fluent UI React'"
|
||||
},
|
||||
"officeFabricIconFontName": "CodeEdit",
|
||||
"properties": {
|
||||
"template": "let [count, setCount] = this.react.useState(0);\r\nconst originalItems = this.fuiHooks.useConst(() => this.fuiSampleData.createListItems(10));\r\nconst classNames = this.fui.mergeStyleSets({\r\n itemCell: [\r\n this.fui.getFocusStyle(this.theme, { inset: -1 }),\r\n {\r\n minHeight: 54,\r\n padding: 10,\r\n boxSizing: 'border-box',\r\n borderBottom: `1px solid ${this.themeVariant.semanticColors.bodyDivider}`,\r\n display: 'flex',\r\n selectors: {\r\n '&:hover': { background: this.themeVariant.palette.neutralLight },\r\n }\r\n },\r\n ],\r\n itemImage: {\r\n flexShrink: 0,\r\n },\r\n itemContent: {\r\n marginLeft: 10,\r\n overflow: 'hidden',\r\n flexGrow: 1,\r\n },\r\n itemName: [\r\n this.themeVariant.fonts.xLarge,\r\n {\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n ],\r\n itemIndex: {\r\n fontSize: this.themeVariant.fonts.small.fontSize,\r\n color: this.themeVariant.palette.neutralTertiary,\r\n marginBottom: 10,\r\n },\r\n chevron: {\r\n alignSelf: 'center',\r\n marginLeft: 10,\r\n color: this.themeVariant.palette.neutralTertiary,\r\n fontSize: this.themeVariant.fonts.large.fontSize,\r\n flexShrink: 0,\r\n },\r\n});\r\n\r\nconst onRenderCell = (item, index) => {\r\n return this.html`\r\n <div class=${classNames.itemCell} data-is-focusable>\r\n <${this.fui.Image} className=${classNames.itemImage} src=${item.thumbnail} width=${50} height=${50} imageFit=${this.fui.ImageFit.cover} />\r\n <div class=${classNames.itemContent}>\r\n <div class=${classNames.itemName}>${item.name}</div>\r\n <div class=${classNames.itemIndex}>${`Item ${index}`}</div>\r\n <div>${item.description}</div>\r\n </div>\r\n <${this.fui.Icon} className=${classNames.chevron} iconName=${this.fui.getRTL() ? 'ChevronLeft' : 'ChevronRight'} />\r\n </div>`;\r\n};\r\n\r\nreturn this.html`\r\n <${this.fui.ThemeProvider} theme=${this.themeVariant}>\r\n <${this.fui.Stack} tokens=${{ childrenGap: 10 }}>\r\n <${this.fui.Label}>Clicked ${count} times<//>\r\n <${this.fui.PrimaryButton} text=\"Click here!\" onClick=${() => setCount(count + 1)} />\r\n <${this.fui.List} items=${originalItems} onRenderCell=${onRenderCell} />\r\n <//>\r\n <//>`;",
|
||||
"loadFluentUI": true,
|
||||
"loadFluentUISampleData": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"loaderConfig": {
|
||||
"internalModuleBaseUrls": [
|
||||
"<!-- PATH TO CDN -->"
|
||||
],
|
||||
"entryModuleId": "react-htm-web-part",
|
||||
"scriptResources": {
|
||||
"react-htm-web-part": {
|
||||
"type": "path",
|
||||
"path": "react-htm-web-part.js"
|
||||
},
|
||||
"@microsoft/sp-property-pane": {
|
||||
"type": "component",
|
||||
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"@microsoft/sp-component-base": {
|
||||
"type": "component",
|
||||
"id": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"@microsoft/sp-lodash-subset": {
|
||||
"type": "component",
|
||||
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"@microsoft/sp-core-library": {
|
||||
"type": "component",
|
||||
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
|
||||
"version": "1.12.1"
|
||||
},
|
||||
"@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"
|
||||
},
|
||||
"ReactHtmWebPartStrings": {
|
||||
"type": "path",
|
||||
"path": "ReactHtmWebPartStrings_en-us.js"
|
||||
},
|
||||
"react-dom": {
|
||||
"type": "component",
|
||||
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
|
||||
"version": "16.9.0"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue