You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Updates and improvements on building Microsoft 365 wide experiences with **Microsoft Teams apps build with SharePoint Framework** – This model enables you to build auto-hosted apps in Microsoft 365, which are extended across Microsoft Teams, Outlook and Office 365 app (office.com). Any Microsoft Teams app build with SharePoint Framework is automatically now compliant with the requirements to get the app exposed across Microsoft 365.
43
+
* Updates and improvements on the **Microsoft Viva extensibility build with SharePoint Framework**.
44
+
* General availability of the **top actions for custom web parts in SharePoint**.
45
+
* **Authentication improvements** with popup flow support for API authentication.
46
+
* **Accessibility improvements** for the web part areas.
47
+
* **Development time improvements** with central configuration of developer tenant details.
48
+
* **Microsoft Teams JS SDK** version update to version **2.19.1** to support new APIs, such as Live Share SDK.
49
+
* *“Sync to Teams”* functionality in SharePoint app catalog update to use **Teams Manifest v1.16** for the automatically created Microsoft Teams solution package – making all SPFx components exposed across the Microsoft 365 also with automatically generated packaging
50
+
* Viva Connections **Adaptive Cards Extensions** update to support **Adaptive Cards schema v1.5.** - enabling tables and other new features for ACEs
51
+
46
52
### Teams JS SDK v2.9.1 support
47
53
48
54
[Microsoft Teams JS SDK](https://learn.microsoft.com/en-us/javascript/api/overview/msteams-client?view=msteams-client-js-latest&tabs=npm) was bumped to v2.9.1 to support new API, such as `LiveShare`.
@@ -63,7 +69,11 @@ Developers can use the `SPFX_SERVE_TENANT_DOMAIN` OS environment variable to spe
63
69
64
70
In previous versions, web part Top Actions' configuration was based on proxied property pane types. It led to some issues and confusion as not all the properties worked or were supported.
65
71
66
-
This version includes specific Top Actions-specific types to avoid confusion and make the configuration more clearer.
72
+
This version includes specific Top Actions-specific types to avoid confusion and make the configuration more clear.
73
+
74
+
See more details from documentation
75
+
76
+
* [Adding support for Top Actions for web parts](web-parts/guidance/getting-started-with-top-actions.md)
67
77
68
78
### onBeforeAction handler for Adaptive Card Extensions
69
79
@@ -86,6 +96,11 @@ New `focusParameters` virtual property allows to set focus when the view is rend
86
96
getfocusParameters(): IFocusParameters|undefined;
87
97
```
88
98
99
+
See more details from documentation
100
+
101
+
*[Focus feature in Adaptive Card Extension](viva/features/focus-feature/FocusFeatureDocumentation.md)
102
+
*[Create an Adaptive Card Extension with the focus feature](viva/features/focus-feature/FocusFeatureTutorial.md)
103
+
89
104
### Support for SharePoint Pages 'iframing' in Teams applications
90
105
91
106
Developers can specify `supportsSelfFramingInTeams` flag in a web part's manifest if the scenario requires the web part to render SharePoint page in an `<iframe>`.
Copy file name to clipboardExpand all lines: docs/spfx/viva/features/focus-feature/FocusFeatureDocumentation.md
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Focus feature in Adaptive Card Extension
3
-
description: The focus feature allows 3P developers to determine focus of elements in the Quick View.
4
-
ms.date: 03/15/2023
3
+
description: The focus feature allows developers to determine focus of elements in the Quick View.
4
+
ms.date: 04/04/2023
5
5
---
6
6
# Focus feature in Adaptive Card Extension
7
7
@@ -14,7 +14,7 @@ Microsoft added support for the focus feature, unique to Viva Connections, in th
14
14
15
15
## Focus Feature
16
16
17
-
Just like the way that developers can set a template and data via get data() and get template(), users will be able to hook into a new getter method that will allow them the flexibility to pass in an initial focus element on each render. If there is no implementation provided on the developers end, then a focus on the first tab-able element will be set.
17
+
Just like the way that developers can set a template and data via `get data()` and `get template()`, users will be able to hook into a new getter method that will allow them the flexibility to pass in an initial focus element on each render. If implementation isn't provided by developer, then a focus on the first tab-able element will be set.
18
18
19
19
```typescript
20
20
/**
@@ -53,7 +53,7 @@ This new function allows developers to customize what the focus element is by re
53
53
54
54
## Tutorial and Examples
55
55
56
-
You can take a look at [this tutorial](./FocusFeatureTutorial.md) which goes over a step by step guide on how to create a card with the available media upload action.
56
+
You can take a look at [this tutorial](./FocusFeatureTutorial.md), which goes over a step by step guide on how to create a card with the available media upload action.
57
57
58
58
1.**Read target information after once user is idle**
Copy file name to clipboardExpand all lines: docs/spfx/viva/features/focus-feature/FocusFeatureTutorial.md
+15-9Lines changed: 15 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Create an Adaptive Card Extension with the focus feature
3
3
description: Step by step guide on how to create an Adaptive Card Extension with the focus feature.
4
-
ms.date: 03/15/2023
4
+
ms.date: 04/04/2023
5
5
ms.localizationpriority: high
6
6
---
7
7
# Create an Adaptive Card Extension with focus feature
@@ -83,14 +83,14 @@ At this point, if you do `gulp serve`, then you'll see the `FocusFeature` card:
83
83
84
84
At this point, we have out of the box Adaptive Card Extension code. Now it's time to flare things up with focusing on elements in the Quick view.
85
85
86
-
In the Quick View, we will introduce buttons for two actions:
86
+
In the Quick View, we'll introduce buttons for two actions:
87
87
88
88
- Move to the next quick view
89
89
- Move to the previous quick view
90
90
91
-
We will first define the template of the Quick View. For this, locate and open the following file in your project: **./src/adaptiveCardExtensions/focusFeature/quickView/template/QuickViewTemplate.json**
91
+
We'll first define the template of the Quick View. For this, locate and open the following file in your project: **./src/adaptiveCardExtensions/focusFeature/quickView/template/QuickViewTemplate.json**
92
92
93
-
Replace the content of this file with the following:
93
+
Replace the content of this file as below:
94
94
95
95
```json
96
96
{
@@ -151,7 +151,7 @@ Replace the content of this file with the following:
151
151
}
152
152
```
153
153
154
-
Next let's implement the logic that will allow us to navigate to the next quick view. We will leverage the QuickViewNavigator to manipulate the view stack.
154
+
Next let's implement the logic that will allow us to navigate to the next quick view. We'll use the QuickViewNavigator to manipulate the view stack.
155
155
156
156
```typescript
157
157
publiconAction(action: IActionArguments): void {
@@ -219,7 +219,7 @@ Create a new template file for the second quick view: **./src/adaptiveCardExtens
219
219
```
220
220
221
221
Create a new file for the second quick view: **./src/adaptiveCardExtensions/focusFeature/quickView/QuickView2.ts**
222
-
We will add the following **onAction** function.
222
+
We'll add the following **onAction** function.
223
223
224
224
```typescript
225
225
publiconAction(action: IActionArguments): void {
@@ -273,7 +273,7 @@ Create a new template file for the third quick view: **./src/adaptiveCardExtensi
273
273
```
274
274
275
275
Create a new file for the third quick view: **./src/adaptiveCardExtensions/focusFeature/quickView/QuickView3.ts**
276
-
We will add the following **onAction** function.
276
+
We'll add the following **onAction** function.
277
277
278
278
```typescript
279
279
publiconAction(action: IActionArguments): void {
@@ -289,12 +289,18 @@ public onAction(action: IActionArguments): void {
289
289
After adding these changes, your Quick Views will look like:
290
290
291
291
292
+
293
+
Second quick view as
294
+
292
295
296
+
297
+
Third quick view as
298
+
293
299
294
300
295
301
### Implement the focusParameters function
296
302
297
-
So far we have modified our quick views to have a simple title, subtitle, and respective buttons to navigate to other quick views. Now we can finally implement the `focusParameters` function, which gives the ability to the Third Party Developer to decide what they wish to set focus on in the quick view.
303
+
So far we'e modified our quick views to have a simple title, subtitle, and respective buttons to navigate to other quick views. Now we can finally implement the `focusParameters` function, which gives the ability to the Third Party Developer to decide what they wish to set focus on in the quick view.
298
304
299
305
For this, open each respective QuickView file (**./src/adaptiveCardExtensions/focusFeature/quickView/QuickView.ts**) and import the `IFocusParameters` interface, as follows:
300
306
@@ -321,7 +327,7 @@ This is it! Congratulations on successfully creating you Adaptive Card Extension
321
327
322
328
## Notes with screen readers
323
329
324
-
When loading your card for the first time, you will notice that the contents of the first quick view are read in their entirety. This is the default behaviour when a screen reader sees a dialog as it treats it as navigation. Subsequent loads of the quick view stack will not run into this. As you navigate back and forth threw quick views, you will notice that the element target is focused and will be the only thing to be read.
330
+
When loading your card for the first time, you'll notice that the contents of the first quick view are read in their entirety. This is the default behavior when a screen reader sees a dialog as it treats it as navigation. Subsequent loads of the quick view stack won't run into this. As you navigate back and forth threw quick views, you'll notice that the element target is focused and will be the only thing to be read.
Today, users need to be aware of the web part property panels to find out the additional options each web part provides. This is a common piece of feedback where users want actions surfacing in context of where they are without having to rely on opening something to get to those options. Therefore, we are now allowing to surface most common configurations from a web part's property panel directly on to the web part's toolbar. These common configurations are referred to as the web part's Top Actions.
10
+
Top actions provide an alternative and more end user friendlier way to expose the different options and configuration capabilities for web parts in edit mode. You can use top actions to surface most common configurations from the web part property panel directly in web part toolbar, which is exposed when the page is edited.
@@ -20,7 +18,7 @@ Today, users need to be aware of the web part property panels to find out the ad
20
18
21
19
### Define your Top Action configurations
22
20
23
-
In the example below we are defining the callback function that will be used to pull the configurations for our Top Action commands.
21
+
The example below defines the callback function that will be used to pull the configurations for our Top Action commands.
24
22
25
23
> [!NOTE]
26
24
> `getTopActionsConfiguration` must be defined as public on your web part's class.
@@ -38,10 +36,10 @@ public getTopActionsConfiguration(): ITopActions | undefined {
38
36
39
37
### Define your toolbar's user interface
40
38
41
-
The `topActions` array is an ordered list of controls to render in the web part toolbar. In the example below we are defining one top action as a button interface.
39
+
The `topActions` array is an ordered list of controls to render in the web part toolbar. The example below defines one top action as a button interface.
The previous step demonstrated how to get a button to display in the web part's toolbar. Now we will perform an action when the user selects the button. Note that `actionName` was defined as `targetProperty` in the last step and since this is a button we can ignore the `newValue` that comes in.
60
+
The previous step demonstrated how to get a button to display in the web part's toolbar. This step shows how to perform an action when the user selects the button. `actionName` was defined as `targetProperty` in the last step and since this is a button that can ignore the `newValue` that comes in.
63
61
64
62
```typescript
65
63
return {
@@ -80,7 +78,7 @@ return {
80
78
81
79
### Button command
82
80
83
-
The type interace for a button is similar to the property panel's button (`IPropertyPaneButtonProps`).
81
+
The type interface for a button is similar to the property panel's button (`IPropertyPaneButtonProps`).
0 commit comments