Cómo obtener una interfaz de usuario Angular para InterSystems IRIS en 5 minutos

¡Hola desarrolladores!

Supón que tienes una clase persistente con datos y quieres tener una interfaz de usuario Angular sencilla, para ver los datos y llevar a cabo operaciones CRUD.

En este artículo describíamos cómo desarrollar una interfaz de usuario Angular para InterSystems IRIS utilizando RESTForms2.

A continuación vamos a explicar cómo conseguir una interfaz de usuario Angular sencilla que permita realizar operaciones CRUD y ver automáticamente los datos de tu clase de InterSystems IRIS en menos de 5 minutos.

¡Vamos!

Necesitarás:

1. InterSystems IRIS
2. ZPM
3. Los módulos RESTForms2 y RESTForms2-UI.

Utilizaré como ejemplo la clase Data.Countries que generé e importé a través de csvgen, utilizando este comando:

d ##class(community.csvgen).GenerateFromURL("https://raw.githubusercontent.com/datasciencedojo/datasets/master/WorldDBTables/CountryTable.csv",",","Data.Countries"

Para crear una interfaz de usuario Angular necesitamos exponer una API REST para esta clase, que dará servicio a las operaciones CRUD.

Vamos a utilizar el módulo restforms2 para esto. 

Este comando en dockerfile instala restforms2 en el contenedor IRIS:

zpm "install restforms2" \

Para añadir una API REST, necesitamos hacer que nuestra clase de ejemplo herede de Form.Adaptor:

Class Data.Countries Extends (%Library.Persistent, Form.Adaptor)

Añade los parámetros restforms2 a la clase persistente para gestionar el comportamiento general: ordenación, visualización, etc:

// Form name, not a global key so it can be anything
Parameter FORMNAME = "Countries";

/// Default permissions
/// Objects of this form can be Created, Read, Updated and Deleted
/// Redefine this parameter to change permissions for everyone
/// Redefine checkPermission method (see Form.Security) for this class 
/// to add custom security based on user/roles/etc.
Parameter OBJPERMISSIONS As %String = "CRUD";

/// Property used for basic information about the object
/// By default getObjectDisplayName method gets its value from it
Parameter DISPLAYPROPERTY As %String = "name";

Perfecto. A continuación, podemos utilizar la sintaxis de restforms2 para hacerle saber qué propiedades de la clase queremos exponer a la API CRUD. Puedes hacerlo añadiendo el atributo "DISPLAYNAME =" a las propiedades que quieras exponer en restforms2-ui. Por ejemplo:

Property code As %Library.String(MAXLEN = 250) [ SqlColumnNumber = 2 ];

Property name As %Library.String(DISPLAYNAME = "Name", MAXLEN = 250) [ SqlColumnNumber = 3 ];

Property continent As %Library.String(DISPLAYNAME = "Continent", MAXLEN = 250) [ SqlColumnNumber = 4 ];

Property region As %Library.String(DISPLAYNAME = "Region", MAXLEN = 250) [ SqlColumnNumber = 5 ];

Property surfacearea As %Library.Integer(DISPLAYNAME = "Surface Area", MAXVAL = 2147483647, MINVAL = -2147483648) [ SqlColumnNumber = 6, SqlFieldName = surface_area ];

Property independenceyear As %Library.Integer(DISPLAYNAME = "Independence Year", MAXVAL = 2147483647, MINVAL = -2147483648) [ SqlColumnNumber = 7, SqlFieldName = independence_year ];

¡Genial! Ahora vamos a introducir la capa de interfaz de usuario. Este comando en dockerfile instala restforms2-ui, que es la interfaz de usuario Angular para Restform2:

zpm "install restforms2-ui" \

¡Y ya está! Vamos a echarle un vistazo a la interfaz de usuario de nuestra clase de ejemplo, que puedes encontrar en la URL server:port/restforms2-ui:

RESTForms incluye las clases de prueba Person y Company, y se pueden utilizar para examinar las características de restfomsUI. Actualmente, puedes editar campos de cadenas de texto, numéricos, booleanos, de fecha y búsqueda.

Puedes probar todo esto en tu portátil, si clonas y construyes este repositorio:

docker-compose up -d --build

Y, a continuación, abres la URL:

localhost:port/restforms2-ui/index.html

o si usas VSCode, selecciona este elemento del menú:

¡Happy coding!