根据官方文档使用Visual Studio Code创建代码组件的一些总结
1、安装组件Visual Studio Code
Download Visual Studio Code - Mac, Linux, Windows
2、安装Node.js
Download | Node.js (nodejs.org)
3、安装Microsoft Power Platform CLI可以在Visual Studio Code的扩展安装
Microsoft Power Platform CLI - Power Apps | Microsoft Docs
下载后会提示是否打开Visual Studio Code
在cmd中运行
创建名为“LinearInput”文件夹
mkdir LinearInput
在 Visual Studio Code 中打开文件夹。最快的启动方法是在项目目录中使用命令提示符,然后从命令提示符运行。此命令将在 Visual Studio Code 中打开组件项目。LinearInput
cd LinearInput
code 注:这段没看懂
所以直接在Visual Studio Code中
文件-->打开文件夹
也是一样
终端Running 'npm install' for you...需要先选择目录后再打开,确保是对一个目录的命令
在终端提示符下,通过使用该命令传递基本参数来创建新的组件项目。 pac pcf init --namespace SampleNamespace --name LinearInputControl --template field
会提示Running 'npm install' for you...
如果运行npm install报错或不成功可能因为没有安装Node.js
清单定义组件
namespace:代码组件的命名空间。 Constructor:代码组件的构造函数。 Version:组件的版本。每当更新组件时,都需要更新版本以查看运行时中的最新更改。 display-name-key:UI 上显示的代码组件的名称。 description-name-key:UI 上显示的代码组件的说明。 control-type:代码组件类型。仅支持标准类型的代码组件
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="SampleNamespace" constructor="LinearInputControl" version="1.1.0" display-name-key="LinearInputControl_Display_Key" description-key="LinearInputControl_Desc_Key" control-type="standard">
属性节点
name:属性的名称。 display-name-key:UI 上显示的属性的显示名称。 description-name-key:UI 上显示的属性的说明。 of-type-group:当您希望具有两个以上的数据类型列时,将使用 of-type-group。将 of-group 元素作为同级元素添加到清单中的元素。指定组件值,可以包含整数值、货币值、浮点值或十进制值。propertyof-type-group usage:具有两个属性:绑定和输入。绑定属性仅绑定到列的值。输入属性要么绑定到列,要么允许静态值。 required:定义属性是否为必需属性。
<property name="controlValue" display-name-key="controlValue_Display_Key" description-key="controlValue_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
代码:指所有资源文件所在的路径。
<resources>
<code path="index.ts" order="1" />
<css path="css/LinearInputControl.css" order="1" />
</resources>
如果写官方的示例的话可以直接直接将此ControlManifest.Input.xml文件写
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="SampleNamespace" constructor="LinearInputControl" version="1.1.0" display-name-key="LinearInputControl_Display_Key" description-key="LinearInputControl_Desc_Key" control-type="standard">
<type-group name="numbers">
<type>Whole.None</type>
<type>Currency</type>
<type>FP</type>
<type>Decimal</type>
</type-group>
<property name="controlValue" display-name-key="controlValue_Display_Key" description-key="controlValue_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
<resources>
<code path="index.ts" order="1" />
<css path="css/LinearInputControl.css" order="1" />
</resources>
</control>
</manifest>
修改index.ts文件会报一些错误但是可以忽略,可以继续执行,执行正常的话错误没有影响
import { IInputs, IOutputs } from "./generated/ManifestTypes"; export class LinearInputControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private _value: number;
private _notifyOutputChanged: () => void;
private labelElement: HTMLLabelElement;
private inputElement: HTMLInputElement;
private _container: HTMLDivElement;
private _context: ComponentFramework.Context<IInputs>;
private _refreshData: EventListenerOrEventListenerObject; public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void {
this._context = context;
this._container = document.createElement("div");
this._notifyOutputChanged = notifyOutputChanged;
this._refreshData = this.refreshData.bind(this); // creating HTML elements for the input type range and binding it to the function which refreshes the control data
this.inputElement = document.createElement("input");
this.inputElement.setAttribute("type", "range");
this.inputElement.addEventListener("input", this._refreshData); //setting the max and min values for the control.
this.inputElement.setAttribute("min", "1");
this.inputElement.setAttribute("max", "1000");
this.inputElement.setAttribute("class", "linearslider");
this.inputElement.setAttribute("id", "linearrangeinput"); // creating a HTML label element that shows the value that is set on the linear range control
this.labelElement = document.createElement("label");
this.labelElement.setAttribute("class", "LinearRangeLabel");
this.labelElement.setAttribute("id", "lrclabel"); // retrieving the latest value from the control and setting it to the HTMl elements.
this._value = context.parameters.controlValue.raw!;
this.inputElement.setAttribute("value", context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "0");
this.labelElement.innerHTML = context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "0"; // appending the HTML elements to the control's HTML container element.
this._container.appendChild(this.inputElement);
this._container.appendChild(this.labelElement);
container.appendChild(this._container);
} public refreshData(evt: Event): void {
this._value = (this.inputElement.value as any) as number;
this.labelElement.innerHTML = this.inputElement.value;
this._notifyOutputChanged();
} public updateView(context: ComponentFramework.Context<IInputs>): void {
// storing the latest context from the control.
this._value = context.parameters.controlValue.raw!;
this._context = context;
this.inputElement.setAttribute("value", context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "");
this.labelElement.innerHTML = context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "";
} public getOutputs(): IOutputs {
return {
controlValue: this._value
};
} public destroy(): void {
this.inputElement.removeEventListener("input", this._refreshData);
}
}
官方的
样式:
需要在根目录下创建一个css文件夹然后添加LinearInputControl.css
.SampleNamespace\.LinearInputControl input[type=range].linearslider {
margin: 1px 0;
background:transparent;
-webkit-appearance:none;
width:100%;padding:0;
height:24px;
-webkit-tap-highlight-color:transparent
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider:focus {
outline: none;
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-webkit-slider-runnable-track {
background: #666;
height:2px;
cursor:pointer
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-webkit-slider-thumb {
background: #666;
border:0 solid #f00;
height:24px;
width:10px;
border-radius:48px;
cursor:pointer;
opacity:1;
-webkit-appearance:none;
margin-top:-12px
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-moz-range-track {
background: #666;
height:2px;
cursor:pointer
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-moz-range-thumb {
background: #666;
border:0 solid #f00;
height:24px;
width:10px;
border-radius:48px;
cursor:pointer;
opacity:1;
-webkit-appearance:none;
margin-top:-12px
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-ms-track {
background: #666;
height:2px;
cursor:pointer
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-ms-thumb {
background: #666;
border:0 solid #f00;
height:24px;
width:10px;
border-radius:48px;
cursor:pointer;
opacity:1;
-webkit-appearance:none;
}
这个名字和xml里的相对应
<resources>
<code path="index.ts" order="1"/>
<css path="css/LinearInputControl.css" order="1"/>
</resources>
生成代码组件
npm run build
调试代码组件
npm start watch
打包:创建解决方案文件后生成压缩文件
在根目录下创建文件夹:Solutions
pac solution init --publisher-name Samples --publisher-prefix samples
此命令会在文件夹中创建解决方案的必要文件
创建完成后执行此命令 path..\:为根目录需要指向cdsproj文件目录
pac solution add-reference --path ..\
注:指向Solutions文件夹的话会显示找不到cdsproj的datavarse文件
可以在根目录中执行创建解决方案的命令
然后指向根目录
生成zip文件命令有两个
msbuild /t:restore
dotnet build
如果有.NET 5 SDK的话可以使用第二个
第一个我没有使用成功过
最后执行
msbuild
压缩包在bin--Debug下
然后在powerapp中导入解决方案,指向生成的压缩包就可以了
根据官方文档使用Visual Studio Code创建代码组件的一些总结的更多相关文章
- Visual Studio Code创建C#项目
Visual Studio Code是一个支持跨平台的文本编辑器,同其他文本文本编辑器一样,不但占用磁盘空间小,性能也比较快:近几年由于不断的升级和许多开发者提供大量的插件,它已经成为了一个非常强大的 ...
- 使用Visual Studio Code创建第一个ASP.NET Core应用程序
全文翻译自:Your First ASP.NET Core Application on a Mac Using Visual Studio Code 这篇文章将向你展示如何在Mac上写出你的第一个A ...
- visual studio code开发代码片段扩展插件
背景 visual studio code编辑器强大在于可以自己扩展插件,不仅可以去插件市场下载,也可以按照官方的API很方便的制作适合自己的插件: 自己最近在开发一个手机端网站项目,基于vant项目 ...
- 总结在Visual Studio Code创建Node.js+Express+handlebars项目
一.安装node.js环境. Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ 32 位安装包下载地址 : https://nodejs.org/d ...
- 【原创+译文】官方文档中声明的如何创建抽屉导航栏(Navigation Drawer)
如需转载请注明出处:http://www.cnblogs.com/ghylzwsb/p/5831759.html 创建一个抽屉导航栏 抽屉式导航栏是显示在屏幕的左边缘,它是应用程序的主导航选项面板.它 ...
- Visual Studio Code create the aps.net core project(Visual Studio Code 创建asp.net core项目)
Install the C# plug-in as shown below: Perfom the dotnet new --help command as shown below: Enter a ...
- Visual Studio Code python 代码快速自动提示
1.file --> setting->设置 搜索 python 或者auto_complete setting.json { "explorer.confirmDelete&q ...
- Visual Studio Code - 同步代码时使用 rebase
打开设置 设置"git.rebaseWhenSync": true
- Visual Studio Code 折叠代码快捷键
为了快速阅读不熟悉的代码, 最好可以打开一个文件能先将具体实现折叠起来的,进行一个大概的认识,vscode中有这些折叠快捷键: ctrl+shift+[是折叠 ctrl+k ctrl+0 是折叠全部 ...
随机推荐
- LGP4609题解
题意简单明确( 很容易知道最高的位置一定是左边能看到最高的和右边能看到最高的.于是我们考虑一个 dp: 设 \(dp[n][A][B]\) 表示长度为 \(n\) 的排列,左边有 \(A\) 个 ba ...
- 【面经】MyBatis常见面试问题
1.什么是 MyBatis? 答:MyBatis 是一个可以自定义 SQL.存储过程和高级映射的持久层框架. 2.讲下 MyBatis 的缓存 答:MyBatis 的缓存分为一级缓存和二级缓存,一级缓 ...
- Redhat7 安装 yum源(亲测有效)
由于之前安装Redhat7 想安装vsftpd 使用yum install vsftpd 报错: This system is not registered to Red Hat Subscri ...
- Linux-timedatectl使用
Linux下使用timedatectl命令时间时区操作详解 timedatectl命令对于RHEL / CentOS 7和基于Fedora 21+的分布式系统来说,是一个新工具,它作为systemd系 ...
- ZYNQ 双CPU裸机运行例程
vivado 2014.4 特殊情况:总DDR内存大于512MB,且CPU0已经占用了超过512MB,这时按以下步骤CPU1无法启动. 原因:启动入口地址限制.更改方法如下: 打开cpu1_bsp\p ...
- 6月19日 python学习总结 Django之路由系统
Django之路由系统 Django的路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调 ...
- 内网渗透----windows信息收集整理
一.基础信息收集 1.信息收集类型 操作系统版本.内核.架构 是否在虚拟化环境中,已安装的程序.补丁 网络配置及连接 防火墙设置 用户信息.历史纪录(浏览器.登陆密码) 共享信息.敏感文件.缓存信息. ...
- python 发送POST请求
#博客地址:https://blog.csdn.net/qq_36374896 import urllib.request import urllib.parse url = "http:/ ...
- bzoj4671 异或图(斯特林反演,线性基)
bzoj4671 异或图(斯特林反演,线性基) 祭奠天国的bzoj. 题解时间 首先考虑类似于容斥的东西. 设 $ f_{ i } $ 为至少有 $ i $ 个连通块的方案数, $ g_{ i } $ ...
- bzoj3926/luoguP3346 [Zjoi2015]诸神眷顾的幻想乡(trie上构建广义后缀自动机)
bzoj3926/luoguP3346 [Zjoi2015]诸神眷顾的幻想乡(trie上构建广义后缀自动机) bzoj Luogu 题解时间 给你个无根trie树(你管这叫trie树?),问你选取一条 ...