Push live (#311)

* Update host-config.md (#248) * Update host-config.md * updated native styling information for ios * Update host-config.md (#248) (#249) * Update host-config.md * updated native styling information for ios Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Fix typo Fixes #242 * Webex Team now supports 1.2. (#258) Hi, I am the engineering manager who manages buttons & cards for webex teams. We are now support 1.2 with certain exceptions. * Update partners.md * Fix typo (#257) * Update service.md (#252) * Update service.md * Update partners.md * Update render-a-card.md (#239) Fixed a typo * Update partners.md * Updated note text - .NET version is available (#265) * Update Web Chat to 4.8.0 with AC 1.2.5 (#264) * typo, then > than (#263) * C196067 - Converting plain-text link to MD syntax (#267) There are some languages that, based on linguistic grounds, changed the position of the links in comparison to their source content and placed them at the beginning of the string. This prevents their correct rendering on live pages. Kindly consider using MD hyperlink syntax structure \[..\]\(…\) Affected Line 13 * Update config to enable docfx v3 (#269) * fix obsolete ctor * Update variable name (#280) * Fixed minor typos (#279) * Fixed a wrong spelling (#281) * Updated iOS example (#283) * Updating Web Chat to 4.9.0 (#284) * Update templating docs (#272) * Update templating docs * update the language * Updated .Net section in sdk.md (#275) * added custom funtion to sdk.md * Update sdk.md * Update sdk.md * Update index.md * Update language.md * Update language.md * Update index.md * Update index.md * Update toc.yml * Update index.md * added Troubleshooting section * updated sdk section * Update language.md * Update sdk.md * Update AdaptiveCards/templating/index.md Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Update AdaptiveCards/templating/index.md Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Update AdaptiveCards/templating/language.md Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Update index.md Co-authored-by: Joseph Woo <nesalang@gmail.com> Co-authored-by: Joseph Woo <joswo@microsoft.com> Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Update extensibility.md * Update index.md * Push live (#287) (#288) * Update host-config.md (#248) * Update host-config.md * updated native styling information for ios * Update host-config.md (#248) (#249) * Update host-config.md * updated native styling information for ios Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Fix typo Fixes #242 * Webex Team now supports 1.2. (#258) Hi, I am the engineering manager who manages buttons & cards for webex teams. We are now support 1.2 with certain exceptions. * Update partners.md * Fix typo (#257) * Update service.md (#252) * Update service.md * Update partners.md * Update render-a-card.md (#239) Fixed a typo * Update partners.md * Updated note text - .NET version is available (#265) * Update Web Chat to 4.8.0 with AC 1.2.5 (#264) * typo, then > than (#263) * C196067 - Converting plain-text link to MD syntax (#267) There are some languages that, based on linguistic grounds, changed the position of the links in comparison to their source content and placed them at the beginning of the string. This prevents their correct rendering on live pages. Kindly consider using MD hyperlink syntax structure \[..\]\(…\) Affected Line 13 * Update config to enable docfx v3 (#269) * fix obsolete ctor * Update variable name (#280) * Fixed minor typos (#279) * Fixed a wrong spelling (#281) * Updated iOS example (#283) * Updating Web Chat to 4.9.0 (#284) * Update templating docs (#272) * Update templating docs * update the language * Updated .Net section in sdk.md (#275) * added custom funtion to sdk.md * Update sdk.md * Update sdk.md * Update index.md * Update language.md * Update language.md * Update index.md * Update index.md * Update toc.yml * Update index.md * added Troubleshooting section * updated sdk section * Update language.md * Update sdk.md * Update AdaptiveCards/templating/index.md Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Update AdaptiveCards/templating/index.md Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Update AdaptiveCards/templating/language.md Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Update index.md Co-authored-by: Joseph Woo <nesalang@gmail.com> Co-authored-by: Joseph Woo <joswo@microsoft.com> Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> * Update extensibility.md * Update index.md Co-authored-by: Joseph Woo <nesalang@gmail.com> Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> Co-authored-by: urangasa <55806167+urangasa@users.noreply.github.com> Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com> Co-authored-by: Mark McGee <46461816+MarkMcGee1@users.noreply.github.com> Co-authored-by: Haldun Bayhantopcu <hbayhantopcu@gmail.com> Co-authored-by: Bill Bliss <bill@billbliss.net> Co-authored-by: William Wong <compulim@users.noreply.github.com> Co-authored-by: Bob <crowcoder@gmail.com> Co-authored-by: V-vafune <54362071+V-vafune@users.noreply.github.com> Co-authored-by: VSC-Service-Account <vscavu@microsoft.com> Co-authored-by: Tony Xia <xia_tony@hotmail.com> Co-authored-by: Joseph Woo <Joseph.Woo@microsoft.com> Co-authored-by: Joseph Woo <joswo@microsoft.com> Co-authored-by: Joseph Woo <nesalang@gmail.com> Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> Co-authored-by: urangasa <55806167+urangasa@users.noreply.github.com> Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com> Co-authored-by: Mark McGee <46461816+MarkMcGee1@users.noreply.github.com> Co-authored-by: Haldun Bayhantopcu <hbayhantopcu@gmail.com> Co-authored-by: Bill Bliss <bill@billbliss.net> Co-authored-by: William Wong <compulim@users.noreply.github.com> Co-authored-by: Bob <crowcoder@gmail.com> Co-authored-by: V-vafune <54362071+V-vafune@users.noreply.github.com> Co-authored-by: VSC-Service-Account <vscavu@microsoft.com> Co-authored-by: Tony Xia <xia_tony@hotmail.com> Co-authored-by: Joseph Woo <Joseph.Woo@microsoft.com> Co-authored-by: Joseph Woo <joswo@microsoft.com> * Update sdk.md * Update language.md * Update host-config.md * CC191749 - Fixing Typo (#293) Contributor has reported possible source content issue. Affected Line: 69 Description: "instamce" should be "instance" * Update sdk.md * Update sdk.md * Update version number of Web Chat (#299) * added markdown clarification * change http to https (#303) * Update outlook.md to fix a dead link (#297) * Update Web Chat to 4.9.2 (#308) * [Android] Action.ShowCard native styling (#310) * Update JS extensibility doc to include 2.0 model (#298) * fix link * Update sdk.md (#296) * Update sdk.md Added Q/A about date/time string RFC 3389 format. * remove locale from link Co-authored-by: Matt Hidinger <matt.hidinger@gmail.com> * Added C# Code Exmaple (#307) Co-authored-by: Joseph Woo <nesalang@gmail.com> Co-authored-by: shalinijoshi19 <shalinij@microsoft.com> Co-authored-by: urangasa <55806167+urangasa@users.noreply.github.com> Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com> Co-authored-by: Mark McGee <46461816+MarkMcGee1@users.noreply.github.com> Co-authored-by: Haldun Bayhantopcu <hbayhantopcu@gmail.com> Co-authored-by: Bill Bliss <bill@billbliss.net> Co-authored-by: William Wong <compulim@users.noreply.github.com> Co-authored-by: Bob <crowcoder@gmail.com> Co-authored-by: V-vafune <54362071+V-vafune@users.noreply.github.com> Co-authored-by: VSC-Service-Account <vscavu@microsoft.com> Co-authored-by: Tony Xia <xia_tony@hotmail.com> Co-authored-by: Joseph Woo <Joseph.Woo@microsoft.com> Co-authored-by: Joseph Woo <joswo@microsoft.com> Co-authored-by: Hao Chen <editorchenhao@hotmail.com> Co-authored-by: Steve Beaugé <steve_beauge@msn.com> Co-authored-by: Risheek Rajolu <risheekrr@gmail.com> Co-authored-by: David Claux <dclaux@users.noreply.github.com> Co-authored-by: John Kilmister <blueboxes@users.noreply.github.com>
MicrosoftDocs · Jul 16, 2020 · fec0fd2 · fec0fd2
1 parent eb71aeb
commit fec0fd2
Show file tree

Hide file tree

Showing 14 changed files with 299 additions and 35 deletions.
diff --git a/AdaptiveCards/authoring-cards/getting-started.md b/AdaptiveCards/authoring-cards/getting-started.md
@@ -84,7 +84,7 @@ Actions add buttons to the card. These can perform a variety of actions, like op
 
 ## Learn More
 
-* [Browse Sample cards](http://adaptivecards.io/samples/) for inspiration
-* Use the [Schema Explorer](http://adaptivecards.io/explorer) to browse the available elements
-* Build a card using the [Interactive Visualizer](http://adaptivecards.io/visualizer/)
-* [Get in touch](http://adaptivecards.io/connect) with any feedback you have
+* [Browse Sample cards](https://adaptivecards.io/samples/) for inspiration
+* Use the [Schema Explorer](https://adaptivecards.io/explorer) to browse the available elements
+* Build a card using the [Interactive Visualizer](https://adaptivecards.io/visualizer/)
+* [Get in touch](https://adaptivecards.io/connect) with any feedback you have
diff --git a/AdaptiveCards/authoring-cards/text-features.md b/AdaptiveCards/authoring-cards/text-features.md
@@ -2,16 +2,21 @@
 title: Text Features
 author: matthidinger
 ms.author: mahiding
-ms.date: 11/09/2017
+ms.date: 06/18/2020
 ms.topic: article
 ---
 
 # Text features
 
-`TextBlock` offers some advanced features for formatting and localizing the text.
+[TextBlock](https://adaptivecards.io/explorer/TextBlock.html) offers advanced features for formatting and localizing the text.
 
-## Markdown
-To support inline markup, Adaptive Cards support a **subset** of Markdown syntax.
+## Markdown (Commonmark subset)
+
+To support inline markup, Adaptive Cards support a **subset** of the [Commonmark](https://commonmark.org/help/) Markdown syntax.
+
+> [!NOTE]
+>
+> [RichTextBlock](https://adaptivecards.io/explorer/RichTextBlock.html) does not support markdown, but offers a wide array of text configuration options directly within the the [TextRun](https://adaptivecards.io/explorer/TextRun.html)
 
 _Supported_
 
@@ -62,7 +67,7 @@ The below payload would render something like this:
         },
         {
             "type": "TextBlock",
-            "text": "Check out [Adaptive Cards](http://adaptivecards.io)"
+            "text": "Check out [Adaptive Cards](https://adaptivecards.io)"
         }
     ]
 }

diff --git a/AdaptiveCards/getting-started/bots.md b/AdaptiveCards/getting-started/bots.md
@@ -102,7 +102,7 @@ You can:
 * Add multiple types of `Actions`
 * Collect `Input` from your users
 * Have one card `show another card`
-* [Check out the full schema explorer](http://adaptivecards.io/explorer/)! 
+* [Check out the full schema explorer](https://adaptivecards.io/explorer/)! 
 
 ## Platform SDKs
 
@@ -123,7 +123,7 @@ The Bot Framework lets you publish your bot to multiple channels. We're working
 
 We've just scratched the surface in this tutorial, so please take a look at the links below to explore more ways that Adaptive Cards can enhance your bot.
 
-* [Browse Sample cards](http://adaptivecards.io/samples/) for inspiration
-* Use the [Schema Explorer](http://adaptivecards.io/explorer) to learn the available elements
-* Build a card using the [Interactive Visualizer](http://adaptivecards.io/visualizer/index.html?hostApp=Skype)
-* [Get in touch](http://adaptivecards.io/connect) with any feedback you have
+* [Browse Sample cards](https://adaptivecards.io/samples/) for inspiration
+* Use the [Schema Explorer](https://adaptivecards.io/explorer) to learn the available elements
+* Build a card using the [Interactive Visualizer](https://adaptivecards.io/visualizer/index.html?hostApp=Skype)
+* [Get in touch](https://adaptivecards.io/connect) with any feedback you have
diff --git a/AdaptiveCards/getting-started/outlook.md b/AdaptiveCards/getting-started/outlook.md
@@ -23,4 +23,4 @@ You can now use Adaptive Cards to power your Outlook Actionable Messages, and cr
 
 - Head over to https://docs.microsoft.com/outlook/actionable-messages/ which will guide you through the steps of creating your first Actionable Message scenario.
 - Use the Actionable Message Card Playground tool to see card samples, create your own cards, send them to your own Office 365 account and see them in [Outlook for the Web](https://outlook.office.com).
-- Would you rather not write JSON manually? The [Adaptive Card Designer (preview)](https://acdesignerbeta.azurewebsites.net) lets you create Adaptive Cards without writing a single line of JSON!
+- Would you rather not write JSON manually? The [Adaptive Card Designer](https://adaptivecards.io/designer/) lets you create Adaptive Cards without writing a single line of JSON!
diff --git a/AdaptiveCards/getting-started/windows.md b/AdaptiveCards/getting-started/windows.md
@@ -47,7 +47,7 @@ We don't have anything to share just yet, but we're working on incorporating Ada
 
 We've barely scratched the surface in this tutorial, so check back soon and browse the links below to explore more about Adaptive Cards.
 
-* [Browse Sample cards](http://adaptivecards.io/samples/) for inspiration
-* Use the [Schema Explorer](http://adaptivecards.io/explorer) to learn the available elements
-* Build a card using the [Interactive Visualizer](http://adaptivecards.io/visualizer/index.html?hostApp=Skype)
-* [Get in touch](http://adaptivecards.io/connect) with any feedback you have
+* [Browse Sample cards](https://adaptivecards.io/samples/) for inspiration
+* Use the [Schema Explorer](https://adaptivecards.io/explorer) to learn the available elements
+* Build a card using the [Interactive Visualizer](https://adaptivecards.io/visualizer/index.html?hostApp=Skype)
+* [Get in touch](https://adaptivecards.io/connect) with any feedback you have
diff --git a/AdaptiveCards/resources/partners.md b/AdaptiveCards/resources/partners.md
@@ -16,7 +16,7 @@ If you are interested in joining the Adaptive Cards ecosystem, please [reach out
 
 Platform | Description | Documentation | Version
 ---------|-------------|---------------|---------
-[Bot Framework Web Chat](https://github.com/Microsoft/BotFramework-WebChat)  | Embeddable web chat control for the Microsoft Bot Framework | [Get Started](https://docs.microsoft.com/adaptive-cards/get-started/bots) | 1.2.5 (Web Chat 4.9.0)
+[Bot Framework Web Chat](https://github.com/Microsoft/BotFramework-WebChat)  | Embeddable web chat control for the Microsoft Bot Framework | [Get Started](https://docs.microsoft.com/adaptive-cards/get-started/bots) | 1.2.6 (Web Chat 4.9.2)
 [Outlook Actionable Messages](https://docs.microsoft.com/outlook/actionable-messages/)  | Attach an actionable message to email | [Get Started](https://docs.microsoft.com/outlook/actionable-messages/) | 1.0
 [Microsoft Teams](https://products.office.com/microsoft-teams/group-chat-software) | Platform that combines workplace chat, meetings, and notes | [Get Started](https://docs.microsoft.com/microsoftteams/platform/concepts/cards/cards-reference#adaptive-card) | 1.2
 [Cortana Skills](https://docs.microsoft.com/cortana/skills/adaptive-cards) | A virtual assistant for Windows 10 | [Get Started](https://docs.microsoft.com/adaptive-cards/get-started/bots) | 1.0

diff --git a/AdaptiveCards/resources/tools.md b/AdaptiveCards/resources/tools.md
@@ -24,7 +24,7 @@ Check out the [adaptivecards-designer](https://npmjs.com/adaptivecards-designer)
 
 Schema validation is a powerful way of making authoring easier and enabling tooling.
 
-We have provided a complete [JSON Schema file](http://adaptivecards.io/schemas/1.2.0/adaptive-card.json) for editing and validating adaptive cards in json. Note that the schema URL is versioned, newer versions of Adaptive Cards will have a corresponding URL.
+We have provided a complete [JSON Schema file](https://adaptivecards.io/schemas/1.2.0/adaptive-card.json) for editing and validating adaptive cards in json. Note that the schema URL is versioned, newer versions of Adaptive Cards will have a corresponding URL.
 
 In Visual Studio and Visual Studio Code you can get automatic Intellisense by including a `$schema` reference.
 

diff --git a/AdaptiveCards/sdk/rendering-cards/android/native-styling.md b/AdaptiveCards/sdk/rendering-cards/android/native-styling.md
@@ -30,3 +30,11 @@ Text inputs with an inline action allows styling for the action being rendered.
 
 > [!IMPORTANT]
 > All item names must be kept as shown here as the renderer looks for those exact names
+
+## Action.ShowCard
+
+Action.ShowCard can be styled by adding styles to your theme in styles.xml.
+
+```styles.xml
+ <item name="adaptiveShowCardAction">@style/adaptiveShowCardAction</item>
+```
diff --git a/AdaptiveCards/sdk/rendering-cards/javascript/extensibility.md b/AdaptiveCards/sdk/rendering-cards/javascript/extensibility.md
@@ -2,16 +2,251 @@
 title: Extensibility - JavaScript SDK
 author: matthidinger
 ms.author: mahiding
-ms.date: 11/28/2017
+ms.date: 07/16/2020
 ms.topic: article
 ---
 
 # Extensibility - JavaScript
 
-## Implement and register a custom element
+## Extensibility with the JS SDK version 2.0 and greater
 
+### Before you start
+
+> **IMPORTANT**: Version 2.0 and greater of the JS SDK makes use of [TypeScript decorators](https://www.typescriptlang.org/docs/handbook/decorators.html). Decorators are still an experimental feature and must be explicitly enabled in your `tsconfig.js` file:
+
+```json
+{
+   "compilerOptions": {
+       "experimentalDecorators": true
+   }
+}
+```
+Version 2.0 of the JS SDK introduces breaking changes in the way custom elements and actions are implemented and registered. For an example on how to implement and register an element or action using previous versions of the SDK, see [Extensibility with the JS SDK prior to version 2.0](#extensibility-with-the-js-sdk-prior-to-version-20).
+
+
+### Custom elements
 The steps for creating a custom Adaptive Card element type are:
-- Create a new class driving from `CardElement`
+- Create a new class deriving from `CardElement`
+- Create its schema by declaring static property definitions
+- Implement its `getJsonTypeName`, and `internalRender` methods
+- Register it in the global element registry, or use a custom registry on a per-card basis
+
+
+Let's take an example and implement a simple Progress Bar element:
+```typescript
+export class ProgressBar extends AC.CardElement {
+    static readonly JsonTypeName = "ProgressBar";
+
+    //#region Schema
+
+    static readonly titleProperty = new AC.StringProperty(AC.Versions.v1_0, "title", true);
+    static readonly valueProperty = new AC.NumProperty(AC.Versions.v1_0, "value");
+
+    @AC.property(ProgressBar.titleProperty)
+    get title(): string | undefined {
+        return this.getValue(ProgressBar.titleProperty);
+    }
+
+    set title(value: string) {
+        if (this.title !== value) {
+            this.setValue(ProgressBar.titleProperty, value);
+
+            this.updateLayout();
+        }
+    }
+
+    @AC.property(ProgressBar.valueProperty)
+    get value(): number {
+        return this.getValue(ProgressBar.valueProperty);
+    }
+
+    set value(value: number) {
+        let adjustedValue = value;
+
+        if (adjustedValue < 0) {
+            adjustedValue = 0;
+        }
+        else if (adjustedValue > 100) {
+            adjustedValue = 100;
+        }
+
+        if (this.value !== adjustedValue) {
+            this.setValue(ProgressBar.valueProperty, adjustedValue);
+
+            this.updateLayout();
+        }
+    }
+
+    //#endregion
+
+    private _titleElement: HTMLElement;
+    private _leftBarElement: HTMLElement;
+    private _rightBarElement: HTMLElement;
+
+    protected internalRender(): HTMLElement {
+        let element = document.createElement("div");
+
+        let textBlock = new AC.TextBlock();
+        textBlock.setParent(this);
+        textBlock.text = this.title;
+        textBlock.wrap = true;
+
+        this._titleElement = textBlock.render();
+        this._titleElement.style.marginBottom = "6px";
+
+        let progressBarElement = document.createElement("div");
+        progressBarElement.style.display = "flex";
+
+        this._leftBarElement = document.createElement("div");
+        this._leftBarElement.style.height = "6px";
+        this._leftBarElement.style.backgroundColor = AC.stringToCssColor(this.hostConfig.containerStyles.emphasis.foregroundColors.accent.default);
+
+        this._rightBarElement = document.createElement("div");
+        this._rightBarElement.style.height = "6px";
+        this._rightBarElement.style.backgroundColor = AC.stringToCssColor(this.hostConfig.containerStyles.emphasis.backgroundColor);
+
+        progressBarElement.append(this._leftBarElement, this._rightBarElement);
+
+        element.append(this._titleElement, progressBarElement);
+
+        return element;
+    }
+
+    getJsonTypeName(): string {
+        return ProgressBar.JsonTypeName;
+    }
+
+    updateLayout(processChildren: boolean = true) {
+        super.updateLayout(processChildren);
+
+        if (this.renderedElement) {
+            if (this.title) {
+                this._titleElement.style.display = "none";
+            }
+            else {
+                this._titleElement.style.removeProperty("display");
+            }
+
+            this._leftBarElement.style.flex = "1 1 " + this.value + "%";
+            this._rightBarElement.style.flex = "1 1 " + (100 - this.value) + "%";
+        }
+    }
+}
+```
+That's it. The ProgressBar element now needs to be registered in order to be recognized by the SDK. You can register it globally:
+
+```typescript
+AC.GlobalRegistry.elements.register(ProgressBar.JsonTypeName, ProgressBar);
+```
+
+Or you can use a per-card registry, which allows the use of different registries for different cards in your application:
+
+```typescript
+// Create a custom registry for elements
+let elementRegistry = new AC.CardObjectRegistry<AC.CardElement>();
+
+// Populate it with the default set of elements
+AC.GlobalRegistry.populateWithDefaultElements(elementRegistry);
+
+// Register the custom ProgressBar element
+elementRegistry.register(ProgressBar.JsonTypeName, ProgressBar);
+
+// Parse a card payload using the custom registry
+let serializationContext = new AC.SerializationContext();
+serializationContext.setElementRegistry(elementRegistry);
+
+let card = new AC.AdaptiveCard();
+card.parse(
+    {
+        type: "AdaptiveCard",
+        version: "1.0",
+        body: [
+            {
+                type: "ProgressBar",
+                title: "This is a progress bar",
+                value: 45
+            }
+        ]
+    },
+    serializationContext
+);
+```
+
+### Custom actions
+The steps to implementing a custom action are the same as those for elements. The only difference is that actions are registered in action registries, and not in element registries.
+
+```typescript
+export class AlertAction extends AC.Action {
+    static readonly JsonTypeName = "Action.Alert";
+
+    //#region Schema
+
+    static readonly textProperty = new AC.StringProperty(AC.Versions.v1_0, "text", true);
+
+    @AC.property(AlertAction.textProperty)
+    text?: string;
+
+    //#endregion
+
+    getJsonTypeName(): string {
+        return AlertAction.JsonTypeName;
+    }
+
+    execute() {
+        alert(this.text);
+    }
+}
+```
+
+Register the new action globally:
+```typescript
+AC.GlobalRegistry.actions.register(AlertAction.JsonTypeName, AlertAction);
+```
+
+Or use a per-card registry:
+```typescript
+// Create a custom registry for actions
+let actionRegistry = new AC.CardObjectRegistry<AC.Action>();
+
+// Populate it with the default set of actions
+AC.GlobalRegistry.populateWithDefaultActions(actionRegistry);
+
+// Register the custom AlertAction type
+actionRegistry.register(AlertAction.JsonTypeName, AlertAction);
+
+// Parse a card payload using the custom registry
+let serializationContext = new AC.SerializationContext();
+serializationContext.setActionRegistry(actionRegistry);
+
+let card = new AC.AdaptiveCard();
+card.parse(
+    {
+        type: "AdaptiveCard",
+        version: "1.0",
+        body: [
+            {
+                type: "TextBlock",
+                text: "This demonstrates the AlertAction action."
+            }
+        ],
+        actions: [
+            {
+                type: "Action.Alert",
+                title: "Click me!",
+                text: "Hello World"
+            }
+        ]
+    },
+    serializationContext
+);
+```
+
+## Extensibility with the JS SDK prior to version 2.0
+
+### Custom elements
+
+The steps for creating a custom Adaptive Card element type are:
+- Create a new class deriving from `CardElement`
 - Implement its `getJsonTypeName`, `parse`, `toJSON`, `internalRender` and `renderSpeech` methods
 - Register it by adding it to the renderer's element registry
 
@@ -137,7 +372,7 @@ That's it. Now just register the Progress Bar class with the renderer:
 Adaptive.AdaptiveCard.elementTypeRegistry.registerType("ProgressBar", () => { return new ProgressBar(); });
 ```
 
-## Implement and register a custom action
+## Custom actions
 
 The steps for creating a custom Adaptive Card action are essentially the same as those for custom elements. Here is a simple example of an Alert Action that simply displays a message box with configurable text:
 
@@ -173,14 +408,14 @@ export class AlertAction extends Adaptive.Action {
 
 Now register the new action:
 
-```
+```typescript
 Adaptive.AdaptiveCard.actionTypeRegistry.registerType("Action.Alert", () => { return new AlertAction(); });
 ```
 
 ## Example
 
 Here is a sample card that uses both the ProgressBar element and AlertAction action:
-```
+```json
 {
     "type": "AdaptiveCard",
     "version": "1.0",