Pero si queremos ofrecer algo más que un montón de tiles con aplicaciones, por ejemplo, para mostrar novedades, noticias, páginas informativas... lo que cualquier otro sitio web, vaya, entonces el Fiori Launchpad se nos va a quedar corto.
Podríamos pensar en usar otro servidor web y enlazarlo luego con nuestro Fiori Launchpad. Pero si ya disponemos de cuenta en SAP CP, no nos va a hacer falta, podemos crear un sitio web, darle el formato que queramos y, si luego nos interesa, incluso añadirle un acceso a las aplicaciones de SAP mediante el correspondiente Fiori Launchpad. Eso es lo que vamos a aprender a hacer trasteando durante los siguientes artículos, a crear un sitio freestyle:
- En el artículo actual, veremos cómo crear una página inicial y darle forma.
- En el siguiente post, editaremos el contenido web del sitio: Textos, imágenes, listas de noticias.
- En el último post, aprenderemos a crear menús, añadir un acceso a aplicaciones SAPUI5 que hayamos creado e incluso a un Fiori Launchpad.
Y al final conseguiremos algo tal que así:
A tener en cuenta
SAP nos proporciona varias plantillas y widgets para crear el sitio, pero podemos crear los nuestros mediante el SAP Web IDE. Eso no se verá aquí, sólo vamos a pelearnos con la administración del sitio y no con el desarrollo de nuevas entidades. Tocará aprender a hacerlo más adelante.
Sobre los widgets que nos proporciona de forma estándar y que usaremos para asignar contenido (textos, listas, imágenes), debemos saber que son elementos estáticos. SAP no nos proporciona una opción para leer, por ejemplo, un listado de noticias que se alimente desde una base de datos y mostrar siempre sólo las cinco últimas. Si queremos ir modificando las noticias, el responsable de editar el contenido web tendrá que acceder periódicamente para añadir las nuevas entradas. La otra opción, por supuesto, sería crear nuestro propio widget que haga dicho automatismo.
Acceder al servicio de Portal
Lo primero que tenemos que hacer es acceder al servicio de Portal, que deberemos tener, por supuesto, activado. Pero esto no lo vamos a explicar ahora, porque ya lo vimos en el post que hemos mencionado anteriormente, así que se puede revisar aquí.
Crear el nuevo sitio
Una vez hemos activado y configurado el Portal (si procedía), podemos acceder al espacio del administrador para crear nuestro nuevo sitio. Vamos a la opción Directorio del sitio, donde nos encontraremos los diferentes sitios que ya hemos creado y donde podemos crear nuevos y modificar/publicar/eliminar los existentes.
Cada sitio aparece en un recuadro con su nombre y, si nos ponemos sobre el mismo, aparecerán las opciones disponibles en un desplegable.
Pulsamos el + grandote que tenemos para crear un nuevo sitio y le asignamos un nombre al sitio.
Tenemos que escoger una plantilla de sitio de las disponibles (site templates), entre las que tenemos la ya famosa SAP Fiori Launchpad. Pero hoy no queremos trastear con esa, sino con la Starter Site. Podríamos probar con otras, que también son freestyle con una plantilla predefinida específica, como la Basic Layout Set (que nos proporciona todas las plantillas de página básica), pero nosotros vamos a lo más básico y escogemos Starter Site.
Ojo, si se nos quedan corta, siempre podríamos crear una nueva con el SAP Web IDE.
Una vez creada, accederemos directamente a la configuración del sitio web. Si salimos de esta vsita, siempre podemos volver desde la página de sitios disponibles, pulsando la opción Tratar.
En el sitio, tenemos una entrada llamada Gestión de página, que nos va a servir para editar las distintas páginas de nuestro sitio.
Tendremos dos opciones: Páginas, que son las disposiciones (layouts) de contenido que tendremos en nuestro sitio, y modelos de página (page templates), que son plantillas predefinidas que podemos reutilizar para crear nuevas páginas.
Nuestro site puede disponer de las páginas que necesitemos, pero siempre deberemos establecer una como página inicial. Podrías establecer incluso varias, ya que podemos elegir que la página inicial dependa del rol de usuario, pero en nuestro ejemplo sólo vamos a establecer una única página como inicial.
Eso lo podemos hacer en las propiedades de la página. Como sólo tenemos una, estará ya marcada como página de inicio y nos aparecerá la opción deshabilitada.
Configurar el modelo de página
Cuando creamos una página utilizando un tipo de plantilla de página nueva, en la sección de Modelos de página (page template) se nos creará una nueva plantilla. Podemos editar dicha plantilla en Gestión de página -> Modelos de página. A nosotros nos aparece el modelo Starter Page, pero si añadimos más adelante páginas que usen otra plantilla diferente, se nos irán añadiendo aquí también.
El modelo nos va a servir para poder establecer un formato predefinido para todas las páginas que usen dicho modelo. Por ejemplo, si queremos que todas las páginas tengan un encabezado inicial con un formato específico, podemos añadir el widget correspondiente, igual que haremos con las páginas.
A partir de entonces, cualquier nueva página que use dicha plantilla tendrá dichos widgets. Por defecto, están bloqueados y no se pueden modificar, pero tenemos la opción de desconectar la página de su plantilla y así modificar dichos valores. Eso sí, si en un futuro modificamos la plantilla, la página desconectada no se actualizará en consecuencia.
 |
