根据官方文档使用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 是折叠全部 ...
随机推荐
- mysql全量备份与增量备份
mysql全量备份与增量备份 1.全量备份 全量备份就是把数据库中所有的数据进行备份. 备份所有库: mysqldump -uroot -p456 -S /data/3306/mysql.sock ...
- Docker的4种网络模式详细介绍
docker run创建Docker容器时,可以用–net选项指定容器的网络模式,Docker有以下4种网络模式: bridge模式:使用–net =bridge指定: host模式:使用–net = ...
- mysql学习笔记-底层原理详解
前言 我相信每一个程序员都避免不了和数据库打交道,其中Mysql以其轻量.开源成为当下最流行的关系型数据库.Mysql5.0以前以MyISAM作为默认存储引擎,在5.5版本以后,以InnoDB作为默认 ...
- Java基础-成员变量与局部变量
Java基础-成员变量与局部变量 1.什么是成员变量与局部变量? public class Student { String name; int high; public void stu ...
- 说一下linux启动过程boot流程
linux启动过程 https://www.ibm.com/developerworks/cn/linux/l-linuxboot/index.html http://www.ruanyifeng.c ...
- python爬取网络中的QQ号码
import urllib.request import ssl import re import os #博客地址:https://blog.csdn.net/qq_36374896 def wri ...
- 手把手带你使用ZigBee——通过爱智控制EFR32,以及 Simplicity Studio 使用过程中注意事项
前言 兄弟们,我发现一个有意思的东西,我在爱智官网翻资料的时候,发现他们终于终于把官网文档的索引优化了!有一说一,真是方便不少,终于不再是一堆文档糊在一坨了. 另外我还发现他们居然做了一个EFR32的 ...
- Skye无人机刷Betaflight详细图文教程
前言 首先十分感谢B站TASKBL up主的视频教程以及他的耐心指导,视频链接Skye 原机主板刷BetaFlight 参考教程_哔哩哔哩_bilibili.整个改造过程耗时三天,现把改造过程以及遇 ...
- LCT板子
粘板子: #include<cstdio> #include<cstring> #include<algorithm> using namespace std; c ...
- Mybatis框架基础入门(六)--动态sql
主要是通过mybatis提供的各种标签方法实现动态拼接sql. 1.if标签 <!-- 根据条件查询用户 --> <select id="queryUserByWhere& ...