Wiki updates for v2.2

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
 

Wiki/Customizations.md

@@ -28,42 +28,52 @@ Below are the high level steps to get you started on customizing the template.
 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)     
+    ![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)     
+    ![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)  
+
+    ![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.<br>
-![Customization](../Images/Customization4.png)  
-1. Replace the below two images with new image files. Make sure the new images are also in png format.<br>
-6df47bd5-d84a-41ab-8c4a-9352076e8b6c_color.png <br>
+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)  
+
+    ![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)  
+
+    ![Customization](../Images/Customization6.png)  
+
 1. Add/Modify the values as shown below and click "Save"
-![Customization](../Images/Customization7.png)  
+
+    ![Customization](../Images/Customization7.png)  
+
 1. Repeat the steps for other columns that needs to be modified.

Wiki/Deployment-Guide.md

@@ -8,101 +8,86 @@ Continuing below steps you can take the cmp.sppkg file from the ***cmp.sppkg***
 
 ### Deploy your Package to SharePoint
 
-<b>IMPORTANT NOTE:</b> If you have just created a new tenant please wait for around 15 minutes before starting with the below steps.
+**NOTE:** If you have just created a new tenant please wait for around 15 minutes before starting with the below steps.
 
 1.	Open SharePoint and sign in using the administrator account. Click on the "dots" icon in the top left corner of the banner.
- <br/>
 
- ![Quick Start Guide](../Images/banner.png) 
- <br/>
+    ![Quick Start Guide](../Images/banner.png) 
+
 2.	Select Admin from the menu that appears.
- <br/>
 
- ![Quick Start Guide](../Images/Admin_menu.png) 
- <br/>
+    ![Quick Start Guide](../Images/Admin_menu.png) 
+
 3.	Select SharePoint from the menu that appears. You may need to click "... Show all" for the SharePoint entry to appear.
-  <br/>
 
- ![Quick Start Guide](../Images/Admin_menu2.png) 
- <br/>
+    ![Quick Start Guide](../Images/Admin_menu2.png) 
+
 4.	You will be directed to the SharePoint admin center.
-  <br/>
 
- ![Quick Start Guide](../Images/Admin_menu3.png) 
- <br/>
+    ![Quick Start Guide](../Images/Admin_menu3.png) 
+
 5.	Click on "More features" menu item. Locate the Apps section and click the ***Open*** button.
-  <br/>
 
- ![Quick Start Guide](../Images/Admin_menu4.png)
- <br/> 
+    ![Quick Start Guide](../Images/Admin_menu4.png)
+
 6.	Click the ***App Catalog*** link.
-  <br/>
 
