Application SharePoint "Tableau de bord Yammer"

ERYEM
CAMPS
Dashboard Yammer sous SharePoint
1
Présenté par :
Barbar MITRI bmitri@eryem.com
Philippe SFEIR psfeir@eryem.com
Levallois 15/01/2015

Plan
1. Présentation du sujet
1. Concept de Single Page Application
2. Architecture applicative
2. Démo et architecture projet
3. Conclusion
4. Références
2

Single Page Application
3
Une nouvelle façon d’envisager la navigation web
Serveur Web
Cloud
navigateur client
Chargement de la
page d’accueil:
charge une fois pour
toutes l’ensemble
des fichiers html, js,
css
Action utilisateur: insertion dynamique de
données dans la page, jamais de
rechargement complet de la page

4
Architecture applicative
4
Un niveau de portabilité inédit !!
1°)
2°)
3°)
6°)
Serveur
SharePoint
Poste client
NodeJS :
Module développé par
Barbar MITRI

6
Architecture du projet Durandal

7
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Durandal</title>
<!– références vers fichiers css -->
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['c
orechart']}]}"></script>
</head>
<body>
<div id="applicationHost">
<div class="splash">
<div class="message">
Je charge le contenu statique: pages html, scripts js, fichier css, <b> UNE FOIS POUR TOUTES
!!</b>
</div>
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
<script src="lib/require/require.js" data-main="app/main"></script>
</body>
</html>

8
main.js requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1',
'services': '../app/services',
'async': '../lib/durandal/js/plugins/async',
'propertyParser': '../lib/durandal/js/plugins/propertyParser',
'goog': '../lib/durandal/js/plugins/goog'
}
});
define('gmaps', ['async!http://maps.google.com/maps/api/js?sensor=false'],
function () {
console.log('Google maps loaded');
return window.google.maps;
});
define(['durandal/system', 'durandal/app', 'durandal/viewLocator'], function
(system, app, viewLocator) {
//>>excludeStart("build", true);
system.debug(true);
//>>excludeEnd("build");
app.title = 'Durandal Starter Kit';
app.configurePlugins({
router:true,
dialog: true
});
app.start().then(function() {
viewLocator.useConvention();
app.setRoot('viewmodels/shell', 'entrance');
});
});

9
shell.js
define(['plugins/router', 'durandal/app'], function (router, app) {
return {
router: router,
search: function() {
//It's really easy to show a message box.
//You can add custom options too. Also, it returns a promise for the user's response.
app.showMessage('Search not yet implemented...');
},
activate: function () {
router.map([
{ route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
{ route: 'flickr', moduleId: 'viewmodels/flickr', nav: true },
{ route: 'yamhisto', moduleId: 'viewmodels/yamhisto', nav: true },
{ route: 'map', moduleId: 'viewmodels/mapgoogle', nav: false },
{ route: 'chart', moduleId: 'viewmodels/chart', nav: true },
{ route: 'userStats/:UserId', moduleId: 'viewmodels/userStats', nav: false }
]).buildNavigationModel();
return router.activate();
}
};
});

10
chart.js
var activate = function () {
jQuery.when(services.getStatMsgByUser(), services.getStatFileByUser()).then(function
(msgByUser, fileByUser) {
msgArray[0] = ['Nom', 'Nombre de messages'];
fileArray[0] = ['Nom', 'Nombre de fichiers partagés'];
jQuery.each(msgByUser[0], function (index, item) {
msgArray[index + 1] = [item.name, item.number_msg];
});
jQuery.each(fileByUser[0], function (index, item) {
fileArray[index + 1] = [item.name, item.number_file];
});
});
};
var compositionComplete = function (view, parent) {
var msgData = google.visualization.arrayToDataTable(msgArray);
var fileData = google.visualization.arrayToDataTable(fileArray);
var msgOptions = {
title: 'Nombre de messages par utilisateur'
};
var fileOptions = {
title: 'Nombre de fichiers partagés par utilisateur'
};
var msgChart = new
google.visualization.PieChart(document.getElementById('msgChart'));
msgChart.draw(msgData, msgOptions);
var fileChart = new
google.visualization.PieChart(document.getElementById('fileChart'));
fileChart.draw(fileData, fileOptions);
};

11
Chart.html
<section>
<h2 data-bind="html: displayName"></h2>
<table>
<tr>
<td>
<div id="msgChart" style="width: 900px; height: 500px;"></div>
</td>
<td>
<div id="fileChart" style="width: 900px; height: 500px;"></div>
</td>
</tr>
</table>
</section>

Conclusion
12
Avec DurandalJS on peut construire des applications
JavaScript dynamiques et simples.
Inclus : JQuery , Knockout et RequireJS
Riche en fonctionnalités et multiplateforme

Références
13
Tutoriels et exemples javascript – jQuery:
http://www.w3schools.com/
Tutoriels et exemples knockoutJS (MVVM):
http://learn.knockoutjs.com/
Exemples DurandalJS:
http://durandaljs.com/
Proxy : http://nodejs.org/

Application SharePoint "Tableau de bord Yammer"

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Application SharePoint "Tableau de bord Yammer"

Notas do Editor