En este artículo vamos a crear un sitio de publicación de SharePoint Online y una lista en su interior. Después crearemos una página e insertaremos código React Js para leer los elementos de la lista y pintarlos, finalmente protegeremos la página y la publicaremos.

Abrimos primero el centro de administración de SharePoint Online logandonos en nuestro tenant de Office 365 https://portal.office.com

Entramos en la administración de sitios en: https://yourtenantprefix-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/siteManagement. Y damos a crear para crear un nuevo sitio.

Al crear este sitio se creará también una colección de sitios, que podemos ver en https://yourtenantprefix-admin.sharepoint.com/_layouts/15/online/SiteCollections.aspx

Después vamos a la opción de ‘otras opciones‘ y en la plantilla elegimos «Portal de publicación«.

Tardará un rato en provisionarlo nuestro SharePoint Online, una vez creado ya podremos entrar y crear la lista para la demo.

Creamos una lista llamada ‘MiLista‘ y agregamos una nueva columna de tipo opción, llamada ‘Opciones‘ (que original ;)). Después añadimos varios items a la lista creada.

Finalmente creamos una página y la editamos. En el menú ribbon seleccionamos la pestaña de Insertar y pinchamos en ‘Còdigo para insertar‘.

Insertamos el siguiente código:
(interesante ver como llamamos al Api para obener la lista con: /sites/MiPortalPubli/_api/web/lists/getbytitle(‘MiLista’)/items)

<script src=»https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js»></script>
<div id=»renderizarContenido»></div>
<script type=»text/babel»>
var tableStyle = {
display: «table»,
marginLeft : «40px»
}
var panelStyle = {
background: «#91A4A7»
}

var divStyle = {
background: «#eee»,
padding: «20px»,
margin: «20px»
};

var headerCaptionStyle = {
background: «#4B6978»,
display: «table-cell»,
border: «solid»,
textAlign : «center»,
width : «500px»,
height : «30px»,
paddingTop : «3px»,
color : «white»,
marginLeft : «80px»,
display : «block»
};

var headerStyle = {
background: «#4B6978»,
display: «table-cell»,
border: «solid»,
textAlign : «center»,
width : «100px»,
height : «30px»,
paddingTop : «10px»,
color : «white»
};

var tableCaptionStyle = {
background: «#c6e2ff»,
display: «block»,
fontSize : «20px»,
fontWeight: «bold»,
border: «solid»,
textAlign : «center»,
width : «650px»,
height : «30px»,
paddingTop : «3px»,
borderRadius: «25px»,
marginLeft : «30px»,
marginTop : «20px»
}


var rowCaptionStyle = {
width : «600px»,
display : «table-caption»,
background: «#4B6978»,
textAlign : «center»,
padding: «20px»,
fontSize : «20px»,
fontWeight :»bold»,
color : «white»
};

var rowStyle = {
display : «table-row»,
background: «#eee»,
padding: «20px»,
margin: «20px»,
fontWeight :»bold»
};

var CellStyle = {
display: «table-cell»,
border: «solid»,
borderColor : «white»,
textAlign : «center»,
width : «100px»,
height : «30px»,
paddingTop : «10px»

}

class ReactSP extends React.Component{
debugger;
constructor(){
super();
this.state = {
items: [
{
«Id»: «»,
«Title»: «»,
«Opciones»: «»
}
]
};

}

componentDidMount() {
debugger;
this.RetrieveSPData();
}

RetrieveSPData(){
var reactHandler = this;

var spRequest = new XMLHttpRequest();
spRequest.open(‘GET’, «/sites/MiPortalPubli/_api/web/lists/getbytitle(‘MiLista’)/items»,true);
spRequest.setRequestHeader(«Accept»,»application/json»);

spRequest.onreadystatechange = function(){

if (spRequest.readyState === 4 && spRequest.status === 200){
var result = JSON.parse(spRequest.responseText);

reactHandler.setState({
items: result.value
});
}
else if (spRequest.readyState === 4 && spRequest.status !== 200){
console.log(‘Error Occurred !’);
}
};
spRequest.send();
}

render(){
debugger;
return (
<div style={panelStyle}>
<br></br>

<br></br>
<div style={tableCaptionStyle} > Demo : Obtener datos de SharePoint utilizando React JS </div>
<br></br>

<div style={tableStyle} >
<div style={rowCaptionStyle} > Mi Lista </div>
<div style={rowStyle} >
<div style={headerStyle}>Id</div>
<div style={headerStyle}>Título</div>
<div style={headerStyle}>Opciones</div>
</div>

{this.state.items.map(function(item,key){

return (<div style={rowStyle} key={key}>
<div style={CellStyle}>{item.Id}</div>
<div style={CellStyle}>{item.Title}</div>
<div style={CellStyle}>{item.Opciones}</div>

</div>);
})}

</div>
</div>

);
}
}

ReactDOM.render(<ReactSP />, document.getElementById(‘renderizarContenido’));
</script>

Pulsamos en guardar, y después en proteger y publicar (ya que es un sitio de publicación, no de colaboración) y podemos ver el resultado: