Blog SharePoint ako rozšírenie do Chrome - “Snadno a rychle“, časť II.

SharePoint ako rozšírenie do Chrome – “Snadno a rychle“, časť II.

Pokračovanie blogu o tom, ako si naprogramovať Chrome rozšírenie, ktoré po kliknutí dokáže zobraziť zoznam našich spolupracovníkov z Intranetu v SharePointe. Zobrazí ich profilovú fotografiu a po prejdení myšou sa zobrazia aj ostatné dáta uložené v zozname.

V predchádzajúcej časti sme si povedali, že údaje o spolupracovníkoch, resp. firemných kontaktoch, sú obvykle uložené v SharePointe ako špeciálny zoznam typu „Contacts“. Zoznamy tohto typu sa dajú štandardne pripojiť k Outlooku, ktorý sa potom stane ďalším klientom SharePointu (okrem Internetového browsera). Pripojenie k Oulooku aktivujeme nasledovne…

…potom sa kontakty zobrazia v Outlooku ako „Other Contacts“:

 

A presne táto možnosť ma inšpirovala k tomu, aby som sa pokúsil vytvoriť niečo podobné aj do môjho obľúbeného prehliadača – Chrome. K dátam sa moje nové rozšírenie dostane pomocou už v prvej časti spomínaného protokolu REST, ktorý je v SharePointe štandardne podporovaný od verzie 2010.

Zoznam kontaktov ako plugin pre Chrome by potom mohol vyzerať nasledovne…

 …a detail kontaktu v Chrome ak na moju fotku ukážem myšou:

Dáta o mojej osobe ktoré sú uložené v zozname typu “Contacts” ako “ZoznamZamestnacov”. Moje ID je 4 a tak k dátam o mojej osobe sa dostanem pomocou RESTu: http://sharepoint-intranet/_vti_bin/listdata.svc/ZoznamZamestnancov(4)

Webová služba odpovie vo forme XML, ktorý sa priamo v prehliadači zobrazí nasledovne:

ch5

Teraz všetky doterajšie poznatky o protokole REST a Chrome rozšíreniach “zlepíme” dokopy a vytvoríme úplne nové rozšírenie. Budeme na to potrebovať práve 4 súbory (použil som súbory z Google tutoriálu pre vytvorenie prvého rozšírenia):

  1. icon.png – obrázok, ktorý reprezentuje štart rozšírenia, čiže miesto, kam sa klikne.
  2. manifest.json – popisuje obsah balíka rozšírenia.
  3. popup.html – HTML stránka ako obálka pre JavaScript, ktorý cez REST prečíta a zobrazí dáta zo SharePointu.
  4. popup.js – JavaScript, ktorý cez REST prečíta a zobrazí data zo SharePointu.

Obsah jednotlivých súborov si teraz pozrieme podrobnejšie.

icon.png 

 

{
  "manifest_version": 2,
  "name": " Contacts from Sharepoint Intranet ",
  "description": "Contacts from Sharepoint Intranet",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [    
    "https://sharepoint-intranet/"
  ]
}

manifes.json

 

popup.html

<!doctype html>
<html>
  <head>
    <title>Together</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
      }
      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 85px;
        height: 105px;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

popup.js

var contactsgenerator = {

  requestIMG: function() {    
    this.showPhotosIMG_(this);    
  },  
 showPhotosIMG_: function (e) {
    for (var i = 1; i <= 15; i++) {
          var img = document.createElement('img');
          img.src = this.constructContactsURL_(i);
          img.setAttribute('alt', 'Contacts from Sharepoint Intranet');
          img.setAttribute('title', this.getMOSS_(i, 'ZozmanZamestnancov'));        
          document.body.appendChild(img);
    }
  },  

  constructContactsURL_: function (i) {
          return "https://sharepoint-intranet/Lists/ZoznamZamestnancov/Attachments/"+i+"/ContactPicture.jpg"
    },  	

   getMOSS_: function(i, listname) {
	var xhReq = new XMLHttpRequest();
	xhReq.open("GET", "https://sharepoint-intranet/_vti_bin/listdata.svc/" + listname + "(" + i + ")", false);
	xhReq.send(null);
	var serverResponse = xhReq.responseXML;         
var fn=serverResponse.getElementsByTagName("FullName")[0].childNodes[0].nodeValue;      
try {         
     var mn=serverResponse.getElementsByTagName("MobileNumber")[0].childNodes[0].nodeValue;
     var mail=serverResponse.getElementsByTagName("EMailAddress")[0].childNodes[0].nodeValue;
}  catch (err) {
      return fn;
}
      return fn+" "+mn+" "+mail;
	}
     };
  document.addEventListener('DOMContentLoaded', function () {
	contactsgenerator.requestIMG();
   }
);

JavaScript číta prostredníctvom REST-u serverom vrátené dáta vo formáte XML pomocou funkcie getMOSS, ktorá ich zároveň parsuje do premenných ako mn-Mobile Number, alebo fn-Full Name. Funkcia showPhotosIMG vytvára obrázky kontaktov s dátami ako atribút ‘title’, pričom ako ‘src’ obrázka sa použije jpg kontaktu zo ShrarePointu funkciou constructContactsURL. Tieto sa potom pridajú do hostiteľského HTML pomocou document.body.appendChild(img).

V tomto prípade sa číta konštantných 15 kontaktov. Úplne správne by bolo ešte treba zistiť počet kontaktov v zozname, napríklad pomocou ďalšieho REST volania:
https://sharepoint-intranet/_vti_bin/Listdata.svc/ZoznamZamestnancov/$count. Výsledok tohto volania by sme potom mohli uložiť do premennej a tú použiť namiesto konštanty 15. Ale to už nechám na čitaeľov.
No, a to je v podstate všetko, čo sme potrebovali. Ešte samozrejme rozšírenie nainštalovať a vyskúšať. Nainštalovanie nášho nového rozšírenia vykonáme v záložke „Rozšírenia“ pomocou “Načítať rozbalené rozširenie”. V tomto prípade sú všetky 4 zdrojové súbory rozšírenia uložené v adresári  X:\Temp\CHE-Tog.

 

Pri písaní týchto článkov som použil:

–       SharePoint Server 2010 a 2013
–       Chrome, verzia 31.0.1650.63 m
–       Eclipse Kepler, ako editor JavaScriptu.


Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.



Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.

DevOps Enginner / Online Bezpečnosť

Pre IT spoločnosť, ktorá sa venuje online bezpečnosti hľadáme do tímu DevOps Medior Engineer. Spoločnosť má 20-členný tím s...

Senior Java Consultant

Hľadáš, kam by si sa posunul? Možno ťa táto práca zaujme. Ide o Senior JAVA konzultanta v nadnárodnej IT...

Ruby on Rails Junior-Medior Developer / REMOTE

Je tvoj život príliš v “koľajniciach”? Urob si odbočku a skús sa pridať do tímu Ruby on Rails developerov.Ide...

JS Sencha Senior Developer / Homeoffice

Máš rád svoju slobodu, pracuješ na projektoch, ideálne remote? Pre medzinárodnú softwarovú spoločnosť hľadáme JS Sencha Developera.Po dvoch týždňoch...

Junior Angular Developer / REMOTE

Pre nášho partnera hľadáme ITčkára na pozíciu Angular Developer. Spoločnosť sa venuje vývoju platformy pre firmy na znižovanie nákladov...

Frontend Medior Developer

Medzinárodná IT spoločnosť, ktorá vyvíja finančný softvér.Práca je v Bratislave na TPP. Odmena sa pohybuje od 2000+ EUR.Tvoje úlohy...

.NET Core Medior Developer / REMOTE

Svoju budúcnosť máš vo svojich rukách, skús to teraz ako .NET Core developer. Ide o startup projekt, ktorý vyvíja...

GIRL ́S DAY 2020: Už po siedmy raz môžu stredoškoláčky nahliadnuť do IT firiem po celom Slovensku.

Občianske združenie Aj Ty v IT už siedmy rok prepája IT firmy a organizácie so stredoškoláčkami po...

DIGITALEUROPE: Na digitalizáciu pôjde z plánu obnovy až pätina prostriedkov. Ako zareaguje Slovensko?

Výzva v podobe zníženej globálnej konkurencieschopnosti, ako aj kríza spojená s pandémiou postavili Európu...

OpenSlava 2020 tentokrát online!

OpenSlava 2020 je 8. ročník úspešnej konferencie pre IT komunitu na Slovensku...

Čítaj ďalej:

Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.

Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.