Compartir vía

Crear el primer componente

En este tutorial, creará un componente de código deslizante lineal que los usuarios pueden usar para cambiar los valores numéricos con un control deslizante visual en lugar de escribir los valores en la columna.

Entrada lineal en una aplicación basada en modelo.

Puede encontrar el código de ejemplo para el componente de código deslizante lineal completado en PowerApps-Samples/component-framework/LinearInputControl/.

Para crear un componente de código deslizante lineal, complete los pasos siguientes:

Requisitos previos

Para este tutorial, instale los siguientes componentes:

  1. Visual Studio Code (VSCode) ( Asegúrese de que la opción Agregar a PATH está seleccionada)
  2. Node.js (se recomienda la versión LTS)
  3. Microsoft Power Platform CLI (Usar Power Platform Tools para Visual Studio Code de Power Platform CLI para Windows)
  4. Instala las herramientas de compilación de .NET eligiendo una de las siguientes opciones. Como mínimo, seleccione la carga de trabajo .NET build tools:

Nota

Es posible que prefiera usar el SDK de .NET 6.x en lugar de las herramientas de compilación para Visual Studio. En este caso, en lugar de usar msbuild, use dotnet build.

Sugerencia

Instale Git para el control de código fuente.

Crear un nuevo proyecto de componente

En este tutorial, comience en una carpeta ubicada en C:\repos, pero puede usar cualquier carpeta que desee. Elija una carpeta donde desee registrar su código.

  1. Cree una nueva carpeta llamada LinearInput.

  2. Abra la LinearInput carpeta mediante Visual Studio Code.

    La forma más rápida de empezar es mediante una ventana de comandos. Vaya a la LinearInput carpeta y escriba code ..

    c:\repos\LinearInput>code .

    Este comando abre el proyecto de componente en Visual Studio Code.

  3. Abra un nuevo terminal dentro de Visual Studio Code mediante Terminal ->New Terminal.

  4. En el terminal, cree un nuevo proyecto de componente especificando parámetros básicos mediante el comando pac pcf init.

     pac pcf init --namespace SampleNamespace --name LinearInputControl --template field --run-npm-install

  5. El comando también ejecuta el npm install comando para configurar las herramientas de compilación del proyecto.

    Running 'npm install' for you...

    Nota

    Si recibe el error The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program., asegúrese de instalar node.js (se recomienda la versión LTS) y todos los demás requisitos previos.

Implementar el manifiesto

El manifiesto de control es un archivo XML que contiene los metadatos del componente de código. También define el comportamiento del componente de código. En este tutorial, creas este archivo manifiesto en la LinearInputControl subcarpeta. Al abrir el ControlManifest.Input.xml archivo en Visual Studio Code, verá que el archivo de manifiesto está predefinido con algunas propiedades. Para obtener más información, vea Manifiesto.

El nodo control define el espacio de nombres, la versión y el nombre para mostrar del componente de código.

Las herramientas generan el elemento control. Proporciona un buen punto de partida para el control.

Sugerencia

Puede encontrar el XML más fácil de leer si lo formatea para que los atributos aparezcan en líneas separadas. Busque e instale una herramienta de formato XML de su elección en Marketplace de Visual Studio Code: Buscar extensiones de formato XML.

Los ejemplos a continuación se han formateado con atributos en líneas separadas para que sean más fáciles de leer.

Attribute Descripción
namespace Espacio de nombres del componente del código.
constructor Constuctor del componente de código.
version Versión del componente. Siempre que actualice el componente, actualice la versión para ver los cambios más recientes en el entorno de ejecución.
display-name-key Nombre del componente de código que se muestra en la interfaz de usuario.
description-key Descripción del componente de código que se muestra en la interfaz de usuario.
control-type El tipo de componente de código. Este valor es un standard control .

Si omite las áreas comentadas y da formato al documento, verá el manifiesto que se generó automáticamente:

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="SampleNamespace"
   constructor="LinearInputControl"
   version="0.0.1"
   display-name-key="LinearInputControl"
   description-key="LinearInputControl description"
   control-type="standard">
   <external-service-usage enabled="false">
   </external-service-usage>
   <property name="sampleProperty"
      display-name-key="Property_Display_Key"
      description-key="Property_Desc_Key"
      of-type="SingleLine.Text"
      usage="bound"
      required="true" />
   <resources>
      <code path="index.ts"
         order="1" />
   </resources>
</control>
</manifest>

Desde este punto de partida, realice los siguientes cambios:

  1. Agregar elemento type-group
  2. Editar elemento de propiedad
  3. Editar elemento de recursos

Agregar elemento type-group

Agregue la definición de un elemento type-group llamado numbers en el elemento de control. Este elemento especifica el valor de componente y puede contener valores enteros, de divisa, punto flotante, o decimales.

Reemplace el external-service-usage elemento por el type-group elemento, ya que este control no usa la external-service-usage funcionalidad.

<control namespace="SampleNamespace"
   constructor="LinearInputControl"
   version="0.0.1"
   display-name-key="LinearInputControl"
   description-key="LinearInputControl description"
   control-type="standard">
   <external-service-usage enabled="false">
   </external-service-usage>
   <property name="sampleProperty"
      display-name-key="Property_Display_Key"
      description-key="Property_Desc_Key"
      of-type="SingleLine.Text"
      usage="bound"
      required="true" />
   <resources>
      <code path="index.ts"
         order="1" />
   </resources>
   </control>

Editar elemento de propiedad

Edite el elemento samplePropertypropiedad generado en el elemento control. Este elemento define las propiedades del componente de código, como el tipo de datos de la columna.

Atributo Descripción
name Nombre de la propiedad.
display-name-key Nombre para mostrar de la propiedad que aparece en la interfaz de usuario.
description-key Descripción de la propiedad que aparece en la interfaz de usuario.
of-type-group Use el of-type-group atributo para hacer referencia al nombre de un grupo de tipos específico. En este caso, consulte el type-group con nombre numbers que creó en el paso anterior.
usage Tiene dos propiedades, bound y input.

- Las propiedades vinculadas están vinculadas solo al valor de la columna.

- Las propiedades de entrada están vinculadas a una columna o permiten un valor estático.
required Define si la propiedad es obligatoria.

Edite el nodo de propiedad como se muestra en el código siguiente:

<property name="sampleProperty"
   display-name-key="Property_Display_Key"
   description-key="Property_Desc_Key"
   of-type="SingleLine.Text"
   usage="bound"
   required="true" />

Editar elemento recursos

El nodo resources define la visualización del componente de código. Contiene todos los recursos que crean la visualización y el diseño del componente de código. El código se especifica como elemento secundario bajo el elemento recursos.

El manifiesto generado ya incluye una definición del elemento de código con path y order valores de atributos establecidos. Use estos valores. En la siguiente sección Agregar estilo al componente de código , se agregan estilos CSS para el control . Para admitir ese paso, edite el manifiesto para agregarlo mientras lo tienes abierto.

Edite el nodo recursos para agregar el siguiente elemento de css:

<resources>
   <code path="index.ts"
   order="1" />
</resources>

Manifiesto completado

El archivo de manifiesto completado debe ser de este tipo:

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
   <control namespace="SampleNamespace"
      constructor="LinearInputControl"
      version="0.0.1"
      display-name-key="LinearInputControl"
      description-key="LinearInputControl description"
      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="Control Value"
         description-key="Control value description."
         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>

  1. Guarde los cambios en el archivo ControlManifest.Input.xml.

  2. Genere el archivo ManifestDesignTypes.d.ts mediante el siguiente comando.

    npm run refreshTypes

    Los resultados deberán tener un aspecto similar al siguiente:

    PS C:\repos\LinearInput> npm run refreshTypes

> pcf-project@1.0.0 refreshTypes
> pcf-scripts refreshTypes

[12:38:06 PM] [refreshTypes]  Initializing...
[12:38:06 PM] [refreshTypes]  Generating manifest types...
[12:38:06 PM] [refreshTypes]  Generating design types...
[12:38:06 PM] [refreshTypes]  Succeeded

  3. Para ver los resultados, abra el archivo C:\repos\LinearInput\LinearInputControl\generated\ManifestTypes.d.ts para ver los tipos generados:

    /*
*This is auto generated from the ControlManifest.Input.xml file
*/

// Define IInputs and IOutputs Type. They should match with ControlManifest.
export interface IInputs {
   controlValue: ComponentFramework.PropertyTypes.NumberProperty;
}
export interface IOutputs {
   controlValue?: number;
}

Implementar lógica del componente

Después de implementar el archivo de manifiesto, implemente la lógica del componente mediante TypeScript. Implemente la lógica del componente dentro del index.ts archivo. Al abrir el index.ts archivo en Visual Studio Code, verá que las cuatro funciones esenciales (init, updateView, getOutputs y destroy) están predefinidas. Ahora, implemente la lógica para el componente de código.

Abra el archivo index.ts en el editor de código de su elección y realice los siguientes cambios:

  1. Agregar propiedades para el control
  2. Agregar la función refreshData como controlador de eventos
  3. Actualice la función init
  4. Editar la función updateView
  5. Editar la función getOutputs
  6. Editar la función destroy

Agregar propiedades del control.

export class LinearInputControl
implements ComponentFramework.StandardControl<IInputs, IOutputs>
{
/**
   * Empty constructor.
*/
constructor() {}

Agregue la función refreshData como controlador de eventos

public refreshData(evt: Event): void {
   this._value = this.inputElement.value as any as number;
   this.labelElement.innerHTML = this.inputElement.value;
   this._notifyOutputChanged();
}

Actualice la función init

public init(
   context: ComponentFramework.Context<IInputs>,
   notifyOutputChanged: () => void,
   state: ComponentFramework.Dictionary,
   container: HTMLDivElement
   ): void {
      // Add control initialization code
   }

Edite la función updateView

public updateView(context: ComponentFramework.Context<IInputs>): void {
   // Add code to update control view
}

Edite la función getOutputs

public getOutputs(): IOutputs {
   return {};
}

Edite la función destroy

public destroy(): void {
   // Add code to cleanup control if necessary
   }
}

El archivo completo index.ts debería tener el siguiente aspecto:

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;
/**
   * Empty constructor.
*/
constructor() {}

/**
   * Used to initialize the control instance. Controls can kick off remote server calls 
      and other initialization actions here.
   * Data-set values are not initialized here, use updateView.
   * @param context The entire property bag available to control via Context Object; 
      It contains values as set up by the customizer mapped to property names defined 
      in the manifest, as well as utility functions.
   * @param notifyOutputChanged A callback method to alert the framework that the 
      control has new outputs ready to be retrieved asynchronously.
   * @param state A piece of data that persists in one session for a single user. 
      Can be set at any point in a controls life cycle by calling 'setControlState' 
      in the Mode interface.
   * @param container If a control is marked control-type='standard', it will receive 
      an empty div element within which it can render its content.
*/
public init(
   context: ComponentFramework.Context<IInputs>,
   notifyOutputChanged: () => void,
   state: ComponentFramework.Dictionary,
   container: HTMLDivElement
): void {
   // Add control initialization code
   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();
}

/**
   * Called when any value in the property bag has changed. This includes field values, 
      data-sets, global values such as container height and width, offline status, control 
      metadata values such as label, visible, etc.
   * @param context The entire property bag available to control via Context Object; 
      It contains values as set up by the customizer mapped to names defined in the manifest, 
      as well as utility functions
*/
public updateView(context: ComponentFramework.Context<IInputs>): void {
   // Add code to update control view
   // 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
      : "";
}

/**
   * It is called by the framework prior to a control receiving new data.
   * @returns an object based on nomenclature defined in manifest, 
      expecting object[s] for property marked as "bound" or "output"
*/
public getOutputs(): IOutputs {
   return {
      controlValue: this._value,
   };
}

/**
   * Called when the control is to be removed from the DOM tree. 
      Controls should use this call for cleanup.
   * i.e. cancelling any pending remote calls, removing listeners, etc.
*/
public destroy(): void {
   // Add code to cleanup control if necessary
   this.inputElement.removeEventListener("input", this._refreshData);
      }
}

Cuando haya terminado, guarde los cambios en el index.ts archivo.

Agregar estilo al componente de código

Los desarrolladores y creadores de aplicaciones pueden definir su estilo para representar sus componentes de código visualmente mediante CSS. CSS permite a los desarrolladores describir la presentación de componentes de código, incluidos el estilo, los colores, los diseños y las fuentes. El método init del componente de entrada lineal crea un elemento de entrada y establece el atributo de clase en linearslider. El estilo de la linearslider clase se define en un archivo CSS independiente. Puede incluir recursos de componentes adicionales como archivos CSS con el componente de código para admitir más personalizaciones.

Importante

Al implementar el estilo en los componentes de código mediante CSS, asegúrese de que el CSS esté limitado a su control utilizando las clases CSS generadas automáticamente que se aplican al elemento contenedor DIV de su componente.

Si su CSS tiene ámbito global, es probable que se rompa el estilo existente del formulario o la pantalla donde se representa el componente de código.

Si está utilizando un marco CSS de terceros, use una versión de ese marco que ya esté en un espacio de nombres o encapsule ese marco en un espacio de nombres manualmente, ya sea a mano o utilizando un preprocesador CSS.

  1. Cree una nueva subcarpeta css en la carpeta LinearInputControl.

  2. Cree un nuevo archivo LinearInputControl.css en la subcarpeta css.

  3. Agregue el siguiente contenido de estilo al archivo 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;
}

  4. Guarde el archivo LinearInputControl.css.

  5. Tenga en cuenta que el ControlManifest.Input.xml archivo ya incluye el css archivo de recursos dentro del elemento resources porque ese paso se completó en la sección Manifiesto de implementación anterior.

    <resources>
<code path="index.ts"
  order="1" />
<css path="css/LinearInputControl.css"
  order="1" />
</resources>

Nota

Power Apps component framework utiliza recursos web de RESX para administrar las cadenas localizadas que se muestran en cualquier interfaz de usuario. Los recursos para apoyar la localización también se registran en el nodo resources.

Este primer tutorial no incluye la funcionalidad de localización. La localización está incluida en otros tutoriales.

Para obtener información sobre cómo localizar componentes de código mediante resx recursos web, consulte el ejemplo de API de localización .

Crear sus componentes de código

Después de terminar de agregar el manifiesto, la lógica de componentes y el estilo, compile los componentes de código mediante el comando siguiente:

npm run build

La salida debe tener un aspecto similar al siguiente resultado:

> pcf-project@1.0.0 build
> pcf-scripts build

[2:05:41 PM] [build]  Initializing...
[2:05:41 PM] [build]  Validating manifest...
[2:05:41 PM] [build]  Validating control...
[2:05:42 PM] [build]  Running ESLint...
[2:05:43 PM] [build]  Generating manifest types...
[2:05:43 PM] [build]  Generating design types...
[2:05:43 PM] [build]  Compiling and bundling control...
[Webpack stats]:
asset bundle.js 6.56 KiB [emitted] (name: main)
./LinearInputControl/index.ts 4.9 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 2049 ms
[2:05:45 PM] [build]  Generating build outputs...
[2:05:45 PM] [build]  Succeeded
PS C:\repos\LinearInput\LinearInputcontrol>

La generación crea un archivo de declaración de tipo TypeScript actualizado en la carpeta LinearInputControl/generated. El componente se compila en la carpeta out/controls/LinearInputControl. Los artefactos de compilación incluyen:

  • bundle.js: código fuente del componente agrupado.
  • ControlManifest.xml: archivo de manifiesto de componente real que se carga en la organización de Microsoft Dataverse.

Nota

Las reglas eslint pueden afectar a la compilación, en función de cómo estén configuradas. Si recibe un error durante la compilación:

[12:58:30 PM] [build]  Failed:
[pcf-1065] [Error] ESLint validation error:
C:\project\LinearInput\LinearInputControl\index.ts
  10:26  error  'EventListenerOrEventListenerObject' is not defined  no-undef

Compruebe sus reglas de eslint en .eslintrc.json y configure las reglas de linting en ["warn"]. Por ejemplo, si recibe el error:

error 'EventListenerOrEventListenerObject' is not defined no-undef

A continuación, puede abrir .eslintrc.json y editará las reglas para agregar un valor ["warn"] para la regla no-undef:

    "rules": {
      "no-unused-vars": "off",
      "no-undef": ["warn"]
    }

Después de actualizar las reglas de eslint, su control debería construirse sin errores.

Depurar el componente de código

Cuando termine de implementar la lógica del componente de código, ejecute el siguiente comando para iniciar el proceso de depuración. Para obtener más información, consulte Depuración de componentes de código.

npm start watch

La salida debe tener un aspecto similar al siguiente resultado:

> pcf-project@1.0.0 start
> pcf-scripts start "watch"

[2:09:10 PM] [start] [watch] Initializing...
[2:09:10 PM] [start] [watch] Validating manifest...
[2:09:10 PM] [start] [watch] Validating control...
[2:09:11 PM] [start] [watch] Generating manifest types...
[2:09:11 PM] [start] [watch] Generating design types...
[2:09:11 PM] [start] [watch] Compiling and bundling control...
[Webpack stats]:
asset bundle.js 6.56 KiB [emitted] (name: main)
./LinearInputControl/index.ts 4.9 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 2060 ms
[2:09:13 PM] [start] [watch] Generating build outputs...
[2:09:13 PM] [start] [watch] Starting control harness...

Starting control harness...

[Browsersync] Access URLs:

 ----------------------------
 Local: http://localhost:8181
 ----------------------------

[Browsersync] Serving files from: C:\repos\LinearInput\out\controls\LinearInputControl

[Browsersync] Watching files...

También se abre un explorador en el espacio aislado de control PCF para que pueda ver el control y probarlo.

Control de entrada lineal en espacio aislado de control PCF

Empaquetar componentes de código

Siga estos pasos para crear e importar un archivo de solución:

  1. Cree una carpeta denominada Solutions dentro de la carpeta LinearInputControl y vaya a la nueva carpeta.

      mkdir Solutions
  cd Solutions

  2. Cree un nuevo proyecto de solución en la carpeta LinearInputControl mediante el comando pac solution init :

      pac solution init --publisher-name Samples --publisher-prefix samples

    Nota

    Los valores de publisher-name y publisher-prefix deben coincidir con un publicador de soluciones existente o uno nuevo que desee crear en el entorno de destino.

    Para recuperar una lista de valores actuales, ejecute esta consulta en el entorno de destino:

    [Environment URI]/api/data/v9.2/publishers?$select=uniquename,customizationprefix

    Para obtener más información, consulte Consulta de datos mediante la API web.

    La salida del comando pac solution init tiene este aspecto:

    Dataverse solution project with name 'solutions' created successfully in: 'C:\repos\LinearInput\linearinputcontrol\solutions'
Dataverse solution files were successfully created for this project in the sub-directory Other, using solution name solutions, publisher name Samples, and customization prefix samples.
Please verify the publisher information and solution name found in the Solution.xml file.
PS C:\repos\LinearInput\linearinputcontrol\solutions>

  3. Después de crear el nuevo proyecto de solución, agregue una referencia a la ubicación del componente creado. Use el siguiente comando:

    pac solution add-reference --path ..\..\

    Nota

    La ruta de acceso proporcionada está relacionada con la carpeta Soluciones actual que creó en la carpeta LinearInputControl . También puede proporcionar una ruta absoluta.

    El resultado del comando tiene este aspecto:

    Project reference successfully added to Dataverse solution project.

  4. Para generar un archivo ZIP desde el proyecto de solución, cuando esté dentro del directorio del cdsproj proyecto de solución, use el siguiente comando:

    msbuild /t:restore

    O, si ha instalado .NET 6 SDK, use:

    dotnet build

  5. Ejecute de nuevo el siguiente comando:

    msbuild

    Nota

    Si recibe el error Missing required tool: MSBuild.exe/dotnet.exe, agregue MSBuild.exe/dotnet.exe a la variable de entorno Path o use Developer Command Prompt for Visual Studio Code. Como se menciona en los Requisitos previos, debe instalar las herramientas de compilación .NET.

    Sugerencia

    Verá el mensaje No usar la eval función o sus equivalentes funcionales, al compilar el archivo de solución mediante el msbuild comando e importarlo en Dataverse y ejecutar el comprobador de soluciones. Vuelva a generar el archivo de solución mediante el comando msbuild/property:configuration=Release. Vuelva a importar la solución en Dataverse y ejecute el comprobador de soluciones. Para obtener más información, consulte Componente de depuración de código.

  6. El archivo zip generado de la solución se encuentra en la carpeta Solution\bin\debug.

  7. Importe manualmente la solución en Dataverse mediante Power Apps una vez que el archivo ZIP esté listo o automáticamente mediante las herramientas de compilación de Microsoft Power Platform.

Nota

Publique manualmente las personalizaciones si va a importar una solución no administrada.

Agregar el componente de código a una aplicación

Para añadir un componente de código a una aplicación, siga los pasos de estos artículos:

Vea también

Descargar componentes de ejemplo
Más información sobre Power Apps component framework
Información general de las herramientas y aplicaciones utilizadas con ALM
Referencia de la API de Power Apps component framework
Información general de Power Apps component framework
Depurar componentes de código

  • Last updated on