Merge pull request #102 from OfficeDev/cmpv2.2/v2.2-new-features-and-…

…improvements v2.2 release changes
OfficeDev · May 17, 2022 · e91ab74 · e91ab74
2 parents 70de3d1 + 988fba5
commit e91ab74
Show file tree

Hide file tree

Showing 110 changed files with 7,122 additions and 3,661 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -4,23 +4,7 @@
    * Chrome browser: https://aka.ms/spfx-debugger-extensions
    */
   "version": "0.2.0",
-  "configurations": [{
-      "name": "Local workbench",
-      "type": "chrome",
-      "request": "launch",
-      "url": "https://localhost:4321/temp/workbench.html",
-      "webRoot": "${workspaceRoot}",
-      "sourceMaps": true,
-      "sourceMapPathOverrides": {
-        "webpack:///.././src/*": "${webRoot}/src/*",
-        "webpack:///../../../src/*": "${webRoot}/src/*",
-        "webpack:///../../../../src/*": "${webRoot}/src/*",
-        "webpack:///../../../../../src/*": "${webRoot}/src/*"
-      },
-      "runtimeArgs": [
-        "--remote-debugging-port=9222"
-      ]
-    },
+  "configurations": [
     {
       "name": "Hosted workbench",
       "type": "chrome",

diff --git a/.yo-rc.json b/.yo-rc.json
@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.9.1",
+    "version": "1.13.0",
     "libraryName": "clb",
     "libraryId": "5099a3ef-113f-4baf-bb6a-a73b1dd286f8",
     "packageManager": "npm",

diff --git a/Images/APIAccess.png b/Images/APIAccess.png
diff --git a/Images/AddTab_ChampionAdd.png b/Images/AddTab_ChampionAdd.png
diff --git a/Images/AddTab_Teams.png b/Images/AddTab_Teams.png
diff --git a/Images/AppLoading.png b/Images/AppLoading.png
diff --git a/Images/AppRefresh.png b/Images/AppRefresh.png
diff --git a/Images/CreateTournament.png b/Images/CreateTournament.png
diff --git a/Images/Customization1.png b/Images/Customization1.png
diff --git a/Images/Customization2.png b/Images/Customization2.png
diff --git a/Images/Customization3.png b/Images/Customization3.png
diff --git a/Images/Customization4.png b/Images/Customization4.png
diff --git a/Images/Customization5.png b/Images/Customization5.png
diff --git a/Images/Customization6.png b/Images/Customization6.png
diff --git a/Images/Customization8.png b/Images/Customization8.png
diff --git a/Images/EmpView.png b/Images/EmpView.png
diff --git a/Images/EnableTOT.png b/Images/EnableTOT.png
diff --git a/Images/EnableTournaments.png b/Images/EnableTournaments.png
diff --git a/Images/Leaderboard.png b/Images/Leaderboard.png
diff --git a/Images/ManageApproval.png b/Images/ManageApproval.png
diff --git a/Images/ManageTournament.png b/Images/ManageTournament.png
diff --git a/Images/Modern_AppCatalog1.PNG b/Images/Modern_AppCatalog1.PNG
diff --git a/Images/Modern_AppCatalog2.png b/Images/Modern_AppCatalog2.png
diff --git a/Images/Modern_AppCatalog3.png b/Images/Modern_AppCatalog3.png
diff --git a/Images/Modern_AppCatalog4.PNG b/Images/Modern_AppCatalog4.PNG
diff --git a/Images/MultipleBadges.png b/Images/MultipleBadges.png
diff --git a/Images/MyDashboard.png b/Images/MyDashboard.png
diff --git a/Images/SuccessMessage.png b/Images/SuccessMessage.png
diff --git a/Images/SyncToTeams.png b/Images/SyncToTeams.png
diff --git a/Images/TOTHome.png b/Images/TOTHome.png
diff --git a/Images/TOTLeaderBoard.png b/Images/TOTLeaderBoard.png
diff --git a/Images/TOTReports.png b/Images/TOTReports.png
diff --git a/Images/TOTScreen.png b/Images/TOTScreen.png
diff --git a/Images/TournamentofTeams.png b/Images/TournamentofTeams.png
diff --git a/Images/Upgrade-1.png b/Images/Upgrade-1.png
diff --git a/Images/Upgrade-2.png b/Images/Upgrade-2.png
diff --git a/Images/Upgrade-4.png b/Images/Upgrade-4.png
diff --git a/Images/Upgrade_Modern_AppCatalog1.PNG b/Images/Upgrade_Modern_AppCatalog1.PNG
diff --git a/Images/customization7.png b/Images/customization7.png
diff --git a/README.md b/README.md
@@ -8,32 +8,21 @@ The Champion Management Platform is a custom Teams app that enables organization
 
 The app provides an easy interface for designated users to add members to the champion program, preview, collaborate and communicate and build a community of Champions.  <br/>
 
-![CMP Screen](https://github.com/Porkai-Pandian/cmp-local-10132021/blob/main/Images/AddTab_Teams.png)                   
+![CMP Screen](Images/AddTab_Teams.png)                   
 
 
 ## Known issues
 
 1) If site is presenting with spinning blue circle check to ensure permissions are allowed to the ChampionManagementPlatform sharepoint site. If this is happening on the first load experience ensure that the user running first run experience has permissions to create a SharePoint site (first run creates the initial ChampionManagementPlatform site).If you continue to experience the blue circle, please remove the app from Teams and try again. Visit our issues list to log an issue if issue is still persistent. 
 
-<br/>
-
 2) If new users visit the Champion Management Platform app and receive a blue spinning circle, ensure that you have granted contribute/edit permissions to the SharePoint site created during first run to all users (or scoped users accessing the app). The default site created is ChampionManagementPlatform.
 
 
-
 ## Additional Customization Options
 
-The Champion Management Platform is built to provide a great starting point for managing your program. There are several ways you can modify the solution to fit your needs, with some of the major customizations in this current release coming from modifying list and column options once the solution has been deployed. Common actions include:
-
-Expanding the list of regions / countries / Focus Area / Groups to fit your criteria. Lists provide a very flexible way to provide data points for collection. While we have provided some starter data you will want to modify these values as they are reflected in the Add Members section. This action is done from selecting the list you would like to edit (champion list for this example), selecting the drop down on the column, then navigating to Column settings -> Edit.
-<br/>
-
-![Quick Start Guide](https://github.com/Porkai-Pandian/cmp-local-10132021/blob/main/Images/customization.png) 
-
-You could take similar actions in other lists to modify or add in event types and manual counts for activity logging.
-<br/>
+The Champion Management Platform is built to provide a great starting point for managing your program. There are several ways you can modify the solution to fit your needs, refer to this [section](https://github.com/OfficeDev/microsoft-teams-apps-champion-management/wiki/Customizations) for more on customization.
 
-![Quick Start Guide](https://github.com/Porkai-Pandian/cmp-local-10132021/blob/main/Images/WarningId.png) 
+![Quick Start Guide](Images/WarningId.png) 
 
 ## Legal
 

diff --git a/Wiki/Customizations.md b/Wiki/Customizations.md
@@ -0,0 +1,79 @@
+# Customizations
+
+The customized installation makes the assumption you wish to change the default variables (site name, list names, labels, buttons text, logo etc.) with the CMP Solution Template. Customizing the installation takes it outside of configurations we have tested against but allows you to modify any aspect of the template. 
+
+```
+Please note that if you customize the solution according to your organization needs, there are chances that you might face challenges while upgrading to new versions with the future releases.
+```
+
+## Prerequisites 
+
+1. Install Visual Studio Code
+1. Clone the app [repository](https://github.com/OfficeDev/microsoft-teams-apps-champion-management.git) locally.
+
+Below are the high level steps to get you started on customizing the template.
+
+## Site Name Customization
+
+1.  Open `siteconfig.json` under `src\webparts\clbHome\config` 
+1.  Modify the 'sitename' property as per your requirement.
+
+    ![Customization](../Images/Customization1.png)     
+
+
+## List Names and Field Names Customization
+
+1. Open `siteconfig.json` under `src\webparts\clbHome\config` 
+1. To modify a list name change the "listName" property of the specific list.
+1. To modify a field name change the "name" property under the "columns" node.
+1. Modify the code in the component which is linked to the list/field and test to make sure the functionality is not breaking.
+
+    ![Customization](../Images/Customization2.png)     
+
+## Button/Label/Title text customization
+
+1. Open `en-us.js` under `src\webparts\clbHome\loc` 
+1. The text for all buttons, labels,titles, messages are listed in this file grouped by components.
+1. Find and modify the text as per needs.
+
+    ![Customization](../Images/Customization8.png)     
+
+## Disable/Modify "Become a champion" on Leader Board for non champions
+
+1. Open `Sidebar.tsx` under `src\webparts\clbHome\components`.
+1. Find the "Become a champion" button code.
+
+    ![Customization](../Images/Customization3.png)
+
+1. Modify the disabled property to "disabled={true}"
+1. To redirect the button to a different component/page modify the "onClick" property of the button as needed
+
+## Customize the app logo from manifest
+
+1. Navigate to `teams` folder under the project.
+
+    ![Customization](../Images/Customization4.png)  
+
+1. Replace the below two images with new image files. Make sure the new images are also in png format.
+6df47bd5-d84a-41ab-8c4a-9352076e8b6c_color.png
+6df47bd5-d84a-41ab-8c4a-9352076e8b6c_outline.png
+1. Delete the "TeamsSPFxApp.zip" folder and create a new zip folder with the images and the manifest file in the same location with the same name.
+1. Generate a new package file and follow the deployment instructions in the deployment guide.
+
+## Customize Member List attributes
+
+1. The values for the dropdown lists in the "Add Member" component can be customized.
+
+    ![Customization](../Images/Customization5.png)  
+
+1. To add/modify values for these dropdowns navigate to "ChampionManagementPlatform" SharePoint site.
+1. Go to Settings page of SharePoint list "Member List".
+1. Find the column that you want to add/modify values of. For ex: To add a new region click on "Region" column
+
+    ![Customization](../Images/Customization6.png)  
+
+1. Add/Modify the values as shown below and click "Save"
+
+    ![Customization](../Images/Customization7.png)  
+
+1. Repeat the steps for other columns that needs to be modified.