El siguiente ejercicio se utilizará la camara del dispositivo, se habilitará Pen Input para crear una firma y guardar los datos en una lista de SharePoint, las imágenes serán guardadas en formato 64 bits.
Crearemos la lista de SharePoint llama xguarda_imagen.
- Nombre : Texto - Una solo línea de texto.
- Fecha: Fecha y hora
- Firma: Texto - Varias líneas de texto.
- Foto: Texto - Varias líneas de texto.
Crearemos una nueva ventana con los siguientes contenedores.
Todos los contendores deberán tener las mismas propiedades habilitadas, excepto el contenedor principal (Container24).
El contenedor principal deberá tener las siguientes Propiedades habilitadas:
- LayoutJustifyContent: LayoutJustifyContent.Start
- LayoutAlignItems: LayoutAlignItems.Start
- LayoutOverflowY: LayoutOverflow.Scroll
- Width: Parent.Width
- Height: 900
- LayoutDirection: If(camara2.Size=1 , LayoutDirection.Vertical, LayoutDirection.Horizontal)
En el primer contenedor, insertaremos los siguientes elementos y daremos el formato:
En el segundo contenedor, insertaremos los siguientes elementos y daremos el formato:
En la propiedad Camera de la Camera_foto, teclearemos: Dropdown_camaras.Selected.Id
Esto llama la camara selecciona en el DropDown_camaras (se visualizarán dependiendo el dispositivo donde se este ingresando).
En el Dropdown_camaras teclearemos en la propiedad Item : Camera_foto.AvailableDevices
Se visualizaran las camaras habilitadas del dispositivo.
En la imagen9_1, tecleáremos en la propiedad Image: Camera_foto.Photo
Esto llamara la imagen seleccionada en la camara.
En Button7 teclearemos en la propiedad OnSelect, el código para guardar los datos en la lista de SharePoint.
Set(var_firma,JSON(Pen_firma.Image,JSONFormat.IncludeBinaryData));
Set(var_foto,JSON(Camera_foto.Photo,JSONFormat.IncludeBinaryData));
Set(var_firma_format,Mid(var_firma,2,Len(var_firma)-2));
Set(var_foto_format,Mid(var_foto,2,Len(var_foto)-2));
Patch(xguarda_imagen,
{
Nombre: TextInput_nombre.Text,
Fecha: DatePicker_fecha.SelectedDate,
Firma: var_firma_format,
Foto: var_foto_format
}
);
Notify("Registro grabado", NotificationType.Success)
La explicación del código:
Set(var_firma,JSON(Pen_firma.Image,JSONFormat.IncludeBinaryData));
Set(var_foto,JSON(Camera_foto.Photo,JSONFormat.IncludeBinaryData));
Guarda el formato JSON los datos de la firma (Pen Input) y la Imagen (Camera).
Set(var_firma_format,Mid(var_firma,2,Len(var_firma)-2));
Set(var_foto_format,Mid(var_foto,2,Len(var_foto)-2));
Quita las comillas de la cadena JSON en las variables, por ejemplo, cuando se guarda la cadena en la variable var_firma, se visualizarán los datos como "GHYFG77HHVKNJGF897JHFDWSA", al incio y al final aparecen ", al guardar los campos en la lista de SharePoint, sera tomada como una cadena de caracteres y como como un formato JSON, por ello al utilizar MID() se eliminan las " y quedara omo : GHYFG77HHVKNJGF897JHFDWSA
Patch(xguarda_imagen,
{
Nombre: TextInput_nombre.Text,
Fecha: DatePicker_fecha.SelectedDate,
Firma: var_firma_format,
Foto: var_foto_format
}
);
Se guardan los datos en la lista de SharePoint xguarda_imagen.
Notify("Registro grabado", NotificationType.Success)
Se visualiza la notificación.
Por último, en el tercer contendedor insertaremos el botón para consultar los registros guardados.
Crearemos la ventana camara2_galeria que sera llamada en el Button10 y tendrá una galeria para mostrar los registros grabados.
Crearemos una ventana llamada camara2_galeria, en ella se podrán visualizar lo registros grabados.
En los siguientes elementos
ELEMENTO PROPIEDAD VALOR
Label_nombre Text ThisItem.Nombre
Label_fecha Text ThisItem.Fecha
Image_firma Image ThisItem.Firma
Image_foto Image ThisItem.Foto
En Icon_ver en la propiedad OnSelect teclearemos:
Set(var_imagen_foto, ThisItem.Foto);
Navigate(camara2_verimagen)
Se guardará el valor de la imagen en la variable var_imagen_foto y se llamará la ventana camara2_verimagen.
En Icon_eliminar, en la propiedad OnSelect teclearemos:
Remove(xguarda_imagen, ThisItem); Notify("El registro ha sido eliminado", NotificationType.Information)
Eliminará el registro de la lista de SharePoint xguarda_imagen y se visualizará el mensaje.
Crearemos una ventana llamada camara2_verimagen, en ella se podrán visualizar la imagen seleccionada.
Solo llamaremos en Image_verfoto en la propiedad Image la variable var_imagen_foto, creada en la ventana camara2_galeria.
Ejecutamos la app y podremos ver activada la camara, tecleamos los datos, firmamos y presionamos sobre la camara y guardamos el registro.
Presionamos el botón ver registros, se visualizarán los registros guardados en la lista de SharePoint.
Podremos eliminar el registro o visualizar la imagen.
En la lista de SharePoint se visualizará la información de las imágenes de la siguiente manera.
