sp-dev-fx-webparts/samples/react-multilist-grid
Hugo Bernier 7ed51a0838 Updated sample JSON 2021-03-15 03:48:14 -04:00
..
.vscode Updated version badge 2017-02-05 20:51:21 +02:00
assets Updated sample JSON 2021-03-15 03:48:14 -04:00
chalk Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
config Upgrade to SPFX RC0 (#119) 2017-02-05 20:43:13 +02:00
jsonfile Upgrade to SPFX RC0 (#119) 2017-02-05 20:43:13 +02:00
src readme for react-multilist-grid (#131) 2017-02-20 11:44:32 +02:00
typings Upgrade to SPFX RC0 (#119) 2017-02-05 20:43:13 +02:00
websocket-driver Added Web Selector to let user drill down to web (#124) 2017-02-11 02:27:24 +02:00
.editorconfig Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
.gitattributes Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
.gitignore Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
.npmignore Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
.yo-rc.json Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
README.md Update README.md 2020-11-08 23:29:40 -05:00
UpgradeLog.htm Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
gulpfile.js Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
package.json Added Web Selector to let user drill down to web (#124) 2017-02-11 02:27:24 +02:00
spfxreactgrid.njsproj Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
spfxreactgrid.sln Fixed folder naming for multilist-grid sample. 2017-01-06 17:16:16 +02:00
tsconfig.json Upgrade to SPFX RC0 (#119) 2017-02-05 20:43:13 +02:00
tslint.json Add tslint at the root of each SPFx project (#394) 2018-01-08 15:58:48 +02:00
typings.json Added Web Selector to let user drill down to web (#124) 2017-02-11 02:27:24 +02:00

README.md

Multilist Grid

Summary

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.

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

Clicking on the Update Columns button shows the Column Definition configuration panel shown below: columnDefinitions panel

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

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 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

to open the Web Selector which allows you to choose the web that contains the list to display: SelectWeb2 panel

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

[Selecting the Due Date Field] Select the Due Date field

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

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

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

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

drop

Applies to

Prerequisites

React, Redux Office-UI-Fabric

Solution

Solution Author(s)
react-spfx-multilist-grid Russell Gove

Version history

Version Date Comments
0.1 December 31, 2016 Initial version

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

  • Clone this repository
  • in the command line run:
    • npm install
    • tsd install
    • gulp serve

Include any additional steps as needed.

Features

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.

Usage:

  1. Define the columns to be shown in the grid alt tag

  2. Define the lists to be edited alt tag

  3. Edit the info alt tag