Adding samples

Author: Nkrb

powerapps-docs/developer/component-framework/create-custom-controls-using-pcf.md

@@ -15,23 +15,24 @@ ms.assetid: d2cbf58a-9112-45c2-b823-2c07a310714c
 
 # Create and build a code component
 
-This topic explains how to create and deploy code components using PowerApps CLI. Ensure that you have installed [Microsoft PowerApps CLI](https://aka.ms/PowerAppsCLI).
+This topic demonstrates how to create and deploy code components using PowerApps CLI. Ensure that you have installed [Microsoft PowerApps CLI](https://aka.ms/PowerAppsCLI).
 
 ## Create a new component
 
 To begin, open **Developer Command Prompt for VS 2017** after installing PowerApps CLI.
 
-1. In the Developer Command Prompt for VS 2017, create a new folder on your local machine—for example, *C:\Users\your name\Documents\My_PCF_Component* using the command `mkdir <Specify the folder name>`.
+1. In the Developer Command Prompt for VS 2017, create a new folder on your local machine, for example, *C:\Users\your name\Documents\My_PCF_Component* using the command `mkdir <Specify the folder name>`.
 2. Go to the newly created folder using the command `cd <specify your new folder path>`.
-3. Run the following command to create a new component project by passing some basic parameters:
+3. Create a new component project by passing some basic parameters using the command:
 
-    `pac pcf init --namespace <specify your namespace here> --name <put component name here> --template <component type>`
+    `pac pcf init --namespace <specify your namespace here> --name <Name of the code component> --template <component type>`
 
    > [!NOTE]
-   > Currently, PowerApps CLI supports two types of components: **field** and **dataset**.  For canvas apps, only the **field** type is supported for this experimental preview.
+   > Currently, PowerApps CLI supports two types of components: **field** and **dataset** for model-driven apps.  For canvas apps, only the **field** type is supported for this experimental preview.
 
 4. To retrieve all the required project dependencies, run the command `npm install`.
-5. Open your project folder `C:\Users\<your name>\Documents\<My_PCF_Component>` in any developer environment of your choice and get started with your code component development. The quickest way to get started is by running `code .` from your command prompt once you are in the `C:\Users\<your name>\Documents\<My_PCF_Component>` directory. This command opens your component project in Visual Studio Code.
+5. Open your project folder `C:\Users\<your name>\Documents\<My_code_Component>` in any developer environment of your choice and get started with your code component development. The quickest way to get started is by running `code .` from your command prompt once you are in the `C:\Users\<your name>\Documents\<My_code_Component>` directory. This command opens your component project in Visual Studio Code.
+6. Implement the required artifacts for the component like manifest, component logic and styling and then build the component project. More information: [Implementing sample component](implementing-controls-using-typescript.md)
 
 ## Build your component
 

powerapps-docs/developer/component-framework/implementing-controls-using-typescript.md

@@ -12,7 +12,14 @@ author: Nkrb
 
 # Implement components using TypeScript
 
-This tutorial walks you through the process of creating a new code component in TypeScript. The sample component is a linear input component that enables users to enter numeric values using a visual slider instead of typing the values in the field. 
+This topic walks you through the process of creating a new code component in TypeScript using the PowerApps CLI. In this tutorial we will build a sample linear code component that enables users to change the numeric values using a visual slider instead of typing the values in the field. 
+
+The artifacts that are required to build code components are:
+
+1. [Create a new component project](#creating-a-new-component-project)
+2. [Implementing manifest](#implementing-manifest)
+3. [Implement component logic using TypeScript](#implementing-component-logic)
+4. [Add style to the code components](#adding-style-to-the-code-component)
 
 ## Creating a new component project
 
@@ -24,26 +31,28 @@ To create a new project:
     mkdir LinearComponent
     ```
 
-1. Go into the new directory using the command `cd LinearComponent`. 
+1. Go into the component folder using the command `cd LinearComponent`. 
 
-1. Run the following command to create a new component project passing basic parameters.
+1. Create a new component project by passing basic parameters using the command.
 
    ```CLI
     pac pcf init --namespace SampleNamespace --name TSLinearInputComponent --template field
     ``` 
 
 1. Install the project build tools using the command `npm install`. 
-2. Open your project folder `C:\Users\<your name>\Documents\<My_PCF_Component>` in a developer environment of your choice and get started with your code component development. The quickest way to start is by running `code .` from the command prompt once you are in the `C:\Users\<your name>\Documents\<My_PCF_Component>` directory. This command opens your component project in Visual Studio Code.
+1. Open your project folder `C:\Users\<your name>\Documents\<My_code_Component>` in a developer environment of your choice and get started with your code component development. The quickest way to start is by running `code .` from the command prompt once you are in the `C:\Users\<your name>\Documents\<My_code_Component>` directory. This command opens your component project in Visual Studio Code.
 
 ## Implementing manifest
 
-Manifest is an XML file that contains the metadata of the code component. It also defines the behavior of the code component. In this tutorial, this manifest file is created under the `<Your component Name>` subfolder. When you open the `ControlManifest.Input.xml` file in Visual Studio Code, you'll notice that the manifest file is predefined with some properties. Make changes to the predefined manifest file, as shown here:
+Manifest is an XML file that contains the metadata of the code component. It also defines the behavior of the code component. In this tutorial, this manifest file is created under the `<Your component Name>` subfolder. When you open the `ControlManifest.Input.xml` file in Visual Studio Code, you'll notice that the manifest file is predefined with some properties. More information: [Manifest](reference/manifest-schema-reference/manifest.md).
+
+Make changes to the predefined manifest file, as shown here:
 
 1. The [control](manifest-schema-reference/control.md) node defines the namespace, version, and display name of the code component. Now, define each property of the [control](manifest-schema-reference/control.md) node as shown here:
 
    - **namespace**: Namespace of the code component. 
    - **Constructor**: Constructor of the code component.
-   - **Version**: Version of the component. Whenever you update the component, you need to update the version to see the changes in the runtime.
+   - **Version**: Version of the component. Whenever you update the component, you need to update the version to see the latest changes in the runtime.
    - **display-name-key**: Name of the code component that is displayed on the UI.
    - **description-name-key**: Description of the code component that is displayed on the UI.
    - **control-type**: The code component type. Only *standard* type of code components are supported.
@@ -54,7 +63,7 @@ Manifest is an XML file that contains the metadata of the code component. It als
       <control namespace="SampleNameSpace" constructor="TSLinearInputComponent" version="1.0.0" display-name-key="Linear Input Component" description-key="Allows you to enter the numeric values using the visual slider." control-type="standard">
      ```
 
-2. The [property](manifest-schema-reference/property.md) node defines the properties of the code component like defining the data type of field. The property node is specified as the child element under the control element. Define the [property](manifest-schema-reference/property.md) node as shown here:
+2. The [property](manifest-schema-reference/property.md) node defines the properties of the code component like defining the data type of field. The property node is specified as the child element under the `control` element. Define the [property](manifest-schema-reference/property.md) node as shown here:
 
    - **name**: Name of the property.
    - **display-name-key**: Display name of the property that is displayed on the UI.
@@ -66,7 +75,7 @@ Manifest is an XML file that contains the metadata of the code component. It als
      ```XML
       <property name="sliderValue" display-name-key="sliderValue_Display_Key" description-key="sliderValue_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
       ```
-3. The [resources](manifest-schema-reference/resources.md) node defines the visualization of the code component. It contains all the resources that make up the code component. The [code](manifest-schema-reference/code.md) is specified as a child element under the resources element. Define the [resources](manifest-schema-reference/resources.md) as shown here:
+3. The [resources](manifest-schema-reference/resources.md) node defines the visualization of the code component. It contains all the resources that build the visualization and styling of the code component. The [code](manifest-schema-reference/code.md) is specified as a child element under the resources element. Define the [resources](manifest-schema-reference/resources.md) as shown here:
 
    - **code**: Refers to the path where all the resource files are located.
 
@@ -105,7 +114,7 @@ Manifest is an XML file that contains the metadata of the code component. It als
 
 ## Implementing component logic
 
-The next step after implementing the manifest file is to implement the component logic using TypeScript. The component logic should be implemented inside the `index.ts` file. When you open the `index.ts` file in the Visual Studio Code, you notice that the four essential classes are predefined. Now, let's implement the logic for the code component. 
+The next step after implementing the manifest file is to implement the component logic using TypeScript. The component logic should be implemented inside the `index.ts` file. When you open the `index.ts` file in the Visual Studio Code, you'll notice that the four essential classes are predefined. Now, let's implement the logic for the code component. 
 
 1. Open the `index.ts` file in the code editor of your choice.
 2. Update the `TSLinearInputComponent` class with the following code:

powerapps-docs/developer/component-framework/overview.md

@@ -16,9 +16,9 @@ ms.author: nabuthuk
 
 # PowerApps component framework overview
 
-Use PowerApps component framework to create code components for model-driven apps and canvas apps (experimental preview) to provide an enhanced user experience for the users to view and work with data in forms, views, and dashboards. For example:
+PowerApps component framework empowers professional developers and app makers to create code components for model-driven apps and canvas apps (experimental preview) to provide an enhanced user experience for the users to view and work with data in forms, views, and dashboards. For example:
 
-- Replace a field that displays a numeric text value with a `dial` or `slider` component.
+- Replace a field that displays a numeric text value with a `dial` or `slider` code component.
 - Transform a list into an entirely different visual experience bound to the data set like a `Calendar` or `Map`.
 
 > [!IMPORTANT]
@@ -28,11 +28,10 @@ Use PowerApps component framework to create code components for model-driven app
 > - Canvas apps only support the *field* type of code components, and not the *dataset* type.
 
 
-PowerApps component framework enables professional developers and app makers to create code components that can be used across the full breadth of PowerApps capabilities. Unlike HTML web resources, code components are rendered as a part of the same context, load at the same time as any other components, providing a seamless experience for the users. Developers can bundle all the HTML, CSS, and TypeScript or JavaScript files into a single solution package file. Code components can be reused many times across different entities and forms.
+Use PowerApps component framework to create code components that can be used across the full breadth of PowerApps capabilities. Unlike HTML web resources, code components are rendered as a part of the same context, load at the same time as any other components, providing a seamless experience for the users. Developers can bundle all the HTML, CSS, and TypeScript or JavaScript files into a single solution package file. Code components can be reused many times across different entities and forms.
 
 Code components have access to a rich set of framework APIs that expose capabilities like component lifecycle management, contextual data and metadata access, seamless server access via Web API, utility and data formatting methods, device features like camera, ___location and microphone, along with easy-to-invoke UX elements like dialogs, lookups, and full-page rendering.  
 
-
 Developers and app makers can use modern web practices and also harness the power of external libraries to create advanced user interactions. The framework automatically handles the component lifecycle, retains application business logic, and optimizes for performance (no more async IFrames). Component definition, dependencies, and configurations can all be packaged into a [solution](https://docs.microsoft.com/dynamics365/customer-engagement/customize/solutions-overview) and moved across environments and can be shipped via [AppSource](https://appsource.microsoft.com/en-us/marketplace/apps?page=1&product=dynamics-365).  
 
 ## Related topics

powerapps-docs/developer/component-framework/reference/client.md

@@ -38,9 +38,27 @@ Disables the scrolling capabilities for the components.
 |Method | Description |Available for|
 | ------------- |-------------|------|
 |[getClient](client/getclient.md)|[!INCLUDE [getclient-description](client/includes/getclient-description.md)]|Model-driven apps and canvas apps (experimental preview)|
-|[getFormFactor](client/getformfactor.md)|[!INCLUDE [getformfactor-description](client/includes/getformfactor-description.md)]|Model-driven apps and canvas apps(experimental preview)|
+|[getFormFactor](client/getformfactor.md)|[!INCLUDE [getformfactor-description](client/includes/getformfactor-description.md)]|Model-driven apps and canvas apps (experimental preview)|
 |[isOffline](client/isoffline.md)|[!INCLUDE [isoffline-description](client/includes/isoffline-description.md)]|Model-driven apps|
 
+## Example 
+
+```TypeScript
+private createHTMLTableElement(): HTMLTableElement {
+    let tableElement: HTMLTableElement = document.createElement("table");
+    tableElement.setAttribute("class", "SampleControlHtmlTable_HtmlTable");
+    let key: string = "Example Method";
+    let value: string = "Result";
+    tableElement.appendChild(this.createHTMLTableRowElement(key, value, true));
+    key = "getFormFactor()";
+    value = String(this._context.client.getFormFactor());
+    tableElement.appendChild(this.createHTMLTableRowElement(key, value, false));
+    key = "getClient()";
+    value = String(this._context.client.getClient());
+    tableElement.appendChild(this.createHTMLTableRowElement(key, value, false));
+}
+```
+
 ### Related topics
 
 [PowerApps component framework API reference](../reference/index.md)<br/>

powerapps-docs/developer/component-framework/reference/control/includes/init-description.md

@@ -12,4 +12,4 @@ ms.topic: "article"
 ms.assetid: 73788966-b83c-4797-8062-8b12bf8409eb
 ---
 
-Used to initialize the component instance. Components can kick off remote server calls and other initialization actions. Dataset values cannot be initialized here, use the [updateView](../updateview.md) method to achieve that.
+Used to initialize the component instance. Components can kick off remote server calls and other initialization actions. Data-set values cannot be initialized here, use the [updateView](../updateview.md) method to achieve that.

powerapps-docs/developer/component-framework/reference/dataset/includes/gettitle-description.md

@@ -15,4 +15,4 @@ applies_to:
 ms.assetid: 00304b7b-63f8-4f37-9294-8d2c08c53704
 ---
 
-Retrieves the view display name used by the dataset property.
+Retrieves the view display name used by the data-set property.

powerapps-docs/developer/component-framework/reference/dataset/includes/getviewid-description.md

@@ -15,4 +15,4 @@ applies_to:
 ms.assetid: df189d10-3fce-48a4-a79b-f1c3b041deb4
 ---
 
-Returns the Id of view used by dataset parameter.
+Returns the Id of view used by data-set parameter.

powerapps-docs/developer/component-framework/reference/dataset/includes/opendatasetitem-description.md

@@ -15,4 +15,4 @@ applies_to:
 ms.assetid: 256b0604-59cf-4787-a345-1daecbe85fe1
 ---
 
-Open dataset item for a given Entityreference. It checks if there is a command with command button id `Mscrm.OpenRecordItem`. If there is, it executes the command, otherwise it just navigates to the associated form of the Entityreference.
+Open data-set item for a given EntityReference. It checks if there is a command with command button id `Mscrm.OpenRecordItem`. If exists, it executes the command, otherwise it just navigates to the associated form of the EntityReference.

powerapps-docs/developer/component-framework/reference/dataset/includes/refresh-description.md

@@ -15,4 +15,4 @@ applies_to:
 ms.assetid: cf19b0b2-4da5-47c7-9c4c-24de9969bdf2
 ---
 
-Refreshes the dataset based on filters, sorting, linking, new column.
+Refreshes the data-set based on filters, sorting, linking, new column.

powerapps-docs/developer/component-framework/reference/dataset/includes/setselectedrecordids-description.md

@@ -15,4 +15,4 @@ applies_to:
 ms.assetid: 67867410-2147-47af-9d63-86b9560c2653
 ---
 
-Set the ids of the selected records
+Set the ids of the selected records.