How to create a Bot that has Tabs in it using teams-toolkit version 5?

[IAM5K]

We were developing an app that had a command bot and tabs to show the dashboard and settings.
Something similar to this:

My question is,
Earlier in Teams toolkit version 4 we had the option to create a bot and add feature to it. Where we can add tabs to it.
Is it still possible to add tabs to a bot ? And if no then are you planing to remove this from app feature?
If it is still possible, please share how can we achieve that as we do not have a add feature option there in teams toolkit version 5.

[aycabas]

Hi @IAM5K, in Teams Toolkit for VS Code V5, we encourage developers to learn the processes behind the scenes. So Add feature capability is replaced with "View how to guides". If you select the "configure Tab app capability", you'll be directed to the following page and you can follow the steps to add tab capability in your bot: https://github.com/OfficeDev/TeamsFx/wiki/How-to-configure-Tab-capability-within-your-Teams-app

Let me know if you have any other questions along the way.

[IAM5K]

Document is unclear about generating the tab folder, if we generate tab in the folder then there is project inside bot, which doesn't matches with the sample mentioned above.

My Directory structure,

Directory structure of example given

[aycabas]

Hi @IAM5K, as it shows in the example structure, you do not need to have all the resources under your tab folder such as teamsapp.local.yml, teams.app.yml etc. All the resources will be under the main root and used by both Bot and Tab. The tab folder will only have public, src folders, package.json and tsconfig.json files.

As you can see in your project structure, you have dublicate of teamsapp.local.yml, .localConfigs etc. That makes your tab project separate than your bot project. You'll have to use the same configuration files.

Your project structure is supposed to look as the following:

env/
appPackage/
infra/
tab/ (Your tab code)
--public/
-- src/
-- tsconfig.json
-- package.json
src/ (your existing bot source code, you can rename this folder as bot)
-- adaptivecards/
-- index.ts
-- tsconfig.json
-- package.json
-- ... (other bot files)
teamsapp.yml
teamsapp.local.yml
README.md
.gitignore
.
.
.

I hope this helps. Let me know if it works.