When Out of the Box isn't enough

In this session of Ask Sympraxis Derek, Julie, and Todd are joined by Andrew Connell, developer and SPFx expert, and Stefan Bauer, developer and designer, to discuss when and why to build custom Microsoft 365 code that extends its functionality, particularly in SharePoint and Teams. However, we only suggest extending the platform when the out-of-the-box solutions fail to meet 80% of your business requirements. From there, try some of the tried-and-true technologies that exist such as PnP Modern Search web parts or list/column formatting, which give you more configuration options. If neither of those achieve your business outcomes, then it’s time to build a custom developed solution.

Extending SharePoint Online and Microsoft Teams

SharePoint online custom web parts are also deployable in Team’s as a Team’s Tab. These can be built to have any functionality and/or design that you need. In SharePoint they can exist as a web part intermingled with the other existing web parts or as a single page app (SPA), which takes over an entire page in SharePoint. They are also deployable as a personal app meaning that instead of being a tab in Teams, they are an app launched from a button on the left rail of Teams.

Extensions

Application customizers

These are used to inject your custom user interface into the space below the header at the top of a SharePoint page. These can also be editable for the user. Keep in mind, this also includes a footer at the bottom of the page. This will hover as you scroll the page, so we suggest keeping these as non-robust as possible.

Field Customizer

This is very similar to list formatting with JSON but instead using custom code. The example shows a field customizer for a favorite count with a button-style star icon. The button allows you to store your favorites in a file. Custom code can be used to create significantly more complicated user interactions when you create your custom field customizers.

Command sets

These provide the ability to add custom buttons into either the command bar at the start of a list or library or in the action menu. The commands that show up can also change depending on if there are no items in the list, one item selected, multiple items selected, etc. so each has separate functionality.

Form customizer

This is the ability to create a custom form over the top of a list or a list item. Therefore, you can create your own user experience for lookups, related fields, drop downs, etc.

Microsoft Viva - Adaptive Card Extensions (ACEs)

From a custom code perspective, there is currently only one extension point into Microsoft Viva called Adaptive Card Extensions. They’re meant to be interactive with the user and to be used as quick access to things that your user needs to see. Using SPFx you can integrate these with any data source that has an API (Application Programming Interface). These use the adaptive card framework for the layout on the front end and SPFx on the backend for the data layer.

Check out our ACE design template gallery

Extending the Microsoft Teams platform

Tab’s inside Teams are extremely versatile as they are essentially just a user interface container to an iframe (an HTML element that loads another HTML page within the document). Therefore, we can connect these to nearly any web page. Another extensibility option is Task Modules. These allow you to create a pop-up experience within the application. The third type of extensibility is the use of a conversational bot. These allow you to have a conversation via text or an adaptive card type interface. Another positive to Teams is that these options can be chained together to create a bigger and more robust solution.

Messaging extensions - search and action scenarios

Messaging extensions allow for two things, you can either execute a search or you can execute an action. For example, the giphy add-in at the bottom of Teams is a messaging extension where you execute a search in the pop-up to find the image/gifs you’re seeking. Those are then added to your message without sending so you can add additional text. Action extensions can be launched from the command box (#3 in the image) or the more actions menu (#2). These bypass the search piece and run the command allowing you to easily augment existing conversations.

User experience design considerations

Throughout all your software extensibility explorations, one thing we always suggest you keep in mind is the user experience design of your solutions. The four main considerations we suggest are: accessibility, context, branding, and documentation. With these in mind, you can build a product that is usable to everyone, built in the context of where it will be used, branded to your organization, and documented for later use and testing.

These various extensibility solutions can create incredibly complex options, however, if you don’t need to build custom, we suggest you don’t. The tried and tested out-of-the-box solutions in most cases can solve a lot of your desired needs with simple configuration. If you have questions on out-of-the-box capabilities, custom solutions, or are looking for SharePoint customization examples for your Microsoft 365 ecosystem, please reach out to our team!

All Resources

• Microsoft Build (In Person) - Deploy a Teams app to Azure using Microsoft Teams Toolkit for VS Code
• Microsoft Build (In Person) - From web services to Teams apps using Teams Toolkit v5.0
• Adaptive Card Extension Gallery
• hTWOo - Fluent Design System
• Stefan Bauer | @stfbauer
• Andrew Connell | @andrewconnell

Do you have any questions for us? Continue the conversation on Twitter with the hashtag #AskSympraxis and mention @SympraxisC.