© The Author(s), under exclusive license to APress Media, LLC, part of Springer Nature 2022
N. S. Nachan, S. S. NachanUp and Running on Microsoft Viva Connectionshttps://doi.org/10.1007/978-1-4842-8606-7_11

11. Extending Viva Connections

Nanddeep Sadanand Nachan1   and Smita Sadanand Nachan1
(1)
Pune, Maharashtra, India
 

Microsoft Viva Connections presents a curated experience and insights into the organizational culture to engage employees by bringing together news, announcements, and resources. The dashboard offers a consistent experience across mobile and desktop devices.

In this chapter, we will extend Viva Connections with the SharePoint Framework (SPFx) to meet custom business scenarios. This chapter assumes prior experience with SPFx.

Note

SPFx provides extensibility for Viva Connections by implementing web parts, application customizers, and adaptive card extensions.

The Need for Extensibility

The dashboard provides a consistent experience across desktop and mobile devices. The dashboard is authored by placing cards on it. The cards provide a flexible way for employees to get quick updates, keep a list of their tasks, and complete the tasks from a single interface.

Various first-party card types available from Microsoft (including Web link, Assigned tasks, Teams App, Shifts, Approvals, Card designer, etc.) make it easy to present cards to the users. Users can take action on a card to complete their tasks.

The Card designer is a special type of card that offers low-code extensibility to author JSON-based cards with more customization options.

Various partners and ISVs have rolled out the experience of cards for IT, HR, finance, employee experiences, and other services, which can be easily plugged into Viva Connections. The names include ServiceNow, WorkDay, Moveworks, Limeade, Tribute, LifeWorks, Talentsoft, StandOut, EdCast, Zebra-Reflexis, BlueYonder, Espressive, and many more.

For organizations looking for an experience beyond what is offered by Microsoft’s out-of-the-box cards , as well partner solutions, they can involve IT to build the customized solutions using SPFx. Every organization uses various services and systems that are being used by their employees daily. With a Viva implementation, organizations are looking forward to having all the information in one place, i.e., in Microsoft Teams. Presenting employees with the information they need to work effectively can be achieved by developing custom cards on the dashboard. The dashboard experience can be extended with developer experience.

Extensibility Options with SPFx

Viva Connections is surfacing a modern SharePoint home site in Microsoft Teams. Modern SharePoint supports extensibility with modern web tools. SharePoint Framework is the extensibility model for Viva Connections, Microsoft Teams, and SharePoint.

SharePoint Framework supports platform-agnostic, client-side development for SharePoint using modern web technologies and tools (e.g., NodeJS, NPM, Gulp, TypeScript, Yeoman, Webpack, etc.).

As the Viva Connections desktop experience is built with modern SharePoint pages, it can be extended with the following options:

  • Web parts: These are HTML widgets. Modern SharePoint supports web parts developed with SPFx.

  • Application customizers : This SPFx-based approach allows you to inject HTML and JavaScript to predefined locations on the SharePoint page.

  • Adaptive card extensions (ACEs) : ACEs developed with the SharePoint Framework are implemented as JSON structures, which can be placed on the Viva Connections dashboard.

Tools and Libraries for SPFx

SharePoint Framework v1.13 (and newer) supports extending applications for Viva Connections. To build customizations using SPFx, we need to install modern tools and libraries as follows:

Node.js

Node.js is an open-source JavaScript runtime, used to host and serve JavaScript-based applications. Install Node.js v14 from https://nodejs.org .

NPM

This stands for Node Package Manager , which installs modules and their dependencies in the node_modules folder.

Gulp

This automates SPFx development and deployment tasks. It performs bundling and minification tasks before each build.

Yeoman

This is a scaffolding tool to generate an SPFx solution and build the required project structure.

Yeoman SPFx Generator

This helps to generate a SharePoint client-side solution project with the needed toolchain and project structure.

Gulp, Yeoman, and Yeoman SPFx Generator can be installed all at once using the following command:
npm install gulp-cli yo @microsoft/generator-sharepoint --global

TypeScript

This is a superset of JavaScript. SPFx applications are written in TypeScript, which is a strongly typed language.

Visual Studio Code

This is a lightweight IDE for writing code for SPFx solutions.

Extensibility with Web Parts

Web parts built with the SharePoint Framework help to implement widgets to surface SharePoint data with REST APIs and also consume Graph APIs to surface data from Microsoft 365 apps and services. The property pane of the web part allows end users to configure the web part.

Viva Connections web parts work only for the desktop experience.

The following are the scenarios where you might want to build web parts:

  • To surface information from SharePoint data (e.g., news, SharePoint lists, document libraries)

  • To surface information from Microsoft 365 apps and services (e.g., Microsoft 365 Groups, Yammer, Microsoft Teams, etc.)

  • To surface information by consuming web services

Figure 11-1 shows an example of a web part developed with the SharePoint Framework to display the hierarchical information from a SharePoint list.
Figure 11-1

Web part on a SharePoint page

Extensibility with Application Customizers

Consider building application customizers to extend Viva Connections when you need to add custom code or HTML elements on all the pages in Viva Connections. It is not necessary to have a UI element for the application customizer. You can use an application customizer to run any background code for all pages in Viva Connections.

On a broader term, SPFx extensions allow you to extend the user experience for SharePoint including the notification area, list views, and toolbars.

From the Viva Connections point of view, application customizers are effective to render the custom visualization on the header and footer sections of the page. With application customizers, one can add HTML and JavaScript to a predefined location on the page (e.g., top and bottom sections).