| En la propia configuración de la página, podremos desconectarla del modelo de página con este botoncito |
¿Para qué nos sirve entonces un modelo/plantilla?
- Para añadir elementos que van a ser fijos en todas las páginas.
- Para añadir elementos que, aunque no sean fijos, sean una propuesta inicial.
A la hora de añadir elementos, funciona prácticamente igual que cuando hemos creado la página. Por no liar la explicación, prefiero ir directamente a la edición de la página, pero habiendo dejado claro para qué nos pueden servir las plantillas de página.
Editar la página
Vamos a editar la primera página que se nos ha creado en el sitio, en Gestión de página -> Páginas. Desde aquí podremos añadir posteriormente más páginas, pulsando sobre el botón + inferior.
Seleccionamos la página y en la parte de la derecha nos aparece su configuración.
Si vamos al contenido de la página y pulsamos sobre él, nos aparecerán varias secciones. En nuestro caso, sólo tenemos una porque es la plantilla básica, pero podríamos tener varias. Al seleccionar una sección, nos aparecerán varios iconos. Lo que modifiquemos aquí afectará a dicha sección, no al resto:
- El nombre de la sección, que en nuestro caso sólo tenemos una, pero para modelos de página más complejos podemos tener varios (como, por ejemplo, header, content y footer).
- Un +, que nos permite añadir widgets, que son los elementos web de la página con el contenido, como etiquetas, imágenes, vídeos, carruseles, listas, tarjetas, etc.
- Una tabla, que nos permite modificar la disposición de los widgets en la página.
- Si ya hemos añadido elementos, un icono con forma de enchufe, para desconectar la página de su modelo de página o para volver a conectarla (perdiendo toda la configuración disponible).
 |
| Como todavía no hemos añadido nada, no aparece la opción de desconectar del modelo |
Vamos a añadir varios elementos de contenido y después asignaremos la disposición. Queremos tener lo siguiente:
- Un encabezado para dar la bienvenida.
- Una imagen representativa.
- Un texto explicando el sitio web, que aparecerá a la par de la imagen.
- Una lista con noticias. Esta lista es estática, como hemos mencionado antes, así que el responsable de editar el contenido tendrá que ir actualizando periódicamente. Pero para ello dispone de las herramientas necesarias, que veremos en un artículo posterior.
Añadir widgets (contenido)
De momento, vamos a asignar los widgets y que se distribuyan como ellos quieran. Después, ya modificaremos su disposición.
Existen dos tipos de widgets: Los estándar, que se editan siempre desde esta herramienta, como por ejemplo código HTML puro, tiles, vídeos fijos; y los de contenido web, que el responsable de editar el contenido puede modificar posteriormente para actualizar la información del sitio sin modificar su disposición ni cargarse nada.
Pulsamos el + para elegir las opciones. Ahí nos aparecen un porrón de widgets de SAP. Buscamos los que queremos añadir. En ningún momento nos va a preguntar dónde se van a poner, y se situarán uno debajo de otro (ya que la disposición, por defecto, es en columna).
Añadimos los siguientes widgets.
Ojo, que podemos crear imágenes y textos de tipo "Contenido web" y de tipo "Estándar". La diferencia es si queremos que el editor de contenido pueda modificar dichos textos o no. En nuestro caso, hemos escogido de tipo contenido web para que sí que pueda editarlo (imaginemos que él es el responsable final de todos los textos que se muestren).
Nos quedará todo tal que así:
 |
