Ver código fuente

<keywords content="keywords">
campos de usuario, usando campos de usuario, customización, customizar, personalización, personalizar, personalizacion, campos propios, campos personalizados, atributos propios, atributos personalizados
</keywords>&nbsp; 



<div align="center">
{| class="MsoNormalTableAlert" border="1" cellspacing="0" cellpadding="0" width="600"
|-
| valign="top" width="100%" | 
<span>'''Alerta:''' Los Campos de Usuario han sido deprecados, y su uso aplica únicamente en las versiones 9.1.x. La posibilidad de incluir controles personalizados bajo tecnología JQuery, CSS 3 y HTML 5, se presenta en Bizagi GO con la opción de incluir Widgets de Bizagi.</span>
|}
</div>


= Campos de Usuario (UserFields)  =

== Introducción  ==

Los campos de usuario o userfields son una funcionalidad de Bizagi que permite la creación de nuevos tipos de controles. Deben ser usados cuando los tipos de render predefinidos por Bizagi Studio no son suficientes para cubrir las necesidades del negocio. 

== Crear Campos de Usuario  ==

Para crear campos de usuario, se realiza lo siguiente: 

<br>1.<span>&nbsp;&nbsp;&nbsp;&nbsp; </span>En el menú estándar de Bizagi Studio, haga clic en la pestaña de Herramientas (Tools) y haga clic en la opción '''Campos de Usuario '''(UserFields). 

<br>

[[Image:Functionality2 Image010.jpg|center]]&nbsp; 

<br><span id="campo_usuario_propiedades" />2.<span>&nbsp;&nbsp;&nbsp;&nbsp; </span>La ventana Campo de Usuario es desplegada (UserField); aquí, las propiedades como la descripción, los tipos de datos relacionados y el código puede ser definido. 

<br>

[[Image:Complementary Developments2 Image002.jpg|center]] 

<br>
<div align="center">
{| class="FCK__ShowTableBorders" border="0" cellspacing="0" cellpadding="0" width="418"
|-
| valign="top" width="100%" | '''Nombre (Name'''): Nombre del campo de usuario 
<br>'''Descripción (Description)''': Descripción sobre lo que el campo de usuario hace. 

<br>'''Aplica para (Applies to)''': Corresponde a los tipos de datos para los cuales usted quiere aplicar un Campo de usuario de tipo render, con el fin que pueda ser mostrado en los renders con este tipo de atributo. Por ejemplo, si es seleccionado para que aplique a Números Enteros, cuando se editan o se crean formas en donde hay renders con atributos de tipo entero, el campo de usuario puede ser seleccionado. Esto es, dependiendo del tipo de dato seleccionado en esta ventana, el Campo de Usuario puede ser visto en las formas. 

<br>'''Parámetros (Parameters)''': En este campo es posible configurar los parámetros que va a tener el nuevo campo de usuario; cada vez que se utilice el campo de usuario en una forma distinta, se pueden definir los valores para estos atributos en la ventana de edición de la forma. A cada user field se le puede configurar varios parámetros. 

<br>'''Editar (Edit Code)''': El botón de Editar código permite definir el código del campo de Usuario. Más adelante se presenta una discusión y ejemplos del código que se escribe en el botón de edición de los Campos de Usuario (Userfields).

|}
</div>
<span id="campo_usuario_tipo_de_dato" />

=== Aplica para (Applies to)  ===

En esta ventana se podrán seleccionar los tipos de dato a los que aplica el campo de usuario (user field). Los tipos de datos han sido divididos en categorías. Todos los tipos de datos son activados o desactivados cuando los tipos de datos que pertenecen a un grupo son seleccionados. Es necesario clarificar que el último tipo de dato "Vacío" (Empty) corresponde a los renders que no tienen atributos dentro de la forma. 

<br>

[[Image:Complementary Developments2 Image003.jpg|center]]&nbsp; 

