SharePoint Single Page Applications (SPA)

SharePoint Single Page Applications (SPA)

In the context of building a dynamic website, with an enviable aesthetic and that adjusts today websites, emerges the idea of combining Single Page Applications and SharePoint, in a single page web that gives the end-user a better User experience, navigability, and of course compatibility with the different devices we use daily (mobile phones, tablets, etc.).

Single Pro

Using simply MS SharePoint 2016 as a backend, and no more than HTML 5, CSS 3 and the JavaScript Framework you prefer, we have the autonomy to build our website, forgetting Master Pages, Page Layouts, WebParts, and so on, but consuming all API services that SharePoint provides us.

Responsive Design

This way, we can: easily manage the contents of our website from lists and asset libraries (Documents and Images), handle different user profiles, allow search of web content, without forgetting to maintain an attractive user experience.

 

Contenidos del sitio

Example:

Next we will detail a likely example of application of the above described:

Ejemplo

An HTML page and a menu with three links is created, when one of them is selected it redirects us to one of the following sections, on the same page:

Highlighted News

It consists of an image slider, each image with its title and description. When selecting the image we access another page with the detail of the corresponding new.

It consumes data from a list using the SharePoint REST API and displays them using Angular JS, as shown in the example below:

JS

Script1

HTML

Html

OBSERVATION: for the next component, the development is similar.

Latest News

This section presents news in a mosaic arrangement, adapting the design according to the amount of news to be shown. When the user selects one, he access the content thereof.

Noticias



 

En el marco de construir un sitio web dinámico, de envidiable estética y que se adapte a la web de los tiempos que corren, surge la idea de combinar Single Page Applications y SharePoint, en una web de una sola página que brinda al usuario una mejor experiencia de uso, navegabilidad, y por supuesto compatibilidad con los diferentes dispositivos que usamos diariamente (Teléfonos móviles, tablets, etc).

Single Pro

Utilizando MS SharePoint 2016 únicamente cómo backend, y no más que HTML 5, CSS 3 y el Framework Javascript de su preferencia, nos da la libertad de construir nuestro sitio web, olvidándonos de Páginas Maestras, Diseños de Página, WebParts, y demás, pero utilizando todos los servicios de la API que SharePoint nos provee.

Responsive Design

De esta manera, podremos: administrar los contenidos de nuestra web fácilmente desde listas y Bibliotecas de Activos (Documentos e Imágenes), manejar diferentes perfiles de usuario, permitir la búsqueda de contenido en la web, sin olvidar mantener una experiencia de usuario agradable.

 

Contenidos del sitio

Ejemplo:

A continuación detallaremos un posible ejemplo de aplicación de lo antes descripto:

Ejemplo

Se crea una página HTML y un menú con tres vínculos, cuando seleccionamos uno de ellos nos dirige en la misma página a una de las siguientes secciones:

Noticias Destacadas

Consiste en un slider de imágenes, cada una con título y descripción. Al cliquear sobre la imagen accedemos a otra página con el detalle de la noticia que corresponda.

Consume los datos de una lista mediante API REST de SharePoint y los presenta utilizando Angular JS, como se muestra en ejemplo que sigue:

JS

Script1

HTML

Html

NOTA: Para el siguiente componente, el desarrollo es similar.

 

Noticias Recientes

Esta sección presenta noticias en formato mosaico, adaptando el diseño de acuerdo a la cantidad a mostrar. Cuando el usuario cliquea sobre una accede al contenido de la misma:

Noticias

Share This
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn