Error: Comments are not permitted in JSON

 

You can fix this with the files.associations setting in VSCode. 

In VS Code open Settings in JSON view by using the Command Pallet (Cmd + Shift + P) and enter Preferences: Open Settings (JSON). Next, you can add this setting on workspace (you need to add it for each project) or user (add it once, works for all projects) level.

"files.associations": {

    "*.json": "jsonc"

}

Create Adaptive Card Extensions using SPFx

What is Adaptive Card Extension

Ø  Adaptive card Extensions are a new component type that can be created using SPFx.

Ø  You use JSON schema to specify what kind of controls/labels you wanted to show and then pass your dynamic data to render this Adaptive card to the user.

Ø  One of the greater benefits of using an Adaptive card is that it takes care of rendering into multiple platforms automatically without us worrying about screen size and device etc.

Ø  We can just focus on the actual component logic, the adaptive card framework will take care to fit the card into various platforms, screen sizes, and devices.

Install latest SPFx Version

Adaptive Card structure

v  AdaptiveCard: The root object consist of Adaptivecard itself

o   Version: version of Adaptive cards JSON… it recommended to use 1.3 from Microsoft.

o   Body: consists of several elements and actions which are optional.

§  Adaptive Elements --> TextBlock, RichTextBlock, Image, Media, ActionSet

§  Container Elements --> Container, ColumnSet,…..etc

§  Input Elements --> Input.Text, Input.Date, Input.Time

v  Actions: these are buttons which performs different actions, it can be Action.OpenUrl, Action.ShowCard and Action.Submit

Create New Project

This will take couple of mins and at this point, Yeoman installs the required dependencies

Test the card template using workbench

Local: gulp serve -l –nobrowser

Update project hosted workbench URL:

"initialPage": "https://liakathcloudeducation.sharepoint.com/sites/LiakathDev/_layouts/workbench.aspx"

 Ø  Open your Webpart Toolbox and add your ACE (First Primary Card)

 Ø  ACEs are renders in 2 ways

o   Card View which you can see the above screenshot.

o   Quick View will only works in preview mode

Examine the Code:

Base Class:

Open the below from you’re your VSC. \src\adaptiveCardExtensions\firstPrimaryCard\FirstPrimaryCardAdaptiveCardExtension.ts

This is the main base class that will extend BaseAdaptiveCardExtension, and it has two generics

1.       Properties: Similar to webparts, this is to set the persisted properties.

2.       State: Unique to ACEs to maintain the state.

Rendering the Card:

The renderCard() method is virtual that returns a string identifier to a registered/custom View.

In the code, below are the two identifiers declared

Default card view will render using the below properties from the manifest

§  Icon – iconProperty

§  Title – title

§  Card Text - description 

Register a Card and Quick Views (onInit Method): 

Here we are registering the Card ID, QuickView ID

CardView Class

Locate and open the file: ./src/adaptiveCardExtensions/helloWorld/cardView/CardView.ts.

Understand 3 types of templates:

1. BaseBasicCardView: This will allow us to set Title, PrimaryText, and Buttons.
2. BaseImageCardView: This will allow us to set image, Title, PrimaryText, and Buttons
3. BasePrimaryTextCardView: This will allow us to set Title, PrimaryText, description, and buttons

In this solution we have chosen PrimaryCardView during template type while generating solution, you will see that class is extended with BasePrimaryCardView.

Save the file and run ‘gulp serve’ to the changes in the workbench. 

Let’s modify the CardView.ts to change to use BasicCardView:

Change the Import to add “BaseBasicCardView”, and “IBasicCardParameters,”

Now modify the below line to change extends from “BasePrimaryTextCardView” to “BaseBasicCardView”

Once you save this code, you will see the error code in data()

In the import method, we have declared ‘BasePrimaryTextCardView’,  ‘IPrimaryTextCardParameters’ but not used hence I am removing them to fix the error.

Save the file and run ‘gulp serve’ to the changes in the workbench.

Let’s modify the same way if you extend the view from BaseImageCardView. we will have to set imageUrl and primaryText in data method(sample below)

Change the Import to add “BaseImageCardView”, and “IImageCardParameters,”

Now modify the below line to change extends from “BaseImageCardView”

Save the file and run ‘gulp serve’ to the changes in the workbench.

Card Buttons

cardButtons() method can be used if you want to display the custom buttons on the card and what actions to be taken when the button is clicked.

onCardSelection()

This method determines what will happen if the Card is clicked. We can change the Card Selection method to open Quick view by modifying the onCardSelection().

QuickView Class

Locate and open the following file: ./src/adaptiveCardExtensions/firstPrimaryCard/quickView/QuickView.ts.

Quick Views must extend the BaseAdaptiveCardView base class.

Let’s change the below:

Ø  Remove the description property from the Quick View data, and add two buttons.

Ø  Update the IQuickViewData interface as shown in the following code and update the data() method as below:

Ø  Locate and open the following file: ./src/adaptiveCardExtensions/firstPrimaryCard/FirstPrimaryCardAdaptiveCardExtension.ts.

Ø  Update the IFirstPrimaryCardAdaptiveCardExtensionState interface and onInit() method as follows:

ØLocate and open the following file: ./src/adaptiveCardExtensions/firstPrimaryCard/cardView/CardView.ts.

Ø  Locate and open the following file: ./src/adaptiveCardExtensions/firstPrimaryCard/quickView/template/QuickViewTemplate.json.

Ø  Replace the contents of this file with the following JSON:

{

  "schema": "http://adaptivecards.io/schemas/adaptive-card.json",

  "type": "AdaptiveCard",

  "version": "1.2",

  "body": [

    {

      "type": "TextBlock",

      "weight": "Bolder",

      "text": "${title}"

    },

    {

      "type": "TextBlock",

      "text": "${subTitle}",

      "wrap": true

    },

    {

      "type": "ActionSet",

      "actions": [

        {

          "type": "Action.Submit",

          "title": "Create Item",

          "style": "positive",

          "data": {

            "id": "button1",

            "message": "Clicked Button One"

          }

        },

        {

          "type": "Action.Submit",

          "title": "Modify Item",

          "data": {

            "id": "button2",

            "message": "Clicked Button Two"

          }

        }

      ]

    }

        // {

    //   "type": "ColumnSet",

    //   "columns": [

    //     {

    //       "type": "Column",

    //       "items": [

    //         {

    //           "type": "TextBlock",

    //           "weight": "Bolder",

    //           "text": "${subTitle}",

    //           "wrap": true

    //         }

    //       ]

    //     }

    //   ]

    // }    

  ]

}

Get On-premises extension attributes from Azure AD using Power Automate

If you would like to be able to access the custom extensionattribute properties from Power Automate flow, you would have to use the Graph API to grab the custom attributes as at the moment, the Office365 connector does not show any of the custom properties. 

If you want to call Graph API from Power Automate Flow, you would require below:

• Administrative access to Azure AD of Office 365 tenant
• ‘Invoke an HTTP request’ or HTTP request which are premium.

https://www.lee-ford.co.uk/using-flow-with-graph-api/ 

https://www.c-sharpcorner.com/article/calling-graph-api-from-power-automate-flow/

What if you don’t have premium license for HTTP request? 

1. You can use Office 365 connector (Get user profile(V2)) and add the fields you want.
2. To parse the output, let's add another action after Microsoft Graph API call. Search for Parse JSON and select "Parse JSON".
3. In the JSON action, under content, select Body (User from Graph API) content from the Get User profile(V2). And click on 'Generate sample popup'.
4. In the popup screen, you can copy paste the copied raw output of the ‘Get User Profile(V2)’ into Parse JSON schema.
5. Now that we have parsed the JSON, so we can can use those extracted attributes using compose action.
6. Add 'Compose' and select 'externsionattrubute1' from the Dynamic Content.
7. Add the compose output to Update item action to update the field value.
8. For the other items I have added the expression to list item instead of adding compose actions.

body('Parse_JSON')?['mobilePhone']
body('Parse_JSON')?['employeeId']

body('Parse_JSON')?['onPremisesExtensionAttributes']?['extensionAttribute2']

body('Parse_JSON')?['onPremisesExtensionAttributes']?['extensionAttribute3']
body('Parse_JSON')?['onPremisesExtensionAttributes']?['extensionAttribute4']

Create/Design Adaptive Cards Extensions using OOTB Viva Connections In Teams and SharePoint Site

Adaptive Cards Extensions (ACEs) are new way of displaying the information in a platform-agnostic. These cards are sourced by JSON and can be designed using OOTB or custom.

Microsoft Viva Connections

• Viva connection experience is deployed and access in Microsoft Teams.
• It is an employee experience app in Microsoft Teams that brings relevant news, conversations, resources in one place for every employee.

Setup Viva connections in the M365 admin center

• To add the Adaptive Cards to Viva dashboards webpart, you need set the Viva connection from admin center or PowerShell Scripts.
• Navigate to https://admin.microsoft.com , select 'Setup and select 'Viva Connections'   

 

A. Creating a Connections experience: It creates a standalone, out-of-the-box Connections experience as an app in Teams without the need for an existing intranet portal. A special site container will be created where the dashboard, resources, and overall Viva home experience are hosted and sourced from. Owners can then begin adding their own content. An intranet portal can be added at any time and designated as a home site. 

B. Build from an existing intranet portal: This option is ideal for organizations that already have a SharePoint communications site and would like to use their own content, or would like to add an intranet portal that includes Connections components that can easily be extended to the Web. This option creates a new Connections experience and automatically designates the communications site as a home site (intranet portal) that displays navigational elements, and shares permissions.

Create a Connections Experience

Build from an existing intranet portal to set a Home site

Set permissions

If your home site is part of a multi-geo tenant outside of the main geo you will need to manage your permissions in the SharePoint Admin Center.

Designate Audience

Visitors are set to Everyone in the company except external users by default.

Decide the Order

If your organization has multiple experiences, some audiences may belong to more than one. By setting an order for each experience, you can determine the priority in which experiences will be seen first.

Create and configure the Dashboard in Teams

• We can extend our Viva Connections dashboard with out-of-the-box web parts, custom SPFx web parts, extensions, and now with Adaptive Card Extension, etc.
• Navigate to the Viva Connections app in Teams.

• Select Frontline workers and continue

Adding an Adaptive Cards to Dashboard

• Add Approvals, Top News, Shifts, Assigned Tasks, Card Designer..etc Adaptive cards.
• Note: The above cards can be created from Teams or SharePoint site.
• Edit the Home or any page and add the Dashboard of Viva connections which will display all of you cards

Enable the experience

• Enable each Viva connection experience to make it visible to audiences in Microsoft Teams.
• Select ‘Connection Experience’ and enable it from the Edit Status. 

Pin the Viva Connections app in Teams

The Viva Connections app only needs to be pinned to Teams once after the creation of your first experience, unless you are pinning by policy.

• Navigate to Teams admin center: https://admin.teams.microsoft.com/ > Teams apps > Setup policies.
• Select Global (Org-wide default) which is default > Scroll down to Pinned apps.
• Select + Add apps.