Not working Tab Removed Form App Manifest - Tab UI Template

samples/tab-ui-templates/ts/README.md

@@ -141,16 +141,13 @@ Teams doesn't display app content unless it's accessible via HTTPS. We recommend
 ## Running the sample
 
 - Welcome Page
-![welcome-page ](Images/tabui-welcome.png)
+![welcome-page ](Images/1.Teams_Welcome.png)
 
 - Dashboard Page
-![dashboard-page ](Images/tabui-dashboard.png)
+![dashboard-page ](Images/2.Teams_Dashboard.png)
 
 - List Page
-![list-page ](Images/tabui-list.png)
-
-- Board Page
-![board-page ](Images/tabui-board.png)
+![list-page ](Images/3.Teams_List.png)
 
 ## Outlook on the web
 
@@ -160,11 +157,15 @@ Teams doesn't display app content unless it's accessible via HTTPS. We recommend
 
 **On the side bar, select More Apps. Your sideloaded app title appears among your installed apps**
 
-![InstallOutlook](Images/InstallOutlook.png)
+![InstallOutlook](Images/4.Outlook_App.png)
 
 **Select your app icon to launch and preview your app running in Outlook on the web**
 
-![AppOutlook](Images/AppOutlook.png)
+![Outlook-Welcome](Images/5.Outlook_Welcome.png)
+
+![Outlook-Dashboard](Images/6.Outlook_Dashboard.png)
+
+![Outlook-List](Images/7.Outlook_List.png)
 
 **Note:** Similarly, you can test your application in the Outlook desktop app as well.
 
@@ -176,12 +177,16 @@ Teams doesn't display app content unless it's accessible via HTTPS. We recommend
 
 **Select the Apps icon on the side bar. Your sideloaded app title appears among your installed apps**
 
-![InstallOffice](Images/InstallOffice.png)
+![InstallOffice](Images/8.Office_365_SelectApp.png)
 
 **Select your app icon to launch your app in Office on the web**
 
-![AppOffice](Images/AppOffice.png) 
+![Office 365](Images/9.Office_365_Welcome.png) 
+
+![Office 365](Images/10.Office_365_Dashboard.png) 
 
+![Office 365](Images/11.Office_365_List.png)
+
 **Note:** Similarly, you can test your application in the Office 365 desktop app as well.
 
 ## Next steps

samples/tab-ui-templates/ts/assets/sample.json

@@ -9,7 +9,7 @@
       "The Microsoft Teams UI Templates sample app serves as a comprehensive guide for developers to implement visually appealing and functional applications within Teams. It includes a variety of tested UI templates that cater to common use cases, such as dashboards and forms, ensuring a consistent user experience."
     ],
     "creationDateTime": "2020-12-08",
-    "updateDateTime": "2024-10-15",
+    "updateDateTime": "2025-01-15",
     "products": [
       "Teams"
     ],

samples/tab-ui-templates/ts/src/app/app.tsx

@@ -22,7 +22,8 @@ function App() {
     themeNames.Default
   );
 
-  useEffect(() => {
+  useEffect(() => {  
+    microsoftTeams.app.initialize();
     /**
      * With the context properties in hand, your app has a solid understanding of what's happening around it in Teams.
      * https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest&preserve-view=true

samples/tab-ui-templates/ts/src/appManifest/manifest.json

@@ -40,12 +40,6 @@
       "name": "List",
       "contentUrl": "https://${{TAB_DOMAIN}}/list",
       "scopes": [ "personal" ]
-    },
-    {
-      "entityId": "sample.app.boards",
-      "name": "Task boards",
-      "contentUrl": "https://${{TAB_DOMAIN}}/board",
-      "scopes": [ "personal" ]
     }
   ],
   "validDomains": [ "${{TAB_DOMAIN}}" ]

samples/tab-ui-templates/ts/src/appManifest_Hub/manifest.json

@@ -40,12 +40,6 @@
       "name": "List",
       "contentUrl": "https://{{HOSTNAME}}/list",
       "scopes": [ "personal" ]
-    },
-    {
-      "entityId": "sample.app.boards",
-      "name": "Task boards",
-      "contentUrl": "https://{{HOSTNAME}}/board",
-      "scopes": [ "personal" ]
     }
   ],
   "validDomains": [ "{{HOSTNAME}}" ]

samples/tab-ui-templates/ts/src/index.tsx

@@ -6,14 +6,13 @@ import reportWebVitals from "./report-web-vitals";
 import { HashRouter } from "react-router-dom";
 
 // Initialize the Microsoft Teams SDK
-microsoftTeams.app.initialize().then(() => {
+microsoftTeams.app.initialize();
 
   ReactDOM.render(
       <App />,
     document.getElementById("root")
   );
 
-});
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals