Veritran Docs

Para crear un componente, dirígete a la página Components (Global Design > Components). Puedes crear componentes widget o react. Ambos tipos de componentes se codifican fuera de Studio, pero luego se pueden importar a la página Components. Una vez importados, aparecen en el panel izquierdo del editor de pantallas para que puedas usarlos en tus pantallas, como componentes nativos.ComponentsConstructor visual

[en] Therefore, to create a new component, it takes two steps. First, you must write the new component code using the information provided by the client and considering the attributes that must be available for configuration in the screens editor. Then, you will import the component code and create it in Studio.

[en] Once the component code has been writen, go to the Components page (Design > Components) to create the component in Studio. You can create react components both for the web and mobile channels. Once imported and published, they behave as native components and appear in the left panel of the screens editor (Components tab) so you can use them in your app screens. In addition, you can edit them.

[en] Refer to the intructions below to learn how to create or edit react components. You can only create the component in Studio if you have the code file already created.

Crea o edita un componente react

1. [en] On the Components page, click + Create. The New Component modal opens, where you configure different fields:

   1. [en] In the Component type field, select React.

      Nota

      [en] The Attribute field cannot be edited, which refers to how to the component will be configured in the right panel.

   2. [en] In the Zip File field, click the file browser and select the file from your device. Then, click Open to upload the file. Once the zip is uploaded, the ID, Name, Simulator Image, Tree Icon, Drag Image and Component Definition fields appear automatically configured using the react code stored in the zip file.

2. [en] Click Save to create the component.

Una vez que se abra el modal New Component, dirígete al campo Component Type, haz clic en la flecha y selecciona React en el menú desplegable. Luego, dirígete al campo ZIP File. Haz clic en él para abrir el explorador de archivos y selecciona el archivo ZIP que contiene el widget. Una vez cargado el archivo ZIP, todos los campos aparecen configurados automáticamente utilizando el código del componente react almacenado en el archivo ZIP. Solo puedes modificar el campo Component Definition, que contiene el código escrito.