- ![Quick Start Guide](../Images/AppCatalog.png) 
- <br/>
-*If you do not see an app catalog available, use the instructions <a href='https://docs.microsoft.com/en-us/sharepoint/use-app-catalog#step-1-create-the-app-catalog-site-collection' target="_blank">here</a> to create a new app catalog before continuing.* <br><br>
+    ![Quick Start Guide](../Images/AppCatalog.png) 
+
+*If you do not see an app catalog available, use the instructions <a href='https://docs.microsoft.com/en-us/sharepoint/use-app-catalog#step-1-create-the-app-catalog-site-collection' target="_blank">here</a> to create a new app catalog before continuing.*
 
  NOTE: If you are using/seeing modern app catalog refer to the go to the [Modern App Catalog](#modern-app-catalog) section.
 
 7.	Click the ***Distribute apps for SharePoint*** link.
-  <br/>
 
-![Quick Start Guide](../Images/AppCatalog2.png) 
-<br/>
+    ![Quick Start Guide](../Images/AppCatalog2.png) 
+
 8.	Click the ***New*** menu item
-  <br/>
 
-![Quick Start Guide](../Images/AppCatalog3.png) 
-<br/>
+    ![Quick Start Guide](../Images/AppCatalog3.png) 
+
 9.	Click the ***Choose Files*** button, select the ***cmp.sppkg*** file you downloaded or created earlier, and click on ***OK***
- <br/>
 
-![Quick Start Guide](../Images/AppCatalog4.png) 
-<br/>
+    ![Quick Start Guide](../Images/AppCatalog4.png) 
+
 10.	A confirmation dialog is displayed. Ensure the checkbox for "Make this solution available to all sites in the organization" is chosen and click ***Deploy***.
-  <br/>
 
-![Quick Start Guide](../Images/Upgrade-2.png) 
-<br/>
+    ![Quick Start Guide](../Images/Upgrade-2.png) 
+
 11.	Return to the ***SharePoint admin center***. Under expand the ***Advanced*** menu in the left navigation and select ***API access***. Select and approve all pending requests associated with ***championmanagement***.
 
-**User.ReadWrite** : Allows the app to read the signed-in user's full profile. It also allows the app to update the signed-in user's profile information on their behalf. CMP app uses this permission to read and update the user's profile image with the digital badge.
+    **User.ReadWrite** : Allows the app to read the signed-in user's full profile. It also allows the app to update the signed-in user's profile information on their behalf. CMP app uses this permission to read and update the user's profile image with the digital badge.
 
-**Sites.Manage.All** : Allows the app to manage and create lists, documents, and list items in all site collections on behalf of the signed-in user. CMP app uses this permission to create lists in the SharePoint site.
+    **Sites.Manage.All** : Allows the app to manage and create lists, documents, and list items in all site collections on behalf of the signed-in user. CMP app uses this permission to create lists in the SharePoint site.
 
-  <br/>
+    ![Quick Start Guide](../Images/APIAccess.png) 
 
-![Quick Start Guide](../Images/APIAccess.png) 
-<br/>
 12.	Return to app list in the App Catalog and select the ***championmanagement*** app. Select the Files tab in the ribbon and click the ***Sync to Teams*** button.
-  <br/>
-
 
-![Quick Start Guide](../Images/SyncToTeams.png) 
-<br/>
+    ![Quick Start Guide](../Images/SyncToTeams.png) 
 
 ### Modern App Catalog 
-``` This section applies only if you are using/seeing modern app catalog.```
 
-Click on "Upload" under "Manage Apps" and upload the package file.
+``` This section applies only if you are using/seeing modern app catalog.```
 
-![Quick Start Guide](../Images/Modern_AppCatalog1.png)
+1. Click on "Upload" under "Manage Apps" and upload the package file.
 
-After uploading the package, select "Enable this app and add it to all sites" and click on "Enable App"
+    ![Quick Start Guide](../Images/Modern_AppCatalog1.png)
 
-![Quick Start Guide](../Images/Modern_AppCatalog2.png)
+1. After uploading the package, select "Enable this app and add it to all sites" and click on "Enable App"
 
-Click on "Go to API access page" to approve the permissions.
+    ![Quick Start Guide](../Images/Modern_AppCatalog2.png)
 
-![Quick Start Guide](../Images/Modern_AppCatalog3.png)
+1. Click on "Go to API access page" to approve the permissions.
 
-Once done, click on "Add to Teams" to make this app available in Teams
+    ![Quick Start Guide](../Images/Modern_AppCatalog3.png)
 
-![Quick Start Guide](../Images/Modern_AppCatalog4.png)
+1. Once done, click on "Add to Teams" to make this app available in Teams
 
-  <br/>
+    ![Quick Start Guide](../Images/Modern_AppCatalog4.png)
 
 ## Customized Installation
+
 The customized installation makes the assumption you wish to change the default variables (site location, text or visual aspects, etc) with the Champion Management Platform. Customizing the installation takes it outside of 
 configurations we have tested against but allows you to modify any aspect of the platform. Below are high level steps to get you started on a customized installation.
 
@@ -129,7 +114,6 @@ configurations we have tested against but allows you to modify any aspect of the
 If desired the administrator can configure the installation location including the customized site, list, and/or column(s) using following steps:
 
 1.	Update the ***"src/webparts/XXXXX/config/siteconfig.json"*** configuration file. Changing the values in the JSON file will customize the SharePoint list location and/or schema when it is created during deployment.
- <br/>
 
 ![Quick Start Guide](../Images/Siteconfig1.png)     
 
@@ -142,10 +126,9 @@ If desired the administrator can configure the installation location including t
 
 · CName (SharePoint list Column Name for Champions)
 ```
-<br/>
 
  ![Quick Start Guide](../Images/EventsListConfig.png) 
-<br/>
+
  ![Quick Start Guide](../Images/Siteconfig3.png) 
 
 2.	Create the SharePoint App Package. This package will be used to deploy the application in SharePoint and Microsoft Teams. Run the below commands :
@@ -162,64 +145,67 @@ If desired the administrator can configure the installation location including t
 
 3.	Navigate to the solution folder where you cloned and locate the newly created ***cmp.sppkg*** package in ***"sharepoint/solution"***.
 
+### First Run Experience: Add **Champion Management Platform** Tab in Teams
 
-
-### First Run Experience:Add ***Champion Management Platform*** Tab in Teams
-
-<b>IMPORTANT NOTE:</b> Please wait for around 20 minutes for API access approvals done in the previous section to take effect before proceeding with the below steps.
+**NOTE:** Please wait for around 20 minutes for API access approvals done in the previous section to take effect before proceeding with the below steps.
 
 1.	Navigate to Microsoft teams, select the Team and channel where you want to install Champion Management Platform. Click ***Add a tab***, choose ***Champion Management Platform*** from the app list, and Save. (Search for Champion)
 
-Alternately you can also add the Champion Management Platform as a personal app in the left side rail by selecting the “...” and searching for Champion Management Platform, and then selecting add. 
+    Alternately you can also add the Champion Management Platform as a personal app in the left side rail by selecting the “...” and searching for Champion Management Platform, and then selecting add. 
 
-This first run experience needs to be completed by the person who will be an admin of the platform, as it is this experience that creates the initial resources (SPO site + assets (3 lists mentioned above). This user that completes the first run is added as a manager of the platform. Alternately you may need a SharePoint admin to run the first run so the site is created and then have them add you as a manager of the platform once the assets have been created. 
+    This first run experience needs to be completed by the person who will be an admin of the platform, as it is this experience that creates the initial resources (SPO site + assets (3 lists mentioned above). This user that completes the first run is added as a manager of the platform. Alternately you may need a SharePoint admin to run the first run so the site is created and then have them add you as a manager of the platform once the assets have been created. 
 
+    ![Quick Start Guide](../Images/AddTab_ChampionAdd.png) 
 
-  <br/>
+2. Click 'Add' to create the ***'Champion Management Platform'*** tab to your Teams (Alternately you can also just load the app as a personal app in the left rail here too).
 
-![Quick Start Guide](../Images/AddTab_ChampionAdd.png) 
+3. After clicking on 'Add', the app set up will start and you will see a spinner as shown below. The set up may take around 1-2 minutes.
+
+    ![App Set Up](../Images/AppLoading.png)
 
-2. Click 'Add' to create the ***'Champion Management Platform'*** tab to your Teams (Alternately you can also just load the app as a personal app in the left rail here too).
-3. After clicking on 'Add', the app set up will start and you will see a spinner as shown below. The set up may take around 1-2 minutes.<br/>
-![App Set Up](../Images/AppLoading.png)
 4. After the set up is complete a success message is shown as below. The below snapshot is from Teams in browser. The same message would look different in Teams client.
-<br/>
-![App Set Up](../Images/SuccessMessage.png) 
-5. On clicking 'OK' the landing page is displayed. <br />
-![App Set Up](../Images/AddTab_Teams.png)
-6. If you still see the spinner message and do not see the success message even after 2 minutes or if you see any error alerts, try clicking on refresh icon on top right. If you see the landing page with all the icons shown in the above picture the app set up is complete.<br />
-![App Set Up](../Images/Apprefresh.png)
-If you still do not see the landing page after refresh please create an issue in the Github.
+
+    ![App Set Up](../Images/SuccessMessage.png)
+
+5. On clicking 'OK' the landing page is displayed.
+
+    ![App Set Up](../Images/AddTab_Teams.png)
+
+6. If you still see the spinner message and do not see the success message even after 2 minutes or if you see any error alerts, try clicking on refresh icon on top right. If you see the landing page with all the icons shown in the above picture the app set up is complete.
+
+    ![App Set Up](../Images/Apprefresh.png)
+
+    If you still do not see the landing page after refresh please create an issue in the Github.
+
 7. The landing page for an Admin will have access to the *Champion Leaderboard, Digital Badge, Enable Tournament of Teams* and the SharePoint lists (*Champions, Events,Event track Details, Digital Badges*), as well as Manage Approvals.
-  <br/>
 
-![Quick Start Guide](../Images/AddTab_Teams.png) 
+    ![Quick Start Guide](../Images/AddTab_Teams.png) 
+
 8. Grant Permissions to users:
 
-· Navigate to the URL for the Champion Management Platform site as the administrator. 
+  - Navigate to the URL for the Champion Management Platform site as the administrator. 
 
-· If you are using the default configuration, this can be found at ***`https://<yourtenant>.sharepoint.com/sites/ChampionManagementPlatform/`***.
+  - If you are using the default configuration, this can be found at ***`https://<yourtenant>.sharepoint.com/sites/ChampionManagementPlatform/`***.
 
-- Select site permissions
+    - Select site permissions
 
-- Advanced permissions settings
+    - Advanced permissions settings
 
-- Select Grant permissions 
-
-<br/>
+    - Select Grant permissions 
 
-![Quick Start Guide](../Images/AddEveryone.png) 
+      ![Quick Start Guide](../Images/AddEveryone.png) 
 
-- Select Share <br/>
-- Enter in 'Everyone except external users'<br/>
-- Change permissions to Edit<br/>
-- Unselect send email<br/>
-- Press share<br/>
-
+  - Select Share 
 
- <br/>
+  - Enter in 'Everyone except external users'
 
-![Quick Start Guide](../Images/sitePerms.png) 
+  - Change permissions to Edit
+
+  - Unselect send email
+
+  - Press share
+
+    ![Quick Start Guide](../Images/sitePerms.png) 
 
 ### Teams Personal App:
 
@@ -228,6 +214,7 @@ CLbHomeWebPart.manifest.json is updated with a new entry, TeamsPersonalApp
 ![Quick Start Guide](../Images/teamspersonalapp.png) 
 
 ### Completed Install
+
 Once you have performed the above steps, the deployment of the Champion Management Platform is now complete. If an admin was deploying this on behalf of the manager of the Champion Management Platform please have the admin add the
 Champion Management Platform manager as a champion and change their role in the Memberlist from ***Champion*** to ***Manager*** so they will have access to the other parts of the platform.