HTML

RoomReservation: Mi primera SharePoint Hosted App

Muy buenas a todos,

Llevaba algunos días sin publicar nada en el blog, y es que he estado algo ocupado. Durante los meses de enero y febrero he estado trabajando en conocer el nuevo modelo de desarrollo de SharePoint, en qué consiste el nuevo modelo de Apps y que son y como se usan las API Cliente. He escrito algunos artículos sobre estos temas, relacionados con la API REST, CSOM y cómo crear SharePoint Hosted Apps. Pero para poder profundizar más en su conocimiento decidí crear una aplicación de SharePoint que tuviera en cuenta todo lo que había estado aprendiendo.

Por esto surge principalmente RoomReservation. RoomReservation es una SharePoint Hosted App que nos proporciona un sistema muy sencillo de reserva de salas. La aplicación, consiste en un formulario y un calendario. El formulario nos permite rellenar los campos básicos para hacer una reserva de salas, nos muestra la fecha, las horas y las salas disponibles. La utilidad de la aplicación, es que a medida que vamos completando los datos de fecha y hora las salas disponibles se van actualizando, permitiéndonos solo reservar aquellas salas que realmente están libres en el horario que estamos solicitando.

roomreservationapplication

Esta es la interfaz de la aplicación. Para que funcione correctamente, necesita dos lista, una lista personalizada con los recursos o salas disponibles y otra lista de tipo calendario donde se almacenarán las reservas realizadas.

El modelo de desarrollo que he seguido para la App ha sido el siguiente:

  • Todo el acceso a datos de SharePoint se ha hecho a través de API REST.
  • Las listas que son necesarias, son provisionadas remotamente por la propia aplicación, si tras instalarla, no existían ya. Para ello se ha usado también API REST, la aplicación evalúa si existen las listas, si no, automáticamente te redirige a una página donde tienes la opción de crear las listas.

install

Todo el código de la aplicación está en GitHub en el siguiente enlace:

https://github.com/jcroav/room-reservation

A partir de ahora comenzaré a utilizar más a menudo GitHub para subir mis desarrollos, e incluso ejemplos y demos que vaya publicando en mi blog.

Os animo a todos a que ayudéis RoomReservation o propongáis aspectos de mejora, serán siempre bienvenidos. Yo también intentaré aprovechar todo lo que he aprendido y lo que vaya a aprender próximamente para seguir mejorando esta App y desarrollando algunas nuevas.

¿Cuáles son los aspectos de mejora?

Como por supuesto no creo que sea perfecta, ni mucho menos, tengo ya previstas algunas áreas de mejora. Próximamente espero seguir trabajando en mejorar la interfaz gráfica, hacerla más adaptativa, añadir alguna funcionalidad extra y trabajar en los idiomas de la App, ya que ahora mismo solo está en inglés.

Pues nada más de momento, lo dicho, espero que os sirva como siempre, y que lo encontréis útil.

Un saludo y buena semana.

CSS: Height de un div que ocupa el máximo del div padre

Buenas a todos,

Llevaba ya tiempo sin escribir nada sobre CSS, será porque no me ha tocado maquetar, hasta hace unos días. Hoy quiero contar como hacer que un div hijo ocupe el 100% del height del div padre independientemente del tamaño que tenga éste. Esto lo podemos utilizar por ejemplo en un sidebar dentro de una página web donde el height del padre irá cambiando en función del contenido de éste.

Vamos a ver el código de cómo podríamos hacerlo y después veremos el resultado con algunos ejemplos.

.parent{
   width:100%;
   min-height:20em;
   float:left;
   position:relative;
   overflow:hidden:
}

.child{
   width:30%;
   position:absolute;
   top:0;
   bottom:0;
}

Aquí hay dos claves para entender como funciona. Por un lado, el uso, como ya mostré en un post anterior de la propiedad position. Y por otro lado e igual de importante, el uso de las propiedades en el hijo top y bottom, con el valor 0. Esto hará que el hijo se ajuste en todo momento tanto al top como al bottom del padre, consiguiendo el efecto deseado. Vamos a ver el funcionamiento del ejemplo.

prueba
prueba

Como se puede ver, independientemente del height del padre, el hijo ocupa siempre el 100% de éste.

Os dejo un par de enlaces de interés, una la explicación del uso de la propiedad position en CSS y el blog donde pude investigar cómo hacer lo que os he contado.

Uso de la propiedad position en CSS

http://blog.iguazoft.com/divs-con-alto-al-100-sin-asignarle-100-al-elemento-padre/