diff --git a/samples/react-multilist-grid/README.md b/samples/react-multilist-grid/README.md index a583b40c7..08c01877f 100644 --- a/samples/react-multilist-grid/README.md +++ b/samples/react-multilist-grid/README.md @@ -1,9 +1,68 @@ # SPFX React Grid ## Summary -An SPFX Webpart that uses React, Office-UI-Fabric, and Redux to let users edit list data from multiple Webs and Multiple Sites in a single grid. +React-multilist-grid is an SPFX webpart that uses React, Office-UI-Fabric, and Redux to let users edit list data from lists that reside in multiple webs and multiple sites in a single grid, similar to Quick Edit mode. The lists do not to be of the same type – you just need to create column mappings to tell the webpart which fields to show in which columns of the grid. -![alt tag](/samples/react-spfx-multilist-grid/src/images/editListItems.PNG) +The configuration panel of the webpart is show below. It has two buttons—one to configure the columns that will be displayed on the grid, and another to configure the lists that contain the data to be edited. +![config panel](./src/images/Configuration.PNG) + +Clicking on the Update Columns button shows the Column Definition configuration panel shown below: +![columnDefinitions panel](./src/images/columnDefinitions.PNG) + +When adding a column the webpart automatically assigns a guid for internal use. In the 'name' field you can use any name you like. The text entered here will be used as the column header in the grid. In the 'type' field, you need to select the type of data to be displayed: +![ColumnTypes panel](./src/images/ColumnTypes.PNG) + +These are SharePoint field types for the most part(not all field types have been implemented yet). There is one 'special' field type called 'List Title'. It is used to identify which list an item came from when displayed in the grid. You can move an item from one list (and site) to another by changing the selected list title in the grid. In the 'editable' field you can specify whether this field can be edited in the grid(not yet implemented). The sortSequence and sortDirection field let you set up default sorting on a given column. + +The columns will be displayed in the grid in the order they appear on the Column Definition panel. You can use the up and down arrow icons on each row to rearrange the columns. The delete icon on each row can be used to delete a column from the grid. + +After defining all the columns to be displayed in your grid, click the save icon in the command bar and you will be returned to the configuration panel for the webpart. + +Clicking the Update Lists button on the configuration panel will open the List Definitions panel: +![ListDefinitions panel](./src/images/ListDefinitions.PNG) +Here you configure which lists the webpart should display in the grid. When adding a list the webpart automatically assigns a guid for internal use. In the 'SiteUrl' you must enter the url of the site collection that contains the list. In the 'List Definition Title' field enter a user friendly title for this list. The text you enter here will be shown on the grid for all items that came from this list in the 'List Title' column (provided you have created a 'List Title' column. + +When you tab to the 'Web Containing List' field, you can use the search icon: + +![SelectWeb1 panel](./src/images/SelectWeb1.PNG) + +to open the Web Selector which allows you to choose the web that contains the list to display: +![SelectWeb2 panel](./src/images/SelectWeb2.PNG) + +The Web Selector initially shows all the webs under the rootweb. When you select a different web, it then shows the subwebs under the selected web. You can keep selecting subwebs until you reach the web that contains the list to display. + +After selecting the web, tab over to the list column, and choose the list from the selected web that you want to show in the grid: + +![Select List panel](./src/images/Select List.PNG) + +Following the 'List' field, there is one field for each column you created in the Column Definitions panel. When you tab to each of these columns a dropdown list is presented showing you all the fields in this list that match the field type you specified on the Column Definition panel: +![Select List panel](./src/images/Select List.PNG) + +Choose the field you want to have displayed for this list in the specified column. + +[Selecting the Title Field] +![Select the title field](./src/images/SelectField1.PNG) + +[Selecting the Due Date Field] +![Select the Due Date field](./src/images/SelectField2.PNG) + +Click the save button in the command bar once you are done defining all your lists. + +The webpart will now display a grid showing all of the items in the lists you have selected: +![editListItems](./src/images/editListItems.PNG) + +You can edit any cell in the grid by tabbing to it, or clicking on it. To move an item between lists, simply click on the 'List Title' column and choose a new list: + +![MoveListItem](./src/images/MoveListItem.PNG) + +If you change a field of type 'user', the webpart will attempt to lookup the user in the destination site and use that user when adding the item to the new site. Similar mappings are done for other column types. + +You can click the save icon on each row to save the selected row back to SharePoint. The delete icon can be used to mark an item to be deleted: +![deleteitem](./src/images/deleteitem.PNG) + +The item will not be removed from SharePoint until the save icon is clicked. + +Use the Undo icon to undo the changes made to an item. ## Used SharePoint Framework Version diff --git a/samples/react-multilist-grid/src/images/ColumnTypes.PNG b/samples/react-multilist-grid/src/images/ColumnTypes.PNG new file mode 100644 index 000000000..b2dbdb1af Binary files /dev/null and b/samples/react-multilist-grid/src/images/ColumnTypes.PNG differ diff --git a/samples/react-multilist-grid/src/images/Configuration.PNG b/samples/react-multilist-grid/src/images/Configuration.PNG new file mode 100644 index 000000000..1628c7d4b Binary files /dev/null and b/samples/react-multilist-grid/src/images/Configuration.PNG differ diff --git a/samples/react-multilist-grid/src/images/ListDefinitions.PNG b/samples/react-multilist-grid/src/images/ListDefinitions.PNG index d448eaf70..1024092b9 100644 Binary files a/samples/react-multilist-grid/src/images/ListDefinitions.PNG and b/samples/react-multilist-grid/src/images/ListDefinitions.PNG differ diff --git a/samples/react-multilist-grid/src/images/MoveListItem.PNG b/samples/react-multilist-grid/src/images/MoveListItem.PNG new file mode 100644 index 000000000..deefcaa8a Binary files /dev/null and b/samples/react-multilist-grid/src/images/MoveListItem.PNG differ diff --git a/samples/react-multilist-grid/src/images/Select List.PNG b/samples/react-multilist-grid/src/images/Select List.PNG new file mode 100644 index 000000000..01cbfaa12 Binary files /dev/null and b/samples/react-multilist-grid/src/images/Select List.PNG differ diff --git a/samples/react-multilist-grid/src/images/SelectField1.PNG b/samples/react-multilist-grid/src/images/SelectField1.PNG new file mode 100644 index 000000000..c42be8eac Binary files /dev/null and b/samples/react-multilist-grid/src/images/SelectField1.PNG differ diff --git a/samples/react-multilist-grid/src/images/SelectField2.PNG b/samples/react-multilist-grid/src/images/SelectField2.PNG new file mode 100644 index 000000000..20dd049db Binary files /dev/null and b/samples/react-multilist-grid/src/images/SelectField2.PNG differ diff --git a/samples/react-multilist-grid/src/images/SelectWeb1.PNG b/samples/react-multilist-grid/src/images/SelectWeb1.PNG new file mode 100644 index 000000000..62bec4221 Binary files /dev/null and b/samples/react-multilist-grid/src/images/SelectWeb1.PNG differ diff --git a/samples/react-multilist-grid/src/images/SelectWeb2.PNG b/samples/react-multilist-grid/src/images/SelectWeb2.PNG new file mode 100644 index 000000000..b7da4171f Binary files /dev/null and b/samples/react-multilist-grid/src/images/SelectWeb2.PNG differ diff --git a/samples/react-multilist-grid/src/images/columnDefinitions.PNG b/samples/react-multilist-grid/src/images/columnDefinitions.PNG index 14847f096..a231af5bd 100644 Binary files a/samples/react-multilist-grid/src/images/columnDefinitions.PNG and b/samples/react-multilist-grid/src/images/columnDefinitions.PNG differ diff --git a/samples/react-multilist-grid/src/images/deleteitem.PNG b/samples/react-multilist-grid/src/images/deleteitem.PNG new file mode 100644 index 000000000..0edc88e8b Binary files /dev/null and b/samples/react-multilist-grid/src/images/deleteitem.PNG differ diff --git a/samples/react-multilist-grid/src/images/editListItems.PNG b/samples/react-multilist-grid/src/images/editListItems.PNG index f0834e251..2c7b72ca7 100644 Binary files a/samples/react-multilist-grid/src/images/editListItems.PNG and b/samples/react-multilist-grid/src/images/editListItems.PNG differ diff --git a/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/ColumnDefinitionContainer.tsx b/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/ColumnDefinitionContainer.tsx index ce9d45dd2..4c0afcf23 100644 --- a/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/ColumnDefinitionContainer.tsx +++ b/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/ColumnDefinitionContainer.tsx @@ -150,7 +150,7 @@ export class ColumnDefinitionContainerNative extends React.Component); + case "FieldTypesFormatter": + debugger; + const displayName=_.find(fieldTypes,ft=>{return ft.key===entity[gridColumn.name]}).text; + return ( + {displayName} + + ); default: return ( {entity[gridColumn.name]} diff --git a/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/ListDefinitionContainer.tsx b/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/ListDefinitionContainer.tsx index f4c82eb40..db57429e9 100644 --- a/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/ListDefinitionContainer.tsx +++ b/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/ListDefinitionContainer.tsx @@ -259,6 +259,7 @@ export class ListDefinitionContainerNative extends React.Component { diff --git a/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/PropertyFieldListDefinitionsHost.tsx b/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/PropertyFieldListDefinitionsHost.tsx index d86ef0f5d..393fa7f24 100644 --- a/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/PropertyFieldListDefinitionsHost.tsx +++ b/samples/react-multilist-grid/src/webparts/spfxReactGrid/containers/PropertyFieldListDefinitionsHost.tsx @@ -13,7 +13,7 @@ import * as utils from "../utils/utils"; import { Web as SPWeb } from "sp-pnp-js"; import { Site as SPSite } from "sp-pnp-js"; import { Guid } from "@microsoft/sp-core-library"; -import { PageContext } from "@microsoft/sp-page-context"; +import { PageContext } from "@microsoft/sp-page-context"; export interface IPropertyFieldListDefinitionsHostProps { label: string; initialValue?: Array; @@ -70,19 +70,38 @@ export default class PropertyFieldListDefinitionsHost extends React.Component { const data = _.map(response, (item: any) => { return new WebList(item.Id, item.Title, item.Url, ); }); - for (const site of this.state.Sites) { - for (const web of site.webs) { - if (web.url === webUrl) { - web.lists = data; - web.listsFetched = true; - } + // for (const site of this.state.Sites) { + // for (const web of site.webs) { + // if (web.url === webUrl) { + // web.lists = data; + // web.listsFetched = true; + // } + // } + // } + + const site: Site = _.find(this.state.Sites, (s: Site) => { + return (webUrl.substr(0, s.url.length).toLowerCase() === s.url.toLowerCase()); + }); + if (site) { + let web = _.find(site.webs, (w: Web) => { + return w.url = webUrl; + }) + if (web) { + web.lists = data; + web.listsFetched = true; + } + else { + // TODO : frtch the title and ID + var idx: number = site.webs.push(new Web("", "", webUrl));// dont have id and titlle here + site.webs[idx].lists = data; + site.webs[idx].listsFetched = true; } } this.setState(this.state); @@ -192,7 +211,7 @@ export default class PropertyFieldListDefinitionsHost extends React.Component + /> : ''} diff --git a/samples/react-videolibrary/README.md b/samples/react-videolibrary/README.md index 7bd02cce3..4676d8fe5 100644 --- a/samples/react-videolibrary/README.md +++ b/samples/react-videolibrary/README.md @@ -2,30 +2,51 @@ ## Summary A set of 3 SPFX webparts that use different open-source carousels (react-3d-carousel, reactjs-coverface, and react-slick) -to display videos stored on an O365 Video Channel. The idea being to display a carousel of the thumbnail images, and then -when a user clicks on one of the thumbnails, replace the tumbnail with a video player and start the video up. +to display videos stored on an Office 365 Video Channel. The idea being to display a carousel of the thumbnail images, and then +when a user clicks on one of the thumbnails, replace the tumbnail with a video player, or an Iframe playing the video. -The first webpart used react-3d-carousel. The carousel looks great, but i found no way to swap out the image and replace -it with a video player. This carousel would be fine for displayin a picture library though, +All 3 webparts share a common utility class (O365Vutilities) that is used to talk to the tenants Video Service through its rest +API (https://msdn.microsoft.com/en-us/office/office365/api/video-rest-operations) -The second webpart used react-slick. The carousel is not as fancy as react-3d-carousel, but i was able to to swap out the -image and replace it with a video player once a user clicked it. I had trouble with the css and getting the next and previous -buttons to show. If you run the webpart, the buttons are there, they are just not visible. - -Finally I tried reactjs-coverface. It has nice scrolling through the images withe the mousweheel, and some cool 3d effects. -It was also simple to swap the image with a video player once a user clicked it (same code as react-slick). This is the best -of the three for my purposes. +The first webpart used react-3d-carousel. The carousel looks great, but I found no way to swap out the image and replace +it with a video player or Iframe. This carousel would be fine for displaying a picture library though. A sample of the webpart +being used on a modern page is shown below: +![react-3d-carousel](./src/assets/react-3d-carousel.PNG) -In the future I want to modify this webpart to link a Sharepoint list with the video channel so that users can enter additional +And a sample of the webparts configuration: + + +![react-3d-carousel configuration](./src/assets/react-3d-carousel config.PNG) + +The getPropertyPaneConfiguration of the webpart calls a method in the O365Vutilities class to get a list of +channels on the tenants Video Service, and allows the user to select a channel. + + + +The second webpart used react-slick. The carousel is not as fancy as react-3d-carousel, but I was able to to swap out the +image and replace it with an Iframe playing the Video once a user clicked it. I had trouble with the css and getting the next and previous +buttons to show. If you run the webpart, the buttons are there to the left and the right of the image, they are just not visible.You can find them by moving the mouse along the left and right borders. Hopefully someone with better css skiils than I can fix this. You can also change videos by clicking the dots at the bottom of the webpart, A sample of the webpart is shown below: + +![react-slick](./src/assets/react-slick.PNG) +And a sample of the webparts configuration: + +![react-slick](./src/assets/react-slick-configuration.PNG) + +Finally I tried reactjs-coverflow. It has nice scrolling through the images with the mousweheel, and some cool 3d effects. +It was also simple to swap the image with an Iframe playing the Video once a user clicked it (same code as react-slick). This is the best +of the three for my purposes. A sample of the webpart is shown below: +![react-coverflow](./src/assets/react-coverflow.PNG) + +And a sample of its configuration (this one I made fully configurable, the others had a lot of hard-coded values) +![react-coverflow](./src/assets/react-coverflow configuratioion.PNG) + +In the future I would like to modify this webpart to link a SharePoint list with the video channel so that users can enter additional metadata for the video and be anle to search/filter the videos using this metadata. See also https://github.com/russgove/O365VideoSync. It's a console app that you can schedule to run to synchronize an Office 365 Video Channel with a sharepoint list (on prem or otherwise). -![alt tag](/samples/react-spfx-multilist-grid/src/images/editListItems.PNG) - - ## Used SharePoint Framework Version ![drop](https://img.shields.io/badge/drop-drop5-red.svg) @@ -63,8 +84,7 @@ Version|Date|Comments - Clone this repository - in the command line run: - `npm install` - - `tsd install` - - `gulp serve` + - `gulp serve` > Include any additional steps as needed. diff --git a/samples/react-videolibrary/src/assets/react-3d-carousel config.PNG b/samples/react-videolibrary/src/assets/react-3d-carousel config.PNG new file mode 100644 index 000000000..9313e9830 Binary files /dev/null and b/samples/react-videolibrary/src/assets/react-3d-carousel config.PNG differ diff --git a/samples/react-videolibrary/src/assets/react-3d-carousel.PNG b/samples/react-videolibrary/src/assets/react-3d-carousel.PNG new file mode 100644 index 000000000..2e06ed265 Binary files /dev/null and b/samples/react-videolibrary/src/assets/react-3d-carousel.PNG differ diff --git a/samples/react-videolibrary/src/assets/react-coverflow configuratioion.PNG b/samples/react-videolibrary/src/assets/react-coverflow configuratioion.PNG new file mode 100644 index 000000000..8473a85eb Binary files /dev/null and b/samples/react-videolibrary/src/assets/react-coverflow configuratioion.PNG differ diff --git a/samples/react-videolibrary/src/assets/react-coverflow.PNG b/samples/react-videolibrary/src/assets/react-coverflow.PNG new file mode 100644 index 000000000..9fa968eb4 Binary files /dev/null and b/samples/react-videolibrary/src/assets/react-coverflow.PNG differ diff --git a/samples/react-videolibrary/src/assets/react-slick-configuration.PNG b/samples/react-videolibrary/src/assets/react-slick-configuration.PNG new file mode 100644 index 000000000..1206ecc11 Binary files /dev/null and b/samples/react-videolibrary/src/assets/react-slick-configuration.PNG differ diff --git a/samples/react-videolibrary/src/assets/react-slick.PNG b/samples/react-videolibrary/src/assets/react-slick.PNG new file mode 100644 index 000000000..6eba5c4ed Binary files /dev/null and b/samples/react-videolibrary/src/assets/react-slick.PNG differ diff --git a/samples/react-videolibrary/tsconfig.json b/samples/react-videolibrary/tsconfig.json index 9a682bce0..508b97144 100644 --- a/samples/react-videolibrary/tsconfig.json +++ b/samples/react-videolibrary/tsconfig.json @@ -4,7 +4,7 @@ "module": "commonjs", "jsx": "react", "declaration": true, - "sourceMap": true, - "types": [ "webpack-env" ] + "sourceMap": true + } } diff --git a/samples/react-videolibrary/typings/@ms/odsp.d.ts b/samples/react-videolibrary/typings/@ms/odsp.d.ts index ae3334fe0..077127131 100644 --- a/samples/react-videolibrary/typings/@ms/odsp.d.ts +++ b/samples/react-videolibrary/typings/@ms/odsp.d.ts @@ -1,10 +1,5 @@ // Type definitions for Microsoft ODSP projects // Project: ODSP -/// - -/* Global definition for DEBUG builds */ -declare const DEBUG: boolean; - -/* Global definition for UNIT_TEST builds */ +/* Global definition for UNIT_TEST builds */ declare const UNIT_TEST: boolean; \ No newline at end of file