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:

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

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ť.

Senior SAP Basis Consultant

Základné informáciePozícia: SAP Basis Consultant Pracovný pomer:  TPP, Živnosť Miesto práce: Pezinok, Home-Office Plat: od 3000+ EUR/Brutto/mesačnePopis práceposkytovanie služby inštalácie, konfigurácie,...

DBA Admin

Základné informáciePozícia: DBA Admin Pracovný pomer:  TPP, Živnosť Miesto práce: Pezinok, Home-Office Plat: od 2400 - 4000+ EUR/Brutto/mesačnePopis práce praca s databázovými...

Junior Technical Writer

Basic informationPosition: Junior Technical Writer Contract type: Full-Time employee Location: Bratislava, on-site Salary: from 1000 - 1400 EUR/ BruttoResponsibilities:Interviewing technical personnel...

QA/Testing Specialist – Automated Testing

Základné informáciePozícia: QA/Testing Specialist - Automated Testing Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: 1500 - 1900 EUR/Brutto/mesačnePopis prácenaplánovať a...

DevOps/SysAdmin Tech Lead

JOB Position: DevOps/SysAdmin Tech Lead Contract type: Full-time Location: Bratislava, on-site Salary: 3000 - 4000+ EUR/BruttoResponsibilities:team/tech leadership, prioritisation, 2 team members independent...

Junior/Senior Full Stack Developer / WEB Development for 150 countries

Basic informationPosition: Full Stack Developer Contract type: Full-Time employee or Contractor Location: Vienna (2-3 Days/Week On-Site) / 1 hour drive from...

Agile Project Manager / Scrum Master

JOB Position: Agile Project Manager / Scrum Master Contract type: TPP, Contract Location: Bratislava, Prague, Vienna Salary Junior: 1500 EUR/Brutto Salary Senior: 2200 EUR/Brutto Rate:...

Vieme kto je IT BLOGGER 2019

Súťaž IT Blogger 2019 sme v piatok 6.12.2019 oficiálne ukončili a prinášame vám vyhodnotenie a rozdáme ceny....

Milada Kováčová: Práca v IT nie je len o programovaní

Tentokrát sme sa rozhodli vyspovedať ďalšiu ženu v IT. Milada Kováčová pracuje v slovenskej softvérovej spoločnosti SOFTEC,...

Projekty prvej výzvy fondu SK-NIC sú schválené!

Po uzavretí výzvy Fondu SK-NIC na podporu malých projektov nás hodnotiaca komisia...

Čítaj viac:

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ť.