<br>
<div align="center">
{| class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" width="405"
|-
| valign="top" width="100%" | 
<span>'''Ejemplo''': Si el campo de usuario aplica para el tipo de campo "Entero", cuando se edita o se crean formas, el campo de usuario será desplegado en el tipo de la columna render para este tipo de atributos.</span>

|}
</div>
<span id="campo_usuario_parametros" />

=== Parámetros (Parameters)  ===

Los parámetros pueden ser definidos para cada campo de usuario. Estos parámetros serán usado dentro de el código del campo de usuario, y serán llenados por renders que los usan. Cuando se hace clic en la celda Parámetros (Parameters) del campo de usuario, la siguiente ventana es desplegada: 

<br>

[[Image:Complementary Developments2 Image006.jpg|center]]&nbsp; 

<br>

En esta ventana los parámetros pueden ser agregados, borrados y modificados. Para esta versión de Bizagi, un parámetro está compuesto por un único nombre. En el ejemplo dos parámetros fueron creados: el primero es el color del texto y el segundo su tamaño. 

<br>

=== Código del Campo de Usuario  ===

Cuando se crea un nuevo campo de usuario, un código básico es creado automáticamente para mostrar cómo funciona. 

<br>
<pre>FieldResponse.Label = FieldInfo.DisplayName;

if (FieldInfo.Editable)
	FieldResponse.Text = "&lt;input name='" + FieldInfo.BAName + "' value='" + FieldResponse.Encode(FieldInfo.Value) + "'&gt;";
else
	FieldResponse.Text = FieldResponse.Encode(FieldInfo.Value);

if (FieldInfo.Required)
{
	FieldResponse.ValidationCode 		= "GetValue('" + FieldInfo.BAName + "') == ''";
	FieldResponse.ValidationMessage 	= FieldInfo.DisplayName + " could not be empty.";
}
</pre>
En este código, dos variables son usadas: 

<br><span id="editorcodigo" />

'''FieldInfo''': contiene la información sobre las propiedades del render. Por ejemplo, si el render es editable, visible o requerido. Otras propiedades disponibles en Bizagi Studio pueden ser incluidas. 

'''FieldResponse''': contiene la información del código con el fin de mostrar (pintar) el campo. 

Las propiedades para ambas variables están disponibles en el botón "Opciones" (Options) en la parte inferior izquierda de la ventana. 

<br>

[[Image:Complementary Developments2 Image009.jpg|center]]&nbsp; 

<br>

==== FieldInfo  ====

Como se mencionó antes, la propiedad '''FieldInfo''' contiene la información que será usada para pintar el control. Un campo de usuario puede ser creado de dos maneras: 

<br>

1. Las propiedades FieldResponse.Label y FieldResponse.Text pueden ser configuradas si el campo de usuario contiene una descripción y un control, el cual es muy común en la mayoría de los controles de Bizagi. 

<br>
<pre>FieldResponse.Label = "Description";
 
FieldResponse.Text = "&lt;Input name='value' value='5'&gt;
</pre>
<br>

'''Label''' es un texto (y se imprimirá como tal). '''Text''' debe contener un código HTML que imprimirá el control. 

<br>

2. Si ninguna etiqueta (label) es necesaria, las propiedades label y Text no deben ser configuradas. En cambio la propiedad FieldResponse.HTML, que contiene todo el código HTML para pintar el control debe ser configurada. 

<br>
<pre>FieldResponse.HTML = "&lt;input name='value' value='500'&gt;&lt;input name='value2' value='500'&gt;"</pre>
<br>

==== FieldResponse  ====

Este contiene además métodos de ayuda que facilitan la programación de los campos de usuario (userfield) contiene además métodos de ayuda que facilitan la programación de los campos de usuario: 

[[Image:Bulletazul.gif]] <u>Función Codificar (Encode Function)</u>: Devuelve una cadena (string) codificada para HTML. 

[[Image:Bulletazul.gif]] <u>Función Adicionar Label (AppendLabel Function)</u>: En lugar colocar todo el label a la vez se puede utilizar esta función para ir adicionando texto a la variable label. 

[[Image:Bulletazul.gif]] <u>Función Adicionar Texto (AppendText Function)</u>: En lugar de colocar todo el texto de una sola vez, se puede utilizar esta función para ir adicionando texto a la variable text. 

[[Image:Bulletazul.gif]] <u>Función Adicionar HTML (AppendHTML Function)</u>: igual para la variable HTML. Estas funciones son útiles cuando se utilizan dentro de iteraciones, en lugar de manejar adiciones sobre variables de tipo cadena (string) que son muy lentas. 

==== Validaciones  ====

Los campos de usuario ofrecen una forma básica para hacer validaciones. Dos variables son usadas para eso: 

'''FieldResponse.ValidationCode''', que contiene el javascript de la validación. Esta función debe retornar verdadero o falso. Si el código de la validación retorna verdadero, quiere decir que el userfield no cumple con la validación correspondiente y aparecerá el mensaje especificado en la variable '''FieldResponse.ValidationMessage'''.<br>

La función Me.Context.getXPath puede ser usado cuando un campo de usuario necesita información de otros campos. 

<br>
<div align="center">
{| class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" width="417"
|-
| valign="top" width="100%" | 
<span>'''Ejemplo''': Me.Context.getXPath("Nombre") y Me.Context.getXPath("Apellido") puede ser usado si el campo de usuario es encontrado dentro de una forma en la entidad Cliente.</span>

|}
</div>
<br>

== Inclusión de Campos de Usuario en las formas  ==

Un campo de usuario puede ser usado en la forma luego de su creación en la pantalla descrita. Si el render se asocia con un atributo en el modelo de datos, primero incluya este atributo en la forma, luego haga clic derecho sobre el render y desde el menú de selección vaya a Convertir a (Convert To), Campos de Usuario (Userfields),&nbsp; y&nbsp; nombre del campo de usuario creado. El campo de usuario será únicamente mostrado para los tipos de datos relacionados, específicamente, aquellos configurados para el campo de usuario en la pantalla previa (Aplica para). Los campos de usuario pueden ser también usados en formas de consulta. 

<br>

[[Image:Complementary Developments2 Image005.jpg|center]]&nbsp; 

<br>

Otra opción es ''arrastrar'' el render desde el Menú de Renders hacia la forma y luego seleccionar el Mapeo de Datos (Data Binding) correspondiente. 

<br>

[[Image:Complementary Developments2 Image010.jpg|center]]&nbsp; 

=== Uso de Parámetros en Formas  ===

Cuando usted selecciona un campo de usuario para un render en una forma, y los parámetros han sido configurados para este dentro de las propiedades de la forma en donde está el campo de usuario, debajo del grupo Render se encuentran las propiedades de los Parámetros para ingresar los valores para cada parámetro que ha sido configurado. Haga clic en la propiedad para que la ventana Parámetros del Campo de Usuario (User Field Parameters) aparezca y se puedan configurar los valores de los parámetros. 

<br>

[[Image:Complementary Developments2 Image004.jpg|center]]&nbsp; 

<br>

[[Image:Complementary Developments2 Image007.jpg|center]] 

<br>

=== Ruta por defecto ===

La ruta que referencia un campo de usuario por defecto es: 

<pre>

C:\BizAgi\[Bizagi_edition]\Projects\[your_project]\WebApplication\App\ListaDetalle\


</pre>

Esto significa que si utiliza y referencia un archivo físico dentro del campo de usuario (por ejemplo para una imágen), entonces necesita considerar dicha ruta inicial para la fuente ("source"), si se planea usar rutas relativas.


Nótese que los archivos físico que se referencien desde un campo de usuario deben estar en una ruta que sea accesible a nivel de red (por ejemplo, en una carpeta compartida de un servidor de archivos, o la carpeta de la aplicación web).





== Resultado en el portal de trabajo  ==

Cuando la aplicación web muestra un render de tipo campo de usuario, este invocará su código y usará los atributos de la variable FieldResponse para pintarlo. 

== Ejemplos de Campo de Usuario  ==

A continuación se muestran algunos ejemplos para la elaboración de los userfields. La aplicación Bizagi utilizada, es una aplicación sencilla para la elaboración de un plan de amortización, cuyos principales atributos son: Monto, Plazo y la Tasa. Estos atributos serán utilizados para desplegar diferentes tipos de campos de usuario. 

<br>

<br>

=== Visualización de una imagen  ===

El siguiente ejemplo muestra el código para hacer un campo de usuario que muestra una imagen. Cuando usted hace clic sobre la imagen, una función javascript es llamada. 

<br>
<pre>FieldResponse.AppendHTML("&lt;img onclick = 'Test()' alt='Interest Vs Capital' ");
FieldResponse.AppendHTML("src = '"+FieldInfo.Parameters["Source"]+"' /&gt;");
</pre>
<br>

[[Image:Complementary Developments2 Image012.jpg|center]] 

<br>

=== Creación de un Enlace (Link)  ===

El siguiente campo de usuario despliega un enlace. Es importante resaltar que ninguna variable es usada para mantener el HTML en memoria, este es retornado directamente. 

<br>
<pre>FieldResponse.Text = "&lt;a href='http://www.Bizagi.com'&gt;" + FieldInfo.DisplayName + "&lt;/a&gt;";
</pre>
<br>

<br>

=== Plan de Amortización  ===

El siguiente ejemplo muestra un campo de usuario que despliega un plan de amortización sencillo, sobre la base del Monto, Cuota y Tasa. No se hacen validaciones de algún tipo, simplemente se despliegan en una tabla con la información calculada. La tasa es un parámetro del campo de usuario; Monto y Cuota son atributos de la entidad principal maestra. 

<br>
<pre>FieldResponse.AppendHTML("&lt;table border='0' cellspacing='0' cellpadding='0' align='center' width='60%'&gt;"); 
FieldResponse.AppendHTML("&lt;tr&gt;&lt;td colspan='5' class='ListHeaderLinks'&gt;");
FieldResponse.AppendHTML(FieldInfo.DisplayName + "&lt;/td&gt;&lt;/tr&gt;");
FieldResponse.AppendHTML("&lt;tr class='ListHeaderLinks'&gt;");
FieldResponse.AppendHTML("&lt;td&gt;Payment No&lt;/td&gt;");
FieldResponse.AppendHTML("&lt;td&gt;Value Payment&lt;/td&gt;");
FieldResponse.AppendHTML("&lt;td&gt;Interests&lt;/td&gt;");
FieldResponse.AppendHTML("&lt;td&gt;Capital&lt;/td&gt;");
FieldResponse.AppendHTML("&lt;td&gt;Balance&lt;/td&gt;");
FieldResponse.AppendHTML("&lt;/tr&gt;");
FieldResponse.AppendHTML("&lt;tr style='height:8px;'&gt;&lt;td colspan='5' class='gridline1 TDShadow' style='background-image: url(../../img/WorkPortal/CellShadow.gif);'&gt;&lt;/td&gt;&lt;/tr&gt;");

if(FieldInfo.Parameters["Rate"]&nbsp;!= DBNull.Value)
{
	var iMonthlyRate = (FieldInfo.Parameters["Rate"]/100) /12;
	var iPayment = 1;
	var iBalance = &lt;Amount&gt;;
	var temp = iPayment;
	
	while(iBalance &lt;= 0 || iPayment &lt; 40)
	{
		if(temp == 1)
		{
			FieldResponse.AppendHTML("&lt;tr class='gridline2'&gt;");
			temp = 0;
		}
		else
		{
			FieldResponse.AppendHTML("&lt;tr class='gridline1'&gt;");
			temp = 1;
		}
		FieldResponse.AppendHTML("&lt;td&gt;" + iPayment + "&lt;/td&gt;");
		FieldResponse.AppendHTML("&lt;td&gt;" + &lt;Payment&gt; + "&lt;/td&gt;");
		var iInterest = iBalance * iMonthlyRate;
		FieldResponse.AppendHTML("&lt;td&gt;" + iInterest.ToString("##.##") + "&lt;/td&gt;");
		var iCapital = &lt;Payment&gt; - iInterest;
		FieldResponse.AppendHTML("&lt;td&gt;" + iCapital.ToString("##.##") + "&lt;/td&gt;");
		iBalance = iBalance - iCapital;
		
		if(iBalance &lt; 0)
		{
			FieldResponse.AppendHTML("&lt;td&gt;&nbsp;&lt;/td&gt;");
			FieldResponse.AppendHTML("&lt;/tr&gt;");
			break;
		}	
		FieldResponse.AppendHTML("&lt;td&gt;" + iBalance.ToString("##.##") + "&lt;/td&gt;");
		FieldResponse.AppendHTML("&lt;/tr&gt;");
		iPayment++;
	}
	FieldResponse.AppendHTML("&lt;tr&gt;&lt;td colspan='5' class='gridline1 TDSumary'&gt;&lt;table class='SummaryTable' cellpadding='0' cellspacing='0'&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;");
}

FieldResponse.AppendHTML("&lt;/table&gt;"); 
</pre>
<br>

[[Image:Complementary Developments2 Image011.jpg|center]] 

<br>

<br>
<div align="center">
{| class="MsoNormalTableAlert" border="1" cellspacing="0" cellpadding="0" width="600"
|-
| valign="top" width="100%" | 
<span>'''Alerta:''' En el ejemplo anterior se utiliza un método .ToString() el cual es nativo de los ambientes .Net. Esto significa que dicho uso funciona para los procesos de Bizagi que utilicen IIS. Para los procesos de Bizagi que utilicen un servidor de aplicaciones JEE (procesos que se contruyan con la edición Bizagi Enterprise JEE), se necesitará el uso del método "toString()" y otros del ambiente Java para el formateo de cadenas como: "substring()" y "indexOf()".</span>

|}
</div>
=== Contraseña&nbsp;  ===

El siguiente ejemplo muestra el código para hacer un campo de usuario que muestra una contraseña. Se majejan los casos de editabilidad y obligatoriedad que puedan aplicar al campo. 

<br>
<pre>//Starts Code
FieldResponse.Label = FieldInfo.DisplayName;
if (FieldInfo.Editable)
 FieldResponse.Text = "&lt;input type='password' name='" + FieldInfo.BAName + "' value='" + FieldResponse.Encode(FieldInfo.Value) + "'&gt;";
else
 FieldResponse.Text = "&lt;input type='password' readonly='readonly' name='" + FieldInfo.BAName + "' value='" + FieldResponse.Encode(FieldInfo.Value) + "'&gt;";
if (FieldInfo.Required)
{
 FieldResponse.ValidationCode   = "GetValue('" + FieldInfo.BAName + "') == ''";
 FieldResponse.ValidationMessage  = FieldInfo.DisplayName + " could not be empty.";
}
//Ends Code 
</pre>
<br>En el portal de usuarios, el campo de contraseña lucirá de la siguiente manera: 

<br>

[[Image:Complementary Developments2 Image015.jpg|center]]<br>

<br>

=== Marquesina  ===

Como un ejemplo, el siguiente campo de usuario presenta los indicadores económicos en una marquesina. 

<br>
<pre>var marqueewidth = 135; // height 
var marqueeheight = 47; // speed 
var speed = 1; // content 

var marqueecontents = "&lt;font color = 'red'&gt;TRM=$2,329.79 EURO=$3,121.28 UVR=$145.8009 DTF=7.73%&lt;/font&gt;";

var sControl = "&lt;table width = 135&gt;&lt;tr&gt;&lt;td&gt;&lt;marquee direction=\"up\" scrollAmount=" + speed + " style=\"center:" + marqueewidth + ";height:" + marqueeheight + "\"&gt;";

sControl += marqueecontents + "&lt;/marquee&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";

FieldResponse.Label = FieldInfo.DisplayName;
FieldResponse.Text = sControl;
</pre>
<br>

[[Image:Complementary Developments2 Image013.jpg|center]] 

<br>

<br>

=== Invocación de una función personalizada  ===

El campo de usuario de este ejemplo invoca una función personalizada, adicionada al proyecto a través de la [[Scripting|<u>funcionalidad de Scripting</u>]]. <br>Por medio de un elemento "&lt;script&gt;" de HTML, se pueden invocar las funciones que hayamos definido en la librería de Scripting, como un llamado directamente en el cuerpo del documento HTML (en el elemento &lt;BODY&gt;).<br>Esto significa que la función será invocada al cargar inicialmente la actividad, tan pronto se cargue la página ("PageLoad" event).<br>

<br>Por lo tanto, el siguiente campo de usuario invoca la función "Test", utilizada en el ejemplo del artículo sobre [[Scripting|<u>Scripting</u>]]: <br>[[Image:Userfields scripting1.png|center]] <br>

<br>Su codigo es: <br>
<pre>FieldResponse.AppendHTML("&lt;script language='Javascript'&gt;Test();&lt;/script&gt;");

</pre>
Si desea pasar valores dinámicos a su función personalizada (por ejemplo, el valor del atributo del campo de usuario), entonces puede hacerlo mediante el uso de '''"FieldInfo.Value"''': <br><br>
<pre>FieldResponse.AppendHTML("&lt;script language='Javascript'&gt;Test2('" + FieldInfo.Value + "');&lt;/script&gt;");


</pre>
<br>

Para este ejemplo que usa "FieldInfo.Value", utilizamos la siguiente función de Scripting:<br><br>[[Image:Userfields scripting2.png.png|center]] <br>

Tenga en cuenta que aquí estamos invocando la función tan pronto se carga la página (el formulario de la actividad); y por lo tanto se requiere para este ejemplo que el atributo ya haya sido asignado con un valor previamente. 

<br>La invocación de esta misma función también se puede realizar con la activación en otro momento (por ejemplo, con un botón). 

<br>

=== Campos de Usuario entre Grillas  ===

La siguiente muestra un caso en donde el concepto del contexto es usado. Un campo de usuario en la grilla de la forma visual será creado. El código del campo de usuario relaciona dos valores de la entidad, es decir, el registro de la grilla. 

<br>
<pre>var valueAttrib = Me.Context.getXPath("Value");
var obsAttrib = Me.Context.getXPath("Observations");

FieldResponse.Text = "&lt;b&gt;" + FieldResponse.Encode(valueAttrib + ": " + obsAttrib) + "&lt;/b&gt;";
</pre>
<br>

La función Me.Context.getXPath obtiene directamente los valores del registro desplegado en el código previo, específicamente, Valor (Value) y Observaciones (Observations). 

Durante la ejecución, cada fila de la tabla relaciona los valores del registro correspondiente. 

<br>

[[Image:Desarrollos Complementarios2 Image014.jpg|center]] 

<br>

Como se puede observar, no es necesario realizar ninguna acción adicional para utilizar los campos de usuarios dentro de grillas, siempre y cuando se utilice correctamente el contexto. 

== Campos de Usuario en Producción  ==

Para garantizar el correcto desempeño de todos los ambientes una vez se ha hecho deployment de un proyecto, no será posible eliminar los campos de usuario usados por las versiones de proceso que ya estén en el ambiente productivo.<br>

En el ambiente de Desarrollo, Bizagi Studio restringirá ciertas posibilidades de edición para los campos de usuario con el fin de asegurar la estabilidad del ambiente de Producción en los siguientes deployments.<br>

Específicamente y para los campos de usuario que estén en el ambiente de Producción, será posible editar su código.<br>

La edición de sus otras propiedades (por ejemplo, sus parámetros, tipos de datos soportados o su entidad de contexto), no será posible. 

== Artículos Relacionados&nbsp;  ==

*[[Cómo añadir un video a una forma|<u>Cómo añadir un video a una forma</u>]]. 
*[[Scripting|<u>Posibilidad de funciones script (Scripting) en Bizagi</u>]].
*[[Como_Extender_Formas_En_Bizagi|<u>Personalización con un mapa de google</u>]].


<br><comments />