ERYEM
CAMPS
Dashboard Yammer sous SharePoint
1
Présenté par :
Barbar MITRI bmitri@eryem.com
Philippe SFEIR psfeir@eryem.co...
Plan
1. Présentation du sujet
1. Concept de Single Page Application
2. Architecture applicative
2. Démo et architecture pr...
Single Page Application
3
Une nouvelle façon d’envisager la navigation web
Serveur Web
Cloud
navigateur client
Chargement ...
4
Architecture applicative
4
Un niveau de portabilité inédit !!
1°)
2°)
3°)
6°)
Serveur
SharePoint
Poste client
NodeJS :
M...
Démo
5
6
Architecture du projet Durandal
7
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Durandal</title>
<!– références vers fichiers css -->
<script type="text...
8
main.js requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/...
9
shell.js
define(['plugins/router', 'durandal/app'], function (router, app) {
return {
router: router,
search: function()...
10
chart.js
var activate = function () {
jQuery.when(services.getStatMsgByUser(), services.getStatFileByUser()).then(funct...
11
Chart.html
<section>
<h2 data-bind="html: displayName"></h2>
<table>
<tr>
<td>
<div id="msgChart" style="width: 900px; ...
Conclusion
12
Avec DurandalJS on peut construire des applications
JavaScript dynamiques et simples.
Inclus : JQuery , Knoc...
Références
13
Tutoriels et exemples javascript – jQuery:
http://www.w3schools.com/
Tutoriels et exemples knockoutJS (MVVM)...
Prochain SlideShare
Chargement dans…5
×

Application SharePoint "Tableau de bord Yammer"

684 vues

Publié le

Exemple d'application SharePoint sur le modèle Single Page Application (SPA) utilisant le framework DurandalJS pour afficher un tableau de bord de données Yammer.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Application SharePoint "Tableau de bord Yammer"

  1. 1. ERYEM CAMPS Dashboard Yammer sous SharePoint 1 Présenté par : Barbar MITRI bmitri@eryem.com Philippe SFEIR psfeir@eryem.com Levallois 15/01/2015
  2. 2. 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
  3. 3. 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. 4. 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
  5. 5. Démo 5
  6. 6. 6 Architecture du projet Durandal
  7. 7. 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. 8. 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. 9. 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. 10. 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. 11. 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>
  12. 12. Conclusion 12 Avec DurandalJS on peut construire des applications JavaScript dynamiques et simples. Inclus : JQuery , Knockout et RequireJS Riche en fonctionnalités et multiplateforme
  13. 13. 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/

×