sp-dev-fx-webparts/samples/react-personal-greeting
zachroberts8668 103d7d19a7 Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec'
git-subtree-dir: samples/react-personal-greeting
git-subtree-mainline: b0f72f0b0f
git-subtree-split: b74fadbcf1
2020-04-14 09:10:02 -04:00
..
.vscode Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
assets Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
config Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
src Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
teams Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
tools Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
.editorconfig Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
.gitignore Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
.yo-rc.json Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
README.md Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
gulpfile.js Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
package-lock.json Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
package.json Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
tsconfig.json Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
tslint.json Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00
yarn.lock Add 'samples/react-personal-greeting/' from commit 'b74fadbcf18a07ebe352855f80708e275a62cdec' 2020-04-14 09:10:02 -04:00

README.md

react-personal-greeting

Summary

The web part pulls in the current user's name and displays it on the page. The greeting text before the name is customizable through the property pane. Additionally the position of the greeting and color of the text can be adjusted through the property pane as well.

picture of the web part in action

Used SharePoint Framework Version

1.10.0

Applies to

Prerequisites

Solution

Solution Author(s)
react-personal-greeting Zach Roberts - SPODev

Version history

Version Date Comments
1.0 April 14, 2020 Initial release

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
    • gulp build
    • gulp bundle --ship
    • gulp package-solution --ship
  • add the webpart to your tenant app store
  • add the app to a SharePoint site and then add the webpart to the page

Features

This Web Part illustrates the following concepts on top of the SharePoint Framework:

  • Using the SPFx context to gather the current user's display name.
  • Adjusting the styles of the component in the webpart using the props adjusted through the property pane.
  • PnP SPFx Placeholder - This component allows you to have a placeholder visble under certain conditions if your web parts requires some setup.
  • PnP SPFx Color Picker - This component adds an awesome color picker to the property pane, great for adjusting colors in your webpart.