Skip to content

Commit

Permalink
Merge pull request #84 from microsoft/Nava_samplecode
Browse files Browse the repository at this point in the history
Adding new components
  • Loading branch information
Nkrb authored Jan 22, 2020
2 parents 1c63906 + 9bc3440 commit 9ec9b22
Show file tree
Hide file tree
Showing 156 changed files with 8,804 additions and 22 deletions.
35 changes: 13 additions & 22 deletions component-framework/IncrementControl/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,27 @@ languages:
products:
- powerapps
page_type: sample
description: "Sample that shows how to create an increment component using PowerApps component framework."
description: "Sample that shows how to create an increment component using Power Apps component framework."
---

# PowerApps component framework: Implementing increment component
# Power Apps component framework: Implementing increment component

This sample component shows how to bind data with PowerApps component framework and error handling.
This sample component shows how to bind data with Power Apps component framework and error handling.

## Prerequisites
## Before you can try the sample components

To try the sample components, you must first:

1. Install [Npm](https://www.npmjs.com/get-npm) (comes with Node.js) or [Node.js](https://nodejs.org/en/) (comes with npm). We recommend LTS (Long Term Support) version 10.15.3 LTS because it seems to be the most stable.

1. Install [.NET Framework 4.6.2 Developer Pack](https://dotnet.microsoft.com/download/dotnet-framework/net462).

1. If you don’t already have Visual Studio 2017 or later, follow one of these options:
- Option 1: Install [Visual Studio 2017](https://docs.microsoft.com/visualstudio/install/install-visual-studio?view=vs-2017) or later.
- Option 2: Install [.NET Core 2.2 SDK](https://dotnet.microsoft.com/download/dotnet-core/2.2) and then install [Visual Studio Code](https://code.visualstudio.com/Download).
- Option 2: Install [.NET Core 3.1 SDK](https://dotnet.microsoft.com/download/dotnet-core/3.1) and then install [Visual Studio Code](https://code.visualstudio.com/Download).

1. Install [Microsoft PowerApps CLI](https://aka.ms/PowerAppsCLI).
1. Install [Microsoft Power Apps CLI](https://aka.ms/PowerAppsCLI).
1. [Download](https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework) the sample components so that you have a local copy.

## What this sample does

Expand All @@ -33,22 +36,10 @@ If the value in the text box is a valid integer, then it updates the value to th

## How to run the sample

1. Download or clone the repo so that you have a local copy.
2. Go into the directory where you have downloaded the folder.
3. Go into the sample component folder, which you want to see it in runtime (for example, Increment component).
4. Run the command `npm install` to get all the required dependencies.
5. Create a new folder using the command `mkdir <folder name>` inside the sample component folder (for example, Increment component) and navigate into the folder using the command `cd <folder name>`.
6. Create a new solution project inside the folder using the command `pac solution init --publisher-name <Name of the publisher> --publisher-prefix <Publisher prefix>`.
7. Once the new solution project is created, you need to refer to the location where the sample component is located. You can add the reference using the command `pac solution add-reference --path <Path to the root of the sample component>`.
8. To generate a zip file from your solution project, you need to `cd` into your solution project directory and build the project using the command `msbuild /t:restore`.
9. Again, run the command `msbuild`.
10. The generated solution zip file is located in the `Solution\bin\debug` folder.
11. Manually [import the solution into Common Data Service](https://docs.microsoft.com/en-us/dynamics365/customer-engagement/customize/import-update-upgrade-solution) using the web portal once the zip file is ready or see the [Authenticating to your organization](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls#authenticating-to-your-organization) and [Deployment](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls#deploying-code-components) sections to import using PowerApps CLI commands.
12. To add code components to model-driven apps and canvas apps, see topics [Add components to model-driven apps](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/add-custom-controls-to-a-field-or-entity) and [Add components to canvas apps](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/component-framework-for-canvas-apps#add-components-to-a-canvas-app)

See [How to run the sample components](https://github.com/microsoft/PowerApps-Samples/blob/master/component-framework/README.md) for more information about how to build and import components into Common Data Service.

## See also

[PowerApps component framework overview](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/overview)<br/>
[PowerApps component framework API reference](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/)<br/>
[PowerApps component framework manifest schema reference](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/)
[Power Apps component framework overview](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/overview)<br/>
[Power Apps component framework API reference](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/)<br/>
[Power Apps component framework manifest schema reference](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/)
10 changes: 10 additions & 0 deletions component-framework/JS_AngularJSFlipControl/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules

# generated directory
**/generated

# output directory
/out
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="SampleNamespace" constructor="JSAngularJSFlipControl" version="1.1.0" display-name-key="JS_AngularJSFlipControl_Display_Key" description-key="JS_AngularJSFlipControl_Desc_Key" control-type="standard">
<property name="flipModel" display-name-key="flipModel_Display_Key" description-key="flipModel_Desc_Key" of-type="TwoOptions" usage="bound" required="true" />
<resources>
<code path="index.ts" order="1" />
<css path="css/JS_AngularJSFlipControl.css" order="2" />
<resx version="1.0.0" path="strings/JS_AngularJSFlipControl.1033.resx"/>
</resources>
</control>
</manifest>
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
/*
Third Party Notices
This file is based on or incorporates material from the projects listed below (Third Party IP). The original copyright notice and the license under which Microsoft received such Third Party IP, are set forth below. Such licenses and notices are provided for informational purposes only. Microsoft licenses the Third Party IP to you under the licensing terms for the Microsoft product. Microsoft reserves all other rights not expressly granted under this agreement, whether by implication, estoppel or otherwise.
Bootstrap v3.3.7 - Copyright (c) 2011-2016 Twitter, Inc.
Provided for Informational Purposes Only
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the Software), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/* Below CSS are based on Boostrap v3.3.7 */
.SampleNamespace\.JSAngularJSFlipControl pre {
display : block;
padding : 9.5px;
margin : 0 0 10px;
font-size : 13px;
line-height : 1.42857143;
color : #333;
word-break : break-all;
word-wrap : break-word;
background-color : #f5f5f5;
border : 1px solid #ccc;
border-radius : 4px
}
.SampleNamespace\.JSAngularJSFlipControl pre {
font-family : Menlo,
Monaco,
Consolas,
"Courier New",
monospace
}
.SampleNamespace\.JSAngularJSFlipControl pre {
overflow : auto
}
.SampleNamespace\.JSAngularJSFlipControl .btn-primary {
color : #fff;
background-color : #337ab7;
border-color : #2e6da4
}
.SampleNamespace\.JSAngularJSFlipControl .btn-primary.focus, .SampleNamespace\.JSAngularJSFlipControl .btn-primary:focus {
color : #fff;
background-color : #286090;
border-color : #122b40
}
.SampleNamespace\.JSAngularJSFlipControl .btn-primary:hover {
color : #fff;
background-color : #286090;
border-color : #204d74
}
.SampleNamespace\.JSAngularJSFlipControl .btn-primary.active, .SampleNamespace\.JSAngularJSFlipControl .btn-primary:active, .open > .dropdown-toggle.btn-primary {
color : #fff;
background-color : #286090;
border-color : #204d74
}
.SampleNamespace\.JSAngularJSFlipControl .btn-primary.active.focus, .SampleNamespace\.JSAngularJSFlipControl .btn-primary.active:focus, .SampleNamespace\.JSAngularJSFlipControl .btn-primary.active:hover, .SampleNamespace\.JSAngularJSFlipControl .btn-primary:active.focus, .SampleNamespace\.JSAngularJSFlipControl .btn-primary:active:focus, .SampleNamespace\.JSAngularJSFlipControl .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
color : #fff;
background-color : #204d74;
border-color : #122b40
}
.SampleNamespace\.JSAngularJSFlipControl .btn-primary.active, .SampleNamespace\.JSAngularJSFlipControl .btn-primary:active, .open > .dropdown-toggle.btn-primary {
background-image : none
}
.SampleNamespace\.JSAngularJSFlipControl .btn-primary.disabled.focus, .SampleNamespace\.JSAngularJSFlipControl .btn-primary.disabled:focus, .SampleNamespace\.JSAngularJSFlipControl .btn-primary.disabled:hover, .SampleNamespace\.JSAngularJSFlipControl .btn-primary[disabled].focus, .SampleNamespace\.JSAngularJSFlipControl .btn-primary[disabled]:focus, .SampleNamespace\.JSAngularJSFlipControl .btn-primary[disabled]:hover, fieldset[disabled].btn-primary.focus, fieldset[disabled].btn-primary:focus, fieldset[disabled].btn-primary:hover {
background-color : #337ab7;
border-color : #2e6da4
}
.SampleNamespace\.JSAngularJSFlipControl .btn-primary.badge {
color : #337ab7;
background-color : #fff
}
.SampleNamespace\.JSAngularJSFlipControl .btn {
display : inline-block;
padding : 6px 12px;
margin-bottom : 0;
font-size : 14px;
font-weight : 400;
line-height : 1.42857143;
text-align : center;
white-space : nowrap;
vertical-align : middle;
-ms-touch-action : manipulation;
touch-action : manipulation;
cursor : pointer;
-webkit-user-select : none;
-moz-user-select : none;
-ms-user-select : none;
user-select : none;
background-image : none;
border : 1px solid transparent;
border-radius : 4px
}
Loading

0 comments on commit 9ec9b22

Please sign in to comment.