Skip to content

Latest commit

 

History

History

nodejs

README.md

page_type description products languages extensions urlFragment
sample
This sample demonstrates how to build Teams apps using Actions in the Microsoft 365 app to streamline task management and enhance productivity by minimizing context switching.
office-teams
office
office-365
nodejs
contentType createdDate
samples
12/22/2023 01:38:27 PM
officedev-microsoft-teams-samples-m365-actions-preview-nodejs

Actions across Microsoft 365

This sample showcases how to create Teams apps using Actions in the Microsoft 365 app. It enhances task efficiency and user engagement by allowing users to interact directly with content and streamline workflows without switching between different apps.

Developers have the power to enhance users' productivity by building Actions that streamline task completion, minimizing context switching across various applications. This feature not only benefits users by enabling them to accomplish tasks more efficiently, but it also enhances the visibility and user engagement of your app by seamlessly integrating it into their workflow.

During this preview phase, we are introducing Actions on content in the Microsoft 365 app. This empowers users to take immediate action on content files through your app, expanding the range of interactions users can have with their content.

Interaction with app

m365-actions-preview

Prerequisite to use this sample

Run the app locally with browser's local storage

To debug the app

  1. Open the folder in Visual Studio Code with Teams Toolkit extension installed.
  2. Open Debug View (Ctrl+Shift+D) and select "Debug in the Microsoft 365 app (Edge) without backend" in dropdown list.
  3. Press "F5" to debug the app in the Microsoft 365 app in a browser window.

Debug

Running the sample

Select app: App

Welcome to todo list app!: Login

Accept permissions: Permissons

No task added: NoTask

Click more options: SelectMoreOptions

Add todo task and Mark complete UI: AddDoTaskComple

Add your notes here: AddNotesDes

Add to do list grid: TaskGrid

Add todo task and Mark complete UI: AddDoTaskComplePDF

Add your notes here: AddNotesDesPDF

Add to do list grid: TaskGrid

Click related tasks: RelatedTasks

All tasks list: TaskRelatedTasksGrid

Select related tasks completed: CompleteRelatedTasks

Add task: NewTaskTab

Edit task: Edit

Edit task value: EditValue

Save edit task value: SaveEditValue

Delete task: Delete

Delete a particular task: DeletedRow

Add task and Enter the task notes: AddTaskNewTab

New task added: NewTask

Uninstall app: Uninstall

(Optional) Deploy the app to Azure

Here are the instructions to run the sample in Visual Studio Code. You can also try to run the app using TeamsFx CLI tool, refer to Try the Sample with TeamsFx CLI

  1. Clone the repo to your local workspace or directly download the source code.
  2. Download Visual Studio Code and install Teams Toolkit Visual Studio Code Extension.
  3. Open the project in Visual Studio Code.
  4. Create an env/.env.dev.user file, and set value for SECRET_SQL_USER_NAME and SECRET_SQL_PASSWORD
  5. Open the command palette and select Teams: Provision in the cloud. You will be asked to input admin name and password of SQL. The toolkit will help you to provision Azure SQL.
  6. Once provision is completed, open the command palette and select Teams: Deploy to the cloud.
  7. Open env/.env.dev file, you could get the database name in PROVISIONOUTPUT__AZURESQLOUTPUT__DATABASENAME output. Set IP address of your computer into server-level IP firewall rule from the database overview page.
  8. In Azure portal, find the database by databaseName and use query editor with below query to create a table: 
    CREATE TABLE Todo
(
    id INT IDENTITY PRIMARY KEY,
    description NVARCHAR(128) NOT NULL,
    objectId NVARCHAR(36),
    itemId NVARCHAR(128),
    channelOrChatId NVARCHAR(128),
    isCompleted TinyInt NOT NULL default 0,
)

Preview the app in Teams

  1. Once deployment is completed, you can preview the app running in Azure. In Visual Studio Code, open Run and Debug and select Launch Remote in the Microsoft 365 app (Edge) or Launch Remote in the Microsoft 365 app (Chrome) in the dropdown list and Press F5 or the green arrow button to open a browser.

Feedback

We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.