diff --git a/samples/react-personal-tools-list/README.md b/samples/react-personal-tools-list/README.md index d268e6f1c9..7f08644170 100644 --- a/samples/react-personal-tools-list/README.md +++ b/samples/react-personal-tools-list/README.md @@ -2,22 +2,33 @@ ## Summary - This webpart allows users to select tools from a predefined list and save them in their own personalized view. -It has the fundamental functionality - a great starting point to build upon if you need something more advanced. +This webpart has the fundamental functionallity - a great starting point to build upon if you need something more advanced. -The available tools are added to a list -![](./assets/availableTools.png) + + +* The user can select from this list what link(s) he/she wants to be displayed for them. +![](./assets/mytoold.png) -And the user can select from this list what link(s) he/she wants to be displayed for them. +* Select tools +![](./assets/selecttools.png) +![](./assets/savetools.png) -![](./assets/MyToolsDemo1.gif) +* The tools will be displayed like this: +![](./assets/savedtools.png) +* The webpart title can be changed from the property pane, here you can also select to display the tools in two columns (defaults to 1 column if this is not selected) +![](./assets/settings.png) + +#### In the background +The available tools are added to a list to show up in the webpart +![](./assets/availableTools.png) The webpart saves to another list.. ![](./assets/mytoolslist.png) -The webpart title can be changed from the property pane, here you can also select to display the tools in two columns (defaults to 1 column if this is not selected) -![](./assets/MyToolsDemo2.gif) + ## Compatibility diff --git a/samples/react-personal-tools-list/assets/mytoold.png b/samples/react-personal-tools-list/assets/mytoold.png new file mode 100644 index 0000000000..83faf1ae92 Binary files /dev/null and b/samples/react-personal-tools-list/assets/mytoold.png differ diff --git a/samples/react-personal-tools-list/assets/savedtools.png b/samples/react-personal-tools-list/assets/savedtools.png new file mode 100644 index 0000000000..b17eab6049 Binary files /dev/null and b/samples/react-personal-tools-list/assets/savedtools.png differ diff --git a/samples/react-personal-tools-list/assets/savetools.png b/samples/react-personal-tools-list/assets/savetools.png new file mode 100644 index 0000000000..f2b2516c2c Binary files /dev/null and b/samples/react-personal-tools-list/assets/savetools.png differ diff --git a/samples/react-personal-tools-list/assets/selecttools.png b/samples/react-personal-tools-list/assets/selecttools.png new file mode 100644 index 0000000000..119c8a7348 Binary files /dev/null and b/samples/react-personal-tools-list/assets/selecttools.png differ diff --git a/samples/react-personal-tools-list/assets/settings.png b/samples/react-personal-tools-list/assets/settings.png new file mode 100644 index 0000000000..9d9d7be976 Binary files /dev/null and b/samples/react-personal-tools-list/assets/settings.png differ diff --git a/samples/react-personal-tools-list/assets/video-demo1.mp4 b/samples/react-personal-tools-list/assets/video-demo1.mp4 new file mode 100644 index 0000000000..54fe302549 Binary files /dev/null and b/samples/react-personal-tools-list/assets/video-demo1.mp4 differ