| De momento, todo texto predefinido |
Podemos editar cualquier widget pulsando sobre él y eligiendo el icono del lápiz o del engranaje, depende del tipo de widget.
Además, cada widget tiene un nombre (por ejemplo, Large Header), que podemos y deberíamos cambiar. ¿Por qué deberíamos hacerlo? Para que luego, a la hora de editar el contenido web, sepamos en todo momento qué es lo que estamos cambiando.
 |
| He pulsado sobre Large Header y le he cambiado el nombre a Cabecera |
La edición del widget nos permite cambiar el texto de las etiquetas, la imagen que se muestra, el contenido de la lista. Es decir, podríamos tener todos los textos ya editados aquí. De momento, podemos cambiar el título como prueba y dejar el resto sin modificar.
Establecer la disposición
Una vez añadidos los widgets, cambiados sus nombres para facilitarle la labor al editor de contenido web y editados, si fuese necesario, vamos a establecer su disposición (layout).
Para ello, pulsamos la página y escogemos el botón de la tabla: Editar opciones de sección.
Desde esta opción vamos a poder:
- Elegir el tipo de distribución de diseño de la sección, mostrando los widgets:
- En columnas: Cada widget en su propia fila, ocupando el 100% de la misma.
- En filas, donde indicaremos, para cada tipo de dispositivo, cuantos widgets se van a ver por fila. De esta manera, se distribuirán de forma responsive.
- Personalizado, donde indicaremos exactamente la proporción de línea que ocupa cada widget, dependiendo del tipo de dispositivo utilizado. Esta es la opción que a nosotros nos interesa.
- El fondo, por si queremos cambiar el color o poner una imagen de fondo en la sección.
- Dimensiones, para establecer los márgenes entre widgets, su ancho y su altura mínima.
Vamos a escoger la opción de Diseño - Personalizado. Ahí veremos nuestros widgets (que podemos reubicar arrastrándolos donde corresponda) y lo que ocupa cada uno de ancho de pantalla, dependiendo del tipo de dispositivo/dimensión de pantalla. En nuestro caso, tanto los títulos como las noticias ocuparán siempre todo el ancho, mientras que la imagen de marca y el texto explicativo se distribuirán en la misma línea (ocupando el texto el mismo o más espacio que la imagen).
Grabamos y pulsamos el botón de publicar, en la parte superior derecha.
Y escogemos publicar y abrir para ver el resultado.
Ojo, debemos recordar que cualquier cambio que hagamos, para hacerlo efectivo, siempre debemos pulsar en publicar. Por defecto, SAP CP nos informa de cambios poniendo un asterisco sobre el icono de publicación. En este caso no lo había hecho porque todavía estaba offline, pero al publicarlo por primera vez, lo pasa automáticamente a activo.
El resultado será el siguiente:
Aún muy lejos de lo que queremos conseguir, pero ya al menos tenemos el formato de la página inicial.
Como último detalle
Podemos facilitar el acceso al sitio web con una url más intuitiva, en Opciones y editando las propiedades del sitio para asignarle un alias más sencillo.
Siguiente paso...
Después de asignar los elementos y distribuirlos, vamos a modificar los textos e imágenes. De ello se puede encargar un perfil específico, el editor de contenidos web. Pero, para eso, habrá que esperar al siguiente artículo.
Buen post :D aunque me quedo una duda, esto esta relacionado con los anteriores? los de "Integrar OpenUI5 en nuestro blog"
ResponderEliminarNo, no está relacionado. Aquella serie era para poder usar OpenUI5 en cualquier web, en mi caso en particular con Blogger.
EliminarEsta vez es como montar el portal que nos ofrece SAP en su Cloud Platform, pero no el portal Fiori Lauchpad sino un portal genérico, una página web al uso. La anterior serie era un tema más de desarrollo y está de administración.