Merge pull request SharePoint#7210 from ganesh-sanap/patch-7

Update build-first-sharepoint-adaptive-card-extension.md

Author: andrewconnell

docs/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension.md

@@ -1,7 +1,7 @@
 ---
 title: Build your first SharePoint Adaptive Card Extension
 description: Adaptive Card Extensions (ACEs) are a new SharePoint Framework component type, which enable developers to build rich, native extensions to Viva Connections' Dashboards and SharePoint Pages. In this tutorial, you'll build and explore your first ACE.
-ms.date: 07/22/2021
+ms.date: 08/05/2021
 ms.prod: sharepoint
 localization_priority: Priority
 ---
@@ -34,7 +34,7 @@ When prompted, enter the following values (*select the default option for all pr
 
 When prompted by the generator for which ACE template to use, select **Primary Text Template** for this tutorial.
 
-At this point, Yeoman installs the required dependencies and scaffolds the solution files. This might take a few minutes.
+At this point, Yeoman installs the required dependencies and scaffolds the solution files. This might take few minutes.
 
 ## Step 2 - Serve the ACE in the workbench
 
@@ -74,7 +74,7 @@ Switch the Workbench to **Preview** mode.
 
 :::image type="content" source="../../../images/viva-extensibility/lab1-preview.png" alt-text="Set the workbench to preview mode":::
 
-Select on the **Quick View** button on the ACE:
+Select the **Quick View** button on the ACE:
 
 :::image type="content" source="../../../images/viva-extensibility/lab1-hw-ql.png" alt-text="Select the Quick View button on the ACE":::
 
@@ -131,7 +131,7 @@ The default Card view, will render using the following properties from the manif
 > [!NOTE]
 > Unlike with the Card view, there is no default Quick view.
 
-### Register a view for hte ACE
+### Register a view for the ACE
 
 For a View to be used, it must be registered with its respective `ViewNavigator`.
 
@@ -184,7 +184,7 @@ Each of these Views will render differently and have different constraints on wh
 > [!NOTE]
 > The card views for Adaptive Card templates are fixed and cannot be changed.
 
-Additionally there two generics for the `properties` and `state` objects shared between the view and the ACE.
+Additionally, there are two generics for the `properties` and `state` objects shared between the view and the ACE.
 
 - **TProperties**: The View's properties interface, the same interface used by persisted properties of the ACE (*property bag*).
 - **TState**: The View's generic state interface, which must be the same as the ACE's state interface
@@ -260,10 +260,10 @@ Selecting the Card will now open the Quick view.
 
 Locate and open the following file: **./src/adaptiveCardExtensions/helloWorld/quickView/QuickView.ts**.
 
-Quick views must extend the **BaseAdaptiveCardView** base case. There are three optional generics that can be defined:
+Quick views must extend the **BaseAdaptiveCardView** base class. There are three optional generics that can be defined:
 
 - **TData**: The type returned from the `data()` getter method.
-- **TProperties**: Similar to the Quick view, this is the same interface used by persisted properties of the ACE (*property bag*).
+- **TProperties**: Similar to the Card view, this is the same interface used by persisted properties of the ACE (*property bag*).
 - **TState** Similar to the Card view, this is the set of stateful data the View needs to render. **TState** must share properties with the ACE's state interface.
 
 A Quick View has more control over the Adaptive Card template schema than a Card view. The
@@ -355,7 +355,9 @@ public get data(): IPrimaryTextCardParameters {
 > [!NOTE]
 > In its `template()` getter, the Quick view of the ACE you generated returns the object from a JSON file.
 
-Locate and open the following file: **./src/adaptiveCardExtensions/helloWorld/quickView/template/QuickViewTemplate.json**. Replace the contents of this file with the following JSON:
+Locate and open the following file: **./src/adaptiveCardExtensions/helloWorld/quickView/template/QuickViewTemplate.json**.
+
+Replace the contents of this file with the following JSON:
 
 ```json
 {
@@ -429,7 +431,7 @@ public onAction(action: IActionArguments): void {
 }
 ```
 
-Selecting on either button will now set the state's `subTitle` to the `data.message` value, causing a re-render (*more on this later*). The Quick view's Adaptive Card will now display this message, since its template binds to `subTitle`.
+Selecting either button will now set the state's `subTitle` to the `data.message` value, causing a re-render (*more on this later*). The Quick view's Adaptive Card will now display this message, since its template binds to `subTitle`.
 
 ### Property Pane
 
@@ -497,7 +499,7 @@ protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newVal
 }
 ```
 
-Passing `setState()` a `Partial<TState>` object will update all Views with the new values. Updating the **Description Field** in the Property Pane will now update the `subTitle` displayed on the Quick view.
+Passing a `Partial<TState>` object to `setState()` method will update all Views with the new values. Updating the **Description Field** in the Property Pane will now update the `subTitle` displayed on the Quick view.
 
 > [!NOTE]
 > If no value or identical values are passed, a re-render will still occur.
@@ -519,8 +521,8 @@ public onInit(): Promise<void> {
 
 Unlike with `properties`, `state` isn't persisted past the current session and should only be used for ephemeral View state.
 
-> [!Note]
-The scaffolded AdaptiveCardExtension maintains a `description` property in the `state` object. This is obsolete, since the AdaptiveCardExtension and all its views can simply reference the `description` stored in `properties`.
+> [!NOTE]
+> The scaffolded AdaptiveCardExtension maintains a `description` property in the `state` object. This is obsolete, since the AdaptiveCardExtension and all its views can simply reference the `description` stored in `properties`.
 
 ## Step 4 - Card designer