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:
- InterSystems IRIS
- ZPM
- 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!