An application customizer can be used to place important notifications or announcements at the top of the page or important links at the bottom of the page. The app bar may affect the customizations that can be achieved using application customizers. Viva Connections application customizers work only for the desktop experience.

Figure 11-2 is an example of an application customizer developed with the SharePoint Framework to show important announcements to the user to help them stay on top of their work.
Figure 11-2

Extensibility with application customizers

Extensibility with Adaptive Card Extensions

Adaptive card extension (ACE) is a new component type available in the SharePoint Framework to build a rich experience with cards for the dashboard. ACEs use a declarative JSON schema to generate the card UI. When the ACEs are compared with the web part, the main difference is that the web parts can be placed on pages, and developers use web frameworks to implement them. In comparison, ACEs work only on the dashboard and use adaptive cards for the UI. This section is relevant only to developers who are planning to build ACE customizations with the SharePoint Framework.

ACEs support the following list of templates :

  • Basic card template

  • Image card template

  • Primary text template

Each card template renders the information differently. Figure 11-3 shows a layout of supported ACE templates.
Figure 11-3

Supported ACE templates

Scaffold SPFx Solution for ACE

ACE is another type of component in SPFx. Initiate the scaffolding process by running the following command:
yo @microsoft/sharepoint
If you have prior experience developing web parts or extensions with the SharePoint Framework, the scaffolding process remains the same. The only difference is to select ACE as the type of client-side component to create. A solution can have multiple ACEs, web parts, and extensions. Figure 11-4 shows Yeoman scaffolding of the SharePoint Framework solution for ACEs.
Figure 11-4

Scaffold ACE solution

ACE Class (Base Class)

The file srcadaptiveCardExtensionsasicCardBasicCardAdaptiveCardExtension.ts is the definition of an ACE, which extends from the BaseAdaptiveCardExtension class.
export default class BasicCardAdaptiveCardExtension extends BaseAdaptiveCardExtension<
  IBasicCardAdaptiveCardExtensionProps,
  IBasicCardAdaptiveCardExtensionState
> {
    // ...
}

A card view is the view of the card on the dashboard. A quick view is available as a dialog box after acting on the card view.

Each of the card views and quick views must be registered as an identifiable string inside a constructor or onInit() method.
public async onInit(): Promise<void> {
...
this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
}
Figure 11-5 shows an example of a card view and a quick view.
Figure 11-5

Card view and quick view in action

Card View

A card view defines the UI and behavior of the card when added to the dashboard.

A card view implementation can be found here:
srcadaptiveCardExtensionsasicCardcardViewCardView.ts
The data getter method must be implemented by the card view with a return type unique to the parent class of the view.
public get data(): IBasicCardParameters {
    return {
      primaryText: strings.PrimaryText
    };
}
The cardButtons property defines the number of buttons on the card and the action to perform.
public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
    return [
      {
        title: strings.QuickViewButton,
        action: {
          type: 'QuickView',
          parameters: {
            view: QUICK_VIEW_REGISTRY_ID
          }
        }
      },
      {
        title: 'Read more',
        action: {
          type: 'ExternalLink',
          parameters: {
            target: 'https://www.contoso.com'
          }
        }
      }
    ];
}
The onCardSelection method defines the behavior when a card is clicked.
public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
    return {
        type: 'ExternalLink',
        parameters: {
            target: 'https://www.contoso.com'
        }
    };
}

Quick View

The quick view is implemented with JSON templates, which can be seen after acting on the card view actions.

A quick view implementation can be found here:
srcadaptiveCardExtensionsasicCardquickViewQuickView.ts
The template() getter returns valid adaptive card template JSON for a quick view.
public get template(): ISPFxAdaptiveCard {
    return require('./template/QuickViewTemplate.json');
}
The quick view JSON contains the bound template slot (for e.g., ${title}, ${description}) as follows:
{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "Container",
      "$data": "${items}",
      "separator": true,
      "items": [
        {
          "type": "TextBlock",
          "text": "${title}",
          "color": "dark",
          "weight": "Bolder",
          "size": "large",
          "wrap": true,
          "maxLines": 1,
          "spacing": "None"
        },
        {
          "type": "TextBlock",
          "text": "${description}",
          "color": "dark",
          "wrap": true,
          "size": "medium",
          "maxLines": 1,
          "spacing": "None"
        }
      ]
    }
  ]
}
The bound template slots are automatically mapped to properties on the object returned from the data() getter method.
public get data(): IQuickViewData {
    return {
        title: strings.Title,
        description: this.properties.description
    };
}

Deploy the Solution

Follow these steps to prepare the package (.sppkg) and deploy it to the SharePoint app catalog:

  1. 1.
    Create a solution package by running the following commands:

    • gulp bundle --ship

    • gulp package-solution --ship

     
  1. 2.

    Upload the generated solution package (.sppkg) to the SharePoint tenant app catalog.

     
  2. 3.

    Edit the dashboard page on the SharePoint home site.

     
  3. 4.

    Add the custom ACE to the page.

     
As shown in Figure 11-6, the ACE will show a card view. Clicking a button will pop out a quick view.
Figure 11-6

ACE on the dashboard

For the implementation of ACEs targeting various business scenarios, please refer to the PnP repository for the Viva Connections Viva Adaptive Card (ACE) sample solutions available at https://github.com/pnp/sp-dev-fx-aces .

Conclusion

To implement an experience beyond what is offered by the out-of-the-box Microsoft cards, as well partner solutions, you can build customized solutions using the SharePoint Framework. The SharePoint Framework provides extensibility for Viva Connections by implementing web parts, application customizers, and adaptive card extensions.

In the next chapter, you will understand the importance of defining governance for Viva Connections.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.116.21.229