Push live (#343)

* 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 <[email protected]> * 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 <[email protected]> * Update AdaptiveCards/templating/index.md Co-authored-by: shalinijoshi19 <[email protected]> * Update AdaptiveCards/templating/language.md Co-authored-by: shalinijoshi19 <[email protected]> * Update index.md Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: shalinijoshi19 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * Update AdaptiveCards/templating/index.md Co-authored-by: shalinijoshi19 <[email protected]> * Update AdaptiveCards/templating/language.md Co-authored-by: shalinijoshi19 <[email protected]> * Update index.md Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: shalinijoshi19 <[email protected]> * Update extensibility.md * Update index.md Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: shalinijoshi19 <[email protected]> Co-authored-by: urangasa <[email protected]> Co-authored-by: Chris Whitten <[email protected]> Co-authored-by: Mark McGee <[email protected]> Co-authored-by: Haldun Bayhantopcu <[email protected]> Co-authored-by: Bill Bliss <[email protected]> Co-authored-by: William Wong <[email protected]> Co-authored-by: Bob <[email protected]> Co-authored-by: V-vafune <[email protected]> Co-authored-by: VSC-Service-Account <[email protected]> Co-authored-by: Tony Xia <[email protected]> Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: shalinijoshi19 <[email protected]> Co-authored-by: urangasa <[email protected]> Co-authored-by: Chris Whitten <[email protected]> Co-authored-by: Mark McGee <[email protected]> Co-authored-by: Haldun Bayhantopcu <[email protected]> Co-authored-by: Bill Bliss <[email protected]> Co-authored-by: William Wong <[email protected]> Co-authored-by: Bob <[email protected]> Co-authored-by: V-vafune <[email protected]> Co-authored-by: VSC-Service-Account <[email protected]> Co-authored-by: Tony Xia <[email protected]> Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: Joseph Woo <[email protected]> * 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 * 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 <[email protected]> * Added C# Code Exmaple (#307) * fix schemas error * Add documentation for input validation * Updating link to maven packages * PR feedback * Update renderer status page to reflect input validation * Fix link * Fix mistaken revert * Fix link again * Another link update * Updating status for NativeStyling row item Updating Android status to reflect non availability. * Add host config changes * Fix warning * Add label to input validation page * Fix comments from PR * Updating update log * Update future.md with links to productboard (#334) * Update future.md with links to productboard - Updated roadmap link - Updated link to "Submit ideas" * PR feedback * Fixing warning about multiple top-level heads * Update JS extensibility page for inputs (#342) * Update Web Chat version (#325) * Update Web Chat version * Update Web Chat to 4.11.0 * Typo (#341) * Spelling mistake langauge (#340) There is minor correction into documentation. Spelling "langauge" is not correct. It added corrected word i.e. language. Kindly review and update. Thanks. * Update example to use onProcessMarkdown (#339) - instead of the deprecated processMarkdown Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: shalinijoshi19 <[email protected]> Co-authored-by: urangasa <[email protected]> Co-authored-by: Chris Whitten <[email protected]> Co-authored-by: Mark McGee <[email protected]> Co-authored-by: Haldun Bayhantopcu <[email protected]> Co-authored-by: Bill Bliss <[email protected]> Co-authored-by: William Wong <[email protected]> Co-authored-by: Bob <[email protected]> Co-authored-by: V-vafune <[email protected]> Co-authored-by: VSC-Service-Account <[email protected]> Co-authored-by: Tony Xia <[email protected]> Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: Joseph Woo <[email protected]> Co-authored-by: Hao Chen <[email protected]> Co-authored-by: Steve Beaugé <[email protected]> Co-authored-by: Risheek Rajolu <[email protected]> Co-authored-by: David Claux <[email protected]> Co-authored-by: John Kilmister <[email protected]> Co-authored-by: Rebecca Muraira <[email protected]> Co-authored-by: Alberto Medina Gutierrez <[email protected]> Co-authored-by: almedina-ms <[email protected]> Co-authored-by: Corina <[email protected]> Co-authored-by: Jens Pettersson <[email protected]> Co-authored-by: Manoj Kumar Mittal <[email protected]> Co-authored-by: Mike Repec <[email protected]>
MicrosoftDocs · Nov 20, 2020 · 65b792d · 65b792d
1 parent 588f3e9
commit 65b792d
Show file tree

Hide file tree

Showing 9 changed files with 273 additions and 45 deletions.
diff --git a/AdaptiveCards/authoring-cards/input-validation.md b/AdaptiveCards/authoring-cards/input-validation.md
@@ -31,7 +31,8 @@ An `errorMessage` property is available on all input types to specify what error
 
 ## Labels
 
-Another property added in schema version 1.3 for all input elements is the `label` string property. Using the `label` property is the recommended way of tagging inputs in an Adaptive Card, vis-a-vis the `placeholder` property. It is a simple and concise way of labeling inputs for card authors and has the following benefits:
+Another property added in schema version 1.3 for all input elements is the `label` string property. Using the `label` property is the recommended way of tagging inputs in an Adaptive Card, vis-a-vis the `placeholder` property. It is a simple and concise way of labelling inputs for card authors and has the following benefits:
+
 * Validation indicators: as mentioned above inputs can be now marked as required, labels for required inputs will have a visual indicator next to them. This visual indicator is defined in the `HostConfig` and by default is rendered as an asterisk `*`.
 * Accessibility: by having a connection between labels and inputs, renderer libraries can set the necessary properties to allow users using assistive technologies (screen readers) to be able to interact correctly with inputs inside adaptive cards.
     * Labels vs Placeholders: as Katie Sherwin explains in the article [Placeholders in form fields are harmful](https://www.nngroup.com/articles/form-design-placeholders/) using placeholders has many negative consequences such as straining users' short term memory, making it harder for users to verify their inputs before submitting, providing difficulties for users to read them as, usually, placeholder text has poor color contrast against it's background or screen readers not reading the placeholder text at all, just to name a few.

diff --git a/AdaptiveCards/index.md b/AdaptiveCards/index.md
@@ -37,7 +37,7 @@ The goals for Adaptive Cards are:
 Adaptive Cards are great for card authors:
 
 * **One schema** - You get a single format, minimizing the cost of creating a card and maximizing the number of places it can be used.
-* **Richer expression** - Your content can more closely align with want you want to say because you have a richer palette to paint with.
+* **Richer expression** - Your content can more closely align with what you want to say because you have a richer palette to paint with.
 * **Broad reach** - Your content will work across a broader set of applications without you having to learn new schemas.
 * **Input controls** - Your card can include input controls for gathering information from the user that is viewing the card.
 * **Better tooling** - An open card ecosystem means better tooling that is shared by everyone.

diff --git a/AdaptiveCards/rendering-cards/renderer-status.md b/AdaptiveCards/rendering-cards/renderer-status.md
@@ -36,7 +36,6 @@ The tables below show the current status of each renderer, based on their public
 |[TextBlock Markdown support](../authoring-cards/text-features.md#markdown-commonmark-subset) | ✅* | ✅ | ✅ | ✅ | ✅ |
 |Input Validation and Labels | ❌ | ✅ | ✅ | ✅ | ✅ |
 
-
 \* The HTML renderer doesn’t include built-in Markdown support in order to minimize the size of the library and to let consuming applications use their preferred Markdown processor. The HTML renderer will however automatically use Markdown-It if it is loaded.
 
 ### Extensibility
@@ -46,7 +45,7 @@ The tables below show the current status of each renderer, based on their public
 |Override Element Renderer | ✅ | ✅ | ✅ | ✅ | ✅ |
 |Add new Element Renderer | ✅ | ✅ | ✅ | ✅ | ✅ |
 |Remove Element Renderer | ✅ | ✅ | ✅ | ✅ | ✅ |
-|[Override/add/remove Action Renderer](https://github.com/Microsoft/AdaptiveCards/issues/1671) | ✅ | ✅ | ❌ | ✅ | ✅ |
+|[Override/add/remove Action Renderer](https://github.com/Microsoft/AdaptiveCards/issues/1671) | ✅ | ✅ | ✅ | ✅ | ✅ |
 
 ### Actions
 

diff --git a/AdaptiveCards/resources/future.md b/AdaptiveCards/resources/future.md
@@ -6,40 +6,9 @@ ms.date: 05/16/2018
 ms.topic: article
 ---
 
-# Future work
-
-While we have made excellent progress defining adaptive cards, there is still lots of work to do. Our hope is that through active developer communities like botness, and great partners like Slack and Kik, we can create a great ecosystem of cross-platform cards.
-
-## Roadmap
-
-You can see our [current (non-final) roadmap here](https://portal.productboard.com/adaptivecards/1-adaptive-cards-portal/tabs/1-backlog). Note that anything on here is subject to change, and is not a guarantee of shipping.
+# Roadmap
+Check out our [current roadmap here](https://aka.ms/acroadmap).
 
 ## Future ideas
-
-The following are some future ideas we have, which are simply in the brainstorm stage. If you're interested in any of these, let us know in a comment.
-
-### Great looking Cards from Data
-
-We know many card authors already have well-defined data behind their cards. Our plan is to explore a templating model that would allow cards to be generated (server side or client side) based on the data and a repository of well-defined and customizable templates.
-
-### Make cards responsive
-
-Card layouts should be reactive to available space. Adaptive cards are adaptable to different devices, ux styles and and ui frameworks, but they are not reactive yet. Additional properties must be defined on elements which allow card producers to provide the necessary hints to the rendering libraries so that they can intelligently change the layout in a way which maintains the intent of the card.
-
-### Responsive exploration
-
-* Add an **importance** property which annotates importance of content. Less important content can be dropped to fit available space
-* Add **constraints** and **policy** properties describing how to react when constraints can't be met. 
-  * Hide content or collapse content to smaller size.
-  * Add a threshold that, when exceeded, changes `columnSet` to carousel of columns.
-
-### New element types
-
-* Maps? - embed a map into a card with interactivity or fallback to bitmap
-* *What elements do you want or need*?
-
-### New rendering libraries
-
-* React?
-* Xamarin?
-* *What frameworks do you want?*
+Do you have something you would like to see implemented in future versions of AdaptiveCards or want to have your voice heard? 
+Check out our [planned explorations](https://portal.productboard.com/adaptivecards/1-adaptive-cards-features/tabs/4-under-consideration) or otherwise [submit an idea](https://portal.productboard.com/adaptivecards/1-adaptive-cards-features/tabs/6-planned/submit-idea)!
diff --git a/AdaptiveCards/resources/partners.md b/AdaptiveCards/resources/partners.md
@@ -6,7 +6,7 @@ ms.date: 9/24/2018
 ms.topic: article
 ---
 
-# Partners 
+# Partners
 
 Adaptive Cards are most useful when they benefit a broad range of developers. Our vision is to create a shared ecosystem where developers can write and share content across multiple platforms. Our goal is to work in cooperation with communities and companies to build out this vision and develop a universal card exchange framework.
 
@@ -16,7 +16,8 @@ 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.6 (Web Chat 4.9.2)
+
+[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.11.0)
 [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/sdk/rendering-cards/android/getting-started.md b/AdaptiveCards/sdk/rendering-cards/android/getting-started.md
@@ -14,7 +14,7 @@ This is a renderer which targets Android native controls.
 
 [![Maven Central](https://img.shields.io/maven-central/v/io.adaptivecards/adaptivecards-android.svg)](https://search.maven.org/#search%7Cga%7C1%7Ca%3A%22adaptivecards-android%22)
 
-You can find the published packages ![here](https://search.maven.org/search?q=g:io.adaptivecards)
+You can find the published packages [here](https://search.maven.org/artifact/io.adaptivecards/adaptivecards-android)
 
 To include library to your project you must include this line into your project gradle.build under the dependencies section
 

diff --git a/AdaptiveCards/sdk/rendering-cards/javascript/extensibility.md b/AdaptiveCards/sdk/rendering-cards/javascript/extensibility.md
@@ -172,6 +172,261 @@ card.parse(
 );
 ```
 
+### Custom inputs
+An input is a special type of element dedicated to collecting data entered by the end user that can subsequently be passed as parameter to actions.
+
+Versions 2.x of the Adaptive Cards JS SDK introduces two notable changes when it comes to inputs:
+- **Input validation:** there is now a built-in input validation mechanism that automatically handles validation errors including visual cues
+- **Accessibility improvements:** built-in inputs have better support for accessibility features
+
+Because of this, implementing custom inputs requires a little more logic than implementing simple elements. The table below lists all the methods a custom input implementation should to implement in order to partiocipate in the input validation mechanism and be accessible:
+
+| Method | Description |
+| --------- | ------------- |
+| `protected updateInputControlAriaLabelledBy()` | This method  is called during the input validation sequence. When an input fails validation, its associated error message is displayed and the underlying input control's `aria-labelledby` attribute needs to be updated in order for the input to comply with accessibility requirements. Custom inputs SHOULD override `updateInputControlAriaLabelledBy` to apply the appropriate `aria-labelledby` attribute to the underlying input control. The `getAllLabelIds(): string[]` method can be used to retrieve the Ids of all the labels that should be specified in the `aria-labelledby` attribute.  |
+| `protected internalRender(): HTMLElement` | Just like for any other Adaptive Card custom element, `internalRender` MUST be overridden to render your input as desired. This is where you'll want to create the actual underlying input control. |
+| `protected get isNullable(): boolean` | Indicates whether the input supports undefined values (for instance, Input.Text does, whereas Input.Toggle doesn't.) Custom inputs SHOULD override this property getter to indicate if they support undefined values. The base implementation returns `true`. |
+| `public focus()` | When validation errors are encountered, the focus is automatically placed on the first input that failed validation. The base implementation of `focus` will in some cases just work for custom inputs. When that isn't the case, custom input controls MUST override `focus` to explicitly put the focus on the underlying input control.  |
+| `public abstract isSet(): boolean` | Indicates whether the input's value has been set by the user. This method is called during the input validation sequence to determine if the input passes or fails validation. Custom inputs MUST override `isSet` in order to participate in the input validation mechanism. |
+| `public isValid(): boolean` | Indicates whether the value of the input is valid. This method is called during the input validation sequence to determine if the input passes or fails validation. Custom inputs SHOULD override `isValid` in order to participate in the input validation mechanism. The base implementation returns `true`. |
+| `public abstract get value(): any` | Returns the value of the input. Custom inputs MUST override this so that the value of the input is retrieved from the underlying input control. |
+
+
+### 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
+
+### 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 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.