Emanuele Bartolesi

Office 365, SharePoint e ASP.NET

L’importanza di avere il Reset.css

Chi ha iniziato da poco a lavorare con i CSS non conosce l’importanza di avere il file “reset.css”.
Quando bisogna realizzare applicazioni o siti web che devono funzionare su qualsiasi (diciamo quasi tutti) browser e proviamo a visualizzare le pagine in essi ci accorgeremo sicuramente di alcune differenze di spaziature, di font e di grandezze “sballate”.
E’ qui che viene comodo e ci risparmia diversi mal di testa un file CSS che resetta queste impostazioni.
Molti framework CSS, come Bootstrap o Foundation, hanno già incluse queste impostazioni. Nel caso invece si sia deciso di crearsi un CSS da zero, dobbiamo crearcelo.

Di default tutti i browser aggiungono dei margini o del padding a molti elementi. Per esempio Firefox e Internet Explorer aggiungono un margine di 6px al body.
Per ovviare a questo problema, basta azzerare i margini, il padding e il border a questi elementi.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, a, fieldset, input, table, th, td
{
    margin: 0; padding: 0; outline: none; border: 0;
}

Un altro problema che possiamo riscontrare, è che i font di alcuni elementi (come h1,h2, ecc) possono risultare di dimensioni diverse. Anche in questo caso, la soluzione è riportare la grandezza a un default.

h1, h2, h3, h4, h5, h6
{
    font-size: 100%;
}

Anche per quanto riguarda le liste puntate, il comportamento dei vari browser cambia di volta in volta.
Meglio azzerarlo, per poi andarlo a ridefinire nel css customizzato per il sito in questione.

ul, ol
{
    list-style: none;
}

Anche il controllo img subisce un altro problema. In alcuni browser è presente un bordo di default. Meglio azzerare anche questo.

img
{
    border: 0;
}

A questo punto il nostro file “reset.css” è pronto per essere inserito nel nostro sito ed avere una copertura minima dei valori più importanti che cambiano nei vari browser.
Qui il file completo di quello che abbiamo appena creato:

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, a, fieldset, input, table, th, td
{
    margin: 0; padding: 0; outline: none; border: 0;
}

h1, h2, h3, h4, h5, h6
{
    font-size: 100%;
}

ul, ol
{
    list-style: none;
}

img
{
    border: 0;
}
Se vogliamo comunque essere sicuri di avere una copertura massima di tutti i tag, è possibile utilizzare uno dei file di reset presenti sul sito http://www.cssreset.com/.
Io personalmente consiglio YUI 3 di Yahoo! perchè lo trovo il più completo di tutti.

dotNETpodcast e NTTSight Academy

La settimana scorsa è stata piena di impegni, dal rientro da Seattle a due eventi importanti.
Il primo appuntamento è stato l’uscita del mio podcast su dotnetpodcast relativa a Office 365. Una breve introduzione su questo mondo di cui si sente tanto parlare ultimamente e se ne sentirà parlare ancora per un bel pò.
Potete trovare il link alla mia puntata a questo link: http://www.dotnetpodcast.com/show/card/8. Dalla stessa pagina è anche possibile scaricare la puntata in formato mp3.

Il secondo appuntamento della settimana è stato il 12 novembre con il secondo workshop marchiato NTTSight Academy.
Anche in questo caso ho parlato di sviluppo di applicazioni per Office, Office 365, SharePoint e le API di Office 365.
C’è stato molto interesse da parte del pubblico, sia durante la sessione, che dopo durante l’aperitivo.
Potete trovare il video della sessione a questo link: NTTSight Academy - App for Office 365 and SharePoint 2013.
Le slide invece le ho pubblicate come sempre su SlideShare al seguente link: http://www.slideshare.net/emanuelebartolesi/nttsight-academy-app-for-office-365-and-sharepoint-2013

Ci vediamo l’11 Dicembre per il terzo appuntamento di NTTSight Academy in cui parleremo di Social Media Listening.

Abilitare il SideLoading in un sito SharePoint/Office 365

Se provate a fare un deploy di un’app provider hosted o SharePoint hosted in un sito di SharePoint online di tipo diverso da Developer Site, riceverete l’errore: “Error occurred in deployment step 'Install app for SharePoint': Sideloading of apps is not enabled on this site”.

Per ovviare a questo errore è sufficiente abilitare il sideloading sul vostro sito.
Per farlo sono necessari tre semplici step.

  1. Scaricate e installate la console powershell per SharePoint Online (se già non la avete installata): http://www.microsoft.com/en-us/download/details.aspx?id=35588
  2. Avviate la console come amministratore
  3. Eseguite lo script seguente:
$programFiles = [environment]::getfolderpath("programfiles")
add-type -Path $programFiles'\SharePoint Online Management Shell\Microsoft.Online.SharePoint.PowerShell\Microsoft.SharePoint.Client.dll'
Write-Host 'Insert information for Site'
$siteurl = Read-Host "Site Url"
$username = Read-Host "User Name"
$password = Read-Host -AsSecureString "Password"
 
try
{
    [Microsoft.SharePoint.Client.ClientContext]$ClientContext = New-Object Microsoft.SharePoint.Client.ClientContext($siteurl)
    $ClientContext.Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $password)
    $site = $ClientContext.Site;

    $sideLoadingGuid = new-object System.Guid "AE3A1339-61F5-4f8f-81A7-ABD2DA956A7D"
    $site.Features.Add($sideLoadingGuid, $true, [Microsoft.SharePoint.Client.FeatureDefinitionScope]::None);
     
    $ClientContext.ExecuteQuery();
     
    Write-Host -ForegroundColor Green 'SideLoading feature enabled :)'
}
catch
{ 
    Write-Host -ForegroundColor Red 'Error ' $siteurl, ':' $Error[0].ToString();
}

Potete trovare lo script anche su gist a questo link, oppure scaricarlo da qui.

SharePoint 2013 App Model Succintly

Da qualche giorno è uscito un nuovo libro della serie Succintly molto interessante e totalmente gratuito.
Il libro in questione è stato scritto da Fabio Franzini, MVP su SharePoint.
Potete scaricarlo attraverso questo link: http://www.syncfusion.com/resources/techportal/ebooks/sharepoint

E’ un libro molto utile perchè vuole iniziare a sviluppare applicazioni per SharePoint 2013 o Office 365 ed ha almeno un pò di nozioni di HTML5 e Javascript o .NET.

Di seguito il sommario:

  • Introducing the SharePoint 2013 Development Models
  • Preparing the Development Environment
  • The App Model Architecture Overview
  • SharePoint-Hosted Apps
  • Provider-Hosted Apps
  • Security Model Overview
  • Client-Side Object Model (CSOM)
  • REST/OData Service
  • Cross-Domain and Remote Service Calls
  • Creating User Experience (UX) for Apps
  • App Deployment

Buona programmazione. :)

sharepointsuccintly

Risolvere l’errore “violates the constraint of type parameter 'T'”

Sto realizzando molte App per Office 365 in questo ultimo periodo.
Per eseguire il provisioning dei dati utilizzo il Client Object Model.
Con gli ultimi aggiornamenti di SDK e Visual Studio è possibile ottenere l’errore: Method Microsoft.SharePoint.Client.ClientRuntimeContext.Load: type argument 'Microsoft.Online.SharePoint.XXXX' violates the constraint of type parameter 'T' quando si cerca di caricare qualche risorsa.
Questo è dovuto al fatto che, se state usando SharePoint online, dovete referenziare la versione 16.0 della DLL Microsoft.SharePoint.Client.dll e non la 15.

Per sapere se avete installato la versione 16 potete navigare sul vostro PC nel path: C:\Program Files\SharePoint Client Components e controllare che esista la cartella “16.0\Assemblies\”.

Rilasciate le Office 365 API in versione ufficiale

Stamani sono uscite dalla preview le API per Office 365.
Con queste API è possibile integrare i servizi offerti da Office 365 come emails, contatti, calendari e files nelle nostre applicazioni.
Con questo nuovo servizio si aprono scenari molto interessanti e sopratutto possiamo creare applicazioni veramente integrate fra loro.

Se non avete ancora installato questo tool, è possibile farlo attraverso questo link: https://visualstudiogallery.msdn.microsoft.com/7e947621-ef93-4de7-93d3-d796c43ba34f
Una volta installato cliccando con il tasto destro sul vostro progetto, potete trovare la nuova voce di menu “Add –> Connected Service”.
A questo punto potete scegliere il servizio che volete integrare e fare il login con le credenziali del vostro ambiente di sviluppo per Office 365.

I progetti al momento supportati sono i seguenti:

  • .NET Windows Store Apps
  • .NET Windows Store Universal Apps
  • Windows Forms Applications
  • WPF Applications
  • ASP.NET MVC Web Applications
  • ASP.NET Web Forms Applications
  • Xamarin Android and iOS Applications
  • Multi-device Hybrid Apps
  • Windows Phone 8.1 Apps

Molto interessanti sono i progetti Universal Apps e Xamarin. :)

Nei prossimi giorni pubblicherò qualche articolo a riguardo.

Chiamare una stored procedure di Oracle da Access

Oggi un mio amico mi ha chiesto come fare per chiamare una stored procedure di Oracle da VBA in Access.
Ho dovuto rispolverare un pò di reminescenze del passato, ma ce l’ho fatta.
Facendo un pò di ricerche su internet, alla fine è venuto uno snippet come quello qua sotto.

Function CallSPOracle() As Boolean

   Dim DBOracle As Database
   Dim SPOracle As QueryDef

   On Error GoTo Err_Execute
   
   Set DBOracle = CurrentDb()   
   Set SPOracle = db.CreateQueryDef("")
   
   SPOracle.Connect = "ODBC;DSN=DSN_NAME;UID=USER;PWD=PASSWORD;SERVER=SERVER_NAME"
   SPOracle.SQL = "BEGIN schema.sp; END;"
   SPOracle.ReturnsRecords = False
   SPOracle.ODBCTimeout = 60
   
   SPOracle.Execute
   
   Set SPOracle = Nothing
   
   CallSPOracle = True
   
   Exit Function
   
Err_Execute:
   MsgBox Err.Description
   CallSPOracle = False
   
End Function

Per collegarsi al database ho usato una connessione ODBC che potete creare seguendo i passi indicati qua.
Ovviamente nella stringa di connessione nel codice, basta sostituire i vari placeholder che i parametri giusti.

App per Office 365 e SharePoint 2013 a NTTSight Academy

Nel secondo incontro formativo gratuito di NTTSight Academy, parleremo di App per Office 365 e SharePoint 2013.
Lo speaker questa volta sarò io. :)

Sulla pagina del sito ufficiale, potete trovare il form per registrarvi.

In questa sessione andremo ad analizzare i concetti del nuovo app-model introdotto in SharePoint 2013 e in Office 365. Dopo una breve introduzione su questo modello, mostrerò come aggiungere funzionalità a Office 365 e SharePoint, sfruttando i dati in essi presenti.
In particolar modo farò vedere come sfruttare conoscenze già assimilate negli anni, come ASP.NET MVC, HTML5 e JavaScript, per creare App e pubblicarle nel Cloud o on-premises.

Vedremo inoltre come è possibile trasformare le “vecchie” farm solution in App in poco tempo e “riciclando” il vecchio codice.

Iscrivetevi perchè l’evento è gratuito e i posti sono limitati!

Link al sito e modulo di iscrizione: http://www.nttsight.com/nttsight-academy/

Image

Nasce NTTsight Academy

A metà ottobre inizierà un programma firmato NTTsight a cui ho il piacere di partecipare come ideatore e realizzatore.
Sarà una serie di incontri di due ore sotto forma di sessione, in cui verranno affrontate tematiche riguardanti le ultime tecnologie offerte da Microsoft.
Alla fine di ogni incontro sarà possibile partecipare ad un aperitivo offerto da NTTsight stessa con il contributo di OttimoMassimo.

Il primo incontro (16 ottobre) vedrà come ospite Davide Benvegnù che parlerà di Microsoft Azure Machine Learning e del suo utilizzo durante le attività quotidiane di un'azienda.
Il 12 novembre invece starà a me e vi parlerò dello sviluppo delle App per Office 365 e del loro impiego all’interno delle aziende per migliorarne e ottimizzarne i processi lavorativi, integrati con la intranet.
A dicembre sarà invece la volta di Paola Napolita che ci parlerà di un prodotto recentissimo lanciato da Microsoft: il Microsoft Social Media Listening.

Potete trovare il programma completo all’indirizzo: http://www.nttsight.com/nttsight-academy/ dove potete anche registrarvi ai singoli eventi.
Affrettatevi ad iscrivervi perché i posti sono limitati!

 

logo-nttsight-academy[1]

Materiale WebCast “Tutto su ASP.NET Identity”

Il 15 settembre scorso si è tenuto il webcast targato DotNetToscana su ASP.NET Identity tenuto direttamente da me.
Se non avete avuto la possibilità di guardarlo in diretta, potete trovare il video su YouTube:

Potete trovare le slide su SlideShare all’indirizzo: http://www.slideshare.net/emanuelebartolesi/tutto-su-aspnet-identity e il materiale (comprese le demo) sul nostro sito della community (http://www.dotnettoscana.org/webcast-tutto-su-aspnet-identity.aspx).

That’s all folks!

Convertire una masterpage di SharePoint 2010 in HTML5

Ultimamente sto sviluppando spesso su applicazioni ospitate su SharePoint 2010. Gli sviluppi che però mi vengono richiesti hanno quasi sempre esigenze particolari, come l’inserimento di video, audio, file pdf, direttamente nelle webpart sviluppate.
Alcuni dei tag HTML5 però hanno bisogno che la pagina sia proprio riconosciuta come HTML5.
SharePoint 2010 invece (essendo ormai un prodotto di qualche anno fa) ha le pagine scritte in HTML4.
Effettuare una conversione “semplice” richiede pochi passi, ma permette di utilizzare i nuovi tag HTML5 nelle nuove parti, senza andare a inficiare sulle vecchie parti funzionanti.
Vediamo come fare.

Modificare il DOCTYPE e rimuovere l’attributo xmlns

La prima cosa che dobbiamo fare è modificare il DOCTYPE attuale con quello HTML5 e più precisamente:

<!doctype html>

L’attributo xmlns non è richiesto in HTML5 e quindi possiamo andare a toglierlo, avendo come risultato che il tag <html> abbia questo aspetto:

<html lang="" dir="" runat="server" __expr-val-dir="ltr">

Rimuovere lo slash di chiusura ai tag nell’elemento HEAD

Nell’elemento HEAD della pagina sono presenti alcuni tag con la chiusura all’interno dello stesso elemento. Visto che in HTML5 questo non è più necessario, è possibile rimuovere lo slash di chiusura da tali tag. Attenzione a rimuovere lo slash solo dai tag HTML e non dai tag dei controlli di SharePoint.

Cambiare la compatibilità e il character encoding

Visto che HTML5 non è supportato da IE8, possiamo andare a cambiare il tag meta con attributo http-equiv X-UA-Compatible, inserendo come valore nell’attributo content IE9.

<meta http-equiv="X-UA-Compatible" content="IE=9">

L’altro tag meta che possiamo andare a cambiare, più precisamente a semplificare, è quello del charset. Possiamo rimuovere gli attributi non più necessari ad HTML5, rendendo il tag nel seguente modo:

<meta charset="utf-8">

 

Azioni facoltative (ma non troppo)

Visto che, come abbiamo detto prima, HTML5 non è supportato dai browser inferiori a IE9 e in alcune aziende vive ancora IE8 è necessario essere sicuri che il nostro sito sia visualizzato bene anche in questi browser. Se andiamo però ad utilizzare i nuovi tag semantici di HTML5, come ad esempio section o article, questi non saranno “digeriti” molto bene.
Per ovviare a questo inconveniente è possibile inserire una libreria javascript che in caso di tag non supportati dal browser, li va a sostituire con dei tag “riconosciuti”. Per fare questo è necessario aggiungere nella sezione head, il riferimento al seguente script:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

Come avrete notato ho omesso l’attributo “type” nel tag script, perchè HTML5 di default assume che per i tag script il valore sia sempre “text/javascript”.
Stessa cosa vale anche per i tag “link” dei CSS. Anche in questo caso è possibile omettere l’attributo “type” con il valore “text/css”.
Se avete altri tag di questo tipo all’interno della vostra masterpage, potete tranquillamente andare a modificarli con la nuova regola.

Conclusioni

In questo articolo ho cercato di riassumere la migrazione della masterpage da HTML4 a HTML5. Ovviamente questa è la base di partenza e sono descritti solo gli step base per una migrazione completa, ma questo è più che sufficiente per avere un risultato più che soddisfacente.

Microsoft.Owin si aggiorna alla versione 3.0

Ieri è stato rilasciato un aggiornamento per il progetto Katana portando le librerie Microsoft.Owin alla versione 3.0.
Potete trovare le note di release sulla pagina ufficiale del progetto https://katanaproject.codeplex.com/releases/view/113283.
Si tratta comunque di aggiornamenti legati per lo più alla parte di autenticazione di Google e Twitter (che ha cambiato recentemente questa parte) e della parte di utilizzo dei cookie.
Dalle note si apprende anche che sono state fatte delle modifiche per aumentare le perfomance.

updatekatana

WebCast: Tutto su ASP.NET Identity il 15/09

Il prossimo 15 settembre alle ore 17 si svolgerà un altro webcast targato DotNetToscana.

Questa volta parleremo, e più precisamente parlerò, delle novità introdotte nella versione 2.0 di ASP.NET Identity.
Oltre a vedere le nuove funzionalità, vedremo come creare un nuovo provider custom utilizzando MySQL e SQLite (tempo permettendo) e come utilizzare una tabella di utenti e password già presente nel vostro database.
Gli argomenti da trattare sono molti ed alcuni richiedono un po’ di tempo, ma spero di riuscire a spiegare tutto nel dettaglio e a sciogliere ogni vostro eventuale dubbio su questa funzionalità.

Per i dettagli dell’evento potete fare riferimento alla pagina di facebook https://www.facebook.com/events/687542254663047 dove verranno postati eventuali aggiornamenti. Per quanto riguarda l’iscrizione potete andare sulla pagina di eventbrite https://www.eventbrite.it/e/biglietti-tutto-su-aspnet-identity-12559203917.
Una volta effettuata l’iscrizione all’evento su eventbrite, qualche giorno prima del webcast riceverete le istruzioni per il collegamento.

Link evento: http://www.dotnettoscana.org/webcast-tutto-su-aspnet-identity.aspx

10559823_10152383327873425_5630238788301347813_n

Visual Studio 2013 Update 3 e le SharePoint Apps

Ieri è stato rilasciato l’Update 3 di Visual Studio 2013.
Potete trovare la descrizione completa di ogni singolo update a questo link: http://support.microsoft.com/kb/2933779

Per quanto riguarda lo sviluppo di App per SharePoint 2013 e Office 365, la novità più grande è quella relativa alla rimozione del template delle SharePoint Autohosted Apps.

Riporto qua sotto la nota originale:

Autohosting is no longer an option for SharePoint:
The Autohosted option is removed from the SharePoint application creation experience, because the Office 365 Autohosted Apps Preview program ended on June 30. New autohosted applications for SharePoint are no longer accepted by the SharePoint store. Existing autohosted apps are not affected, and apps that are currently running in the service will not be shut down.

Quindi se avete già sullo store di Office delle applicazioni sviluppate in questa modalità, non ci sono problemi, ma in futuro è preferibile utilizzare le Provider Hosted Apps.

Ho affrontato questo argomento durante un webcast qualche mese fa.

Impostare un colore di sfondo di una jQuery UI Dialog

jQueryUI mette a disposizione un un buon numero di widget da poter usare nelle nostre applicazioni web.
Uno di questi si chiama “Dialog” ed è un div che viene renderizzato come se fosse una finestra popup all’interno della nostra pagina HTML.
Può essere impostato anche in modalità “modal” risultando sopra ad ogni altro elemento e dovrà essere chiuso prima di poter utilizzare gli altri componenti della pagina.

Quando il controllo è aperto, viene inserito un colore di sfondo più scuro per far capire che la finestra è modale.
Questo colore ovviamente può essere variato, seguendo le linee grafiche del nostro sito.
Per fare questo è possibile cambiare direttamente il css legato alla controllo, oppure fare la stessa cosa, ma utilizzando gli eventi del widget.
Personalmente preferisco usare il secondo metodo in quanto funziona su tutti i browser, mentre nel primo caso può dare qualche problema su versioni vecchie di IE.

Primo metodo

.ui-widget-overlay
{
  opacity: .30 !important; 
  filter: Alpha(Opacity=30) !important;

  background-color: rgb(0, 0, 0) !important;
}

Secondo metodo

open : function(event, ui){
    $("body").css({
        overflow: 'hidden'
    });
    $(".ui-widget-overlay").css({
        background:"rgb(0, 0, 0)",
        opacity: ".30 !important",
        filter: "Alpha(Opacity=30)",
    });
},
beforeClose: function(event, ui) {
    $("body").css({ overflow: 'inherit' })
}

I plugin jQuery che non possono mancare nelle vostre applicazioni ASP.NET

Ormai le applicazioni web richiedono la stessa capacità di interazione delle applicazione desktop a cui gli utenti sono stati abituati per anni.
Con HTML5, CSS3 e jQuery questo non è più un risultato così difficile da ottenere.

Di seguito riporto alcuni dei plugin che non possono mancare nelle vostre applicazioni ASP.NET per migliorare l’usabilità e rendere i contenuti di facile fruizione da parte degli utenti.

  • noty: permette di inserire dei messaggi simili agli alert di outlook o delle toast notification.
  • NProgress.js: per inserire una barra di caricamento in alto alla pagina per dare un feedback all’utente sullo stato dei download o delle chiamate asincrone della pagina
  • jQuery.Inputmask: un plugin che permette di trasformare una casella di testo in una input mask con vari formati: date, numeri e la possibilità di inserire direttamente regex personalizzate
  • jquery-watermark: permette di inserire un watermark nelle caselle di testo
  • jquery news ticker: un news ticker sullo stile dei notiziari
  • jTable: facile e veloce da imparare per creare tabelle con filtri, ordinamenti e finestre di modifica dei dati. E’ stata realizzata da uno sviluppatore ASP.NET e quindi è facilmente integrabile. Ci sono direttamente gli esempi con ASP.NET MVC
  • jqGrid: un’altro plugin per realizzare tabelle. Molto ricco di funzionalità, ma personalmente preferisco jTable
  • jQuery Format Currency: questo plugin permette di formattare una casella di testo con la valuta di 211 paesi. Molto semplice da usare e gli esempi sul sito sono esaustivi
  • dropzonejs: permette l’upload di file di qualsiasi tipo anche con il drag&drop direttamente sulla pagina. In caso di immagini fa vedere anche l’anteprima.
  • jQueryUI Sortable: nel caso aveste bisogno di una lista ordinabile questo fa al caso vostro
  • jQueryUI Datepicker: un datepicker facile da configurare, ma con tante personalizzazioni
  • anoSlide: uno slider di immagini molto bello e semplice da personalizzare
  • Flot: tantissimi tipi di grafici molto belli graficamente e interattivi. Possibilità di aggiornare i grafici anche tramite chiamate AJAX.
  • jQuery Loader Fullscreen: un loader a tutto schermo semplice da usare. E’ un mio progetto su GitHub. :)

La lista potrebbe essere molto più lunga, ma questa è una buona base di partenza per rendere le vostre applicazioni più accattivanti e user-friendly.

Rendere Outlook 2013 più social che mai

In Outlook 2013 è stata introdotta una barra nel riquadro di lettura che visualizza gli aggiornamenti e i messaggi sotto forma di discussione dei contatti presenti nella mail.
Questa funzionalità può essere estesa anche ad account esterni per essere sempre aggiornati sui propri contatti, senza ogni volta aprire tutti i vari social.
Inoltre, un comportamento che trovo molto utile, se l’utente è esterno alla propria rete, viene aggiunta una foto prelevata direttamente dal social con cui è registrata quella mail.

Per attivare questa funzionalità, selezionare dal ribbon di Outlook:

View –> People Pane –> Account Settings

Outlook1

Nella nuova schermata, selezionare i social che vi interessano e premere su Connect.

Una volta effettuati i login e concesso l’accesso alle vostre informazioni del social, cliccare su Finish.

Outlook2
A questo punto, nella barra di lettura della mail dove ci sono i contatti, appariranno foto prese dai vari social e gli aggiornamenti.

SharePoint 2013 – Rimuovere il campo Title con il Client Object Model

Quando facciamo il provisiong su SharePoint 2013 o Office 365 dalle nostre App a volte è necessario dover eliminare dei campi dalle liste che vengono inseriti di default.
Per fare questo è sufficiente eseguire una DeleteObject sul campo che vogliamo eliminare:

ClientContext clientContext = new ClientContext(siteUrl);
Web web = clientContext.Web;
List list = web.Lists.GetByTitle("MyList");
Field field = list.Fields.GetByTitle("Surname");
field.DeleteObject();
clientContext.ExecuteQuery();


Discorso diverso invece è per il campo Title che ha bisogno di qualche impostazione aggiuntiva per essere rimosso sia dalla lista, sia dalla vista o dalle viste in cui appare:

ClientContext clientContext = new ClientContext(siteUrl);
Web web = clientContext.Web;
List list = web.Lists.GetByTitle("MyList");
Field field = list.Fields.GetByTitle("Title");

field .Hidden = true;
field .Required = false;
field .SetShowInDisplayForm(false);
field .SetShowInEditForm(false);
field .SetShowInNewForm(false);

View view = list.Views.GetByTitle("All Items");
ViewFieldCollection viewFields = view.ViewFields;
viewFields.Remove("LinkTitle");
view.Update();

clientContext.ExecuteQuery();

MVP per la prima volta!

Lo scorso 1° luglio sono stato nominato Microsoft MVP su ASP.NET.

Ho approfittato di questi giorni prima di scrivere per fare mente locale sull’ultimo anno di vita lavorativa e personale.
E’ stato un anno molto intenso, soprattutto dal punto di vista professionale.
Tanti progetti da seguire, tanti progetti nuovi, eventi in giro per l’Italia e un trasferimento per fare ritorno a Milano.
Potrei stare ore a ringraziare tutti quanti, ma le persone che voglio ringraziare prima di tutte, sono Marco Minerva e Marco Dal Pino che mi hanno aiutato in questo percorso, a migliorarmi e a spronarmi nei momenti in cui la fiducia in me stesso scendeva sotto i livelli di sicurezza. :)
Il raggiungimento di questo obiettivo comunque non è un punto di arrivo, ma un checkpoint intermedio per cercare ancora di migliorare e di rimanere a far parte di questo fantastico gruppo fatto di persone prima che da professionisti.

Grazie anche a tutto lo staff di DotNetToscana, di cui faccio parte, per il supporto.microsoft-mvp

Script PowerShell per scaricare tutti i video di DotnetConf14

Ho preparato uno script PowerShell per scaricare tutti i video della recentissima DotNetConf14.

Lo potete trovare su Gist a questo link: https://gist.github.com/kasuken/891f4102e807b2dbb78c

mkdir "~\Desktop\DotNetConf14"
cd "~\Desktop\DotNetConf14"
[Environment]::CurrentDirectory=(Get-Location -PSProvider FileSystem).ProviderPath
$a = ([xml](new-object net.webclient).downloadstring("http://s.ch9.ms/Events/dotnetConf/2014/RSS/mp4high"))
$a.rss.channel.item | foreach{  
      $url = New-Object System.Uri($_.enclosure.url)
    
    $file = "- " + $_.creator + " - " + $_.title.Replace(":", "-").Replace("?", "").Replace("/", "-").Replace("<", "").Replace("|", "").Replace('"',"").Replace("*","")
    $file = $file.substring(0, [System.Math]::Min(120, $file.Length))
    $file = $file.trim()
    
    $OutFile = New-Item -type file "$file.txt" -Force  
    $Content = ""
    $Content = $_.title.trim() + "`r`n" + $_.summary.trim()
    add-content $OutFile $Content
    
    "Downloading: " + $file + ".mp4"
    if (!(test-path $file))
    {
      $wc = (New-Object System.Net.WebClient)  
      $wc.DownloadFile($url, $file + ".mp4")
    }
}

Bootstrap 3 in 15 minuti

Bootstrap è un framework HTML, CSS e Javascript. Il suo scopo è quello di aiutare a disegnare layout per siti o applicazioni web in poco tempo e adatti a qualsiasi tipo di browser e risoluzione.

Ormai arrivato alla versione 3, si può considerare quasi uno standard per lo sviluppo di layout responsive.

In questo breve tutorial andremo a vedere le basi di questo framework da cui partire per realizzare layout più complessi utilizzando le classi base di Boostrap.

La prima pagina

Per prima cosa dobbiamo creare una pagina HTML5 con l’editor HTML che preferite (io uso questo) e inserire i riferimenti ai CSS e al Javascript di Bootstrap.
Se non volete avere una copia dei file sul vostro server, potete utilizzare un server CDN (www.bootstrapcdn.com) che mette a disposizione i file necessari.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

E’ disponibile sia con protocollo http che https.
Di norma viene aggiunto anche jQuery per utlizzare funzioni più avanzate di Boostrap che andremo a vedere nei prossimi post.

Jumbotron

La pagina che abbiamo creato adesso è ancora bianca perchè non abbiamo disegnato nessun elmento HTML. Il primo che andremo a inserire si è un div a cui andremo ad applicare una delle classi css di Boostrap denominata “jumbotron”.
Questa classe serve a creare una sezione di intestazione della pagina in cui possiamo inserire titoli, sottotitoli, pulsanti di navigazione.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="jumbotron">
                <h1>First Page in Bootstrap</h1>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

In questo caso siamo andati a inserire il titolo “First Page in Bootstrap” all’interno di un tag <h1> per impostare un titolo alla pagina.
All’interno del jumbotron però possiamo inserire qualsiasi tipo di altro tag HTML, come ad esempio:

<p>Are you happy developer?</p>
<p><a class="btn btn-primary btn-lg" href="http://www.emanuelebartolesi.com" target="_blank">Learn more</a></p>
 
Righe e colonne

In Bootstrap ogni sezione di una pagina è rappresentata da un div con applicata la classe “row”. All’interno di ogni sezione “row” è possibile inserire più sezioni orizzontali semplicemente inserendo uno o più div al suo interno.
Ai div interni possiamo applicare le classi “col-lg”, “col-md”, “col-sd” e “col-xs”.
Queste classi vogliono dire che la colonna appena creata si adatterà, rispettivamente, a uno schermo largo, medio, piccolo e molto piccolo. In questo modo è possibile impostare un layout per ogni tipo di risoluzione. Se invece vogliamo utilizzare un layout che si adatti a qualsiasi tipo di schermo, possiamo utilizzare la classe “col-md”.

Bootstrap utilizza un sistema a 12 colonne (12 Grid System). Questo vuol dire che se voglio creare due colonne larghe uguali, devo creare due div e applicare a entrambe la classe css “col-md-6”. Se ne volessi invece creare 4, dovrei fare 4 div con la classe “col-md-3” applicata.

<div class="container">
    <div class="row">
        <div class="col-md-4">
        
        </div>
        <div class="col-md-4">

        </div>
        <div class="col-md-4">

        </div>
    </div>
</div>

Se aggiungiamo lo snippet  di codice sopra, avremmo 3 div, larghi 4 colonne l’uno perfettamente responsive.
Il codice completo con il contenuto di prova:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2>Heading 1</h2>
            <p align="justify">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn btn-default btn-primary" href="#">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Heading 2</h2>
            <p align="justify">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn btn-default btn-primary" href="#">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Heading 3</h2>
            <p align="justify">Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-default btn-primary" href="#">View details &raquo;</a></p>
        </div>
    </div>
</div>
 
Menu di navigazione

Una delle parti più importanti per ogni sito è la navigazione.
Anche in questo caso Bootstrap ha già un comportamento e della classi predefinite che possono semplificarne lo sviluppo.

Anche la barra di navigazione è un div, con la classe “navbar” applicata.
All’interno del div principale, ci sono altri div che andranno a formare il menu vero e proprio.
Le cose fondamentali da sapere sono che se inseriamo un button e gli applichiamo la classe “navbar-toggle”, questo sarà nascosto fino a che il nostro browser sarà a risoluzioni abbastanza elevate, ma durante la navigazione di un dispositivo mobile, verrà visualizzato il contenuto di questo tag. Di solito viene visualizzato come un pulsante con delle righe orizzontali.
Un altro elemento fondamentale, sempre da inserire all’interno del div con classe “navbar-header” è un tag link con classe “navbar-brand”.
Questo sarà visualizzato di default a sinistra del menu con solitamente il titolo del sito.
L’ultimo div che forma la navigazione, è un div con classe css “navbar-collapse”.
In questo div, attraverso un elenco ul->li, è possibile inserire i link del sito, anche annidandoli come un normale elenco puntato. Gli elementi di secondo livello, verrano visualizzati di default in un menu a discesa quando il mouse si sposterà sull’elemento principale.

Il codice per realizzare il menu appena descritto è il seguente:

<div class="navbar navbar-inverse navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap first page</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Second link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

A questo link, potete trovare l’esempio completo della pagina creata in questo tutorial.

image

SharePoint 2013: recuperare il numero di versione di un item con il Client Object Model

Spesso è necessario visualizzare il numero di versione di un Item di una lista presente in SharePoint nelle nostre applicazioni che utlizzano il Client Object Model.
Per recuperare tale valore, bisogna prima recuperare il riferimento alla lista, poi tutti gli item e infine recuperare il valore attraverso il nome del campo “_UIVersionString”.
Diamo un’occhiata al codice, supponendo di avere una lista denominata “Products” e il versioning abilitato sulla lista.

ClientContext cc = new ClientContext("Your Site Url");
Web web = cc.Web;

List list = web.Lists.GetByTitle("Products");

CamlQuery caml=new CamlQuery();
ListItemCollection items = list.GetItems(caml);

cc.Load(list);
cc.Load(items);
cc.ExecuteQuery();

foreach (Microsoft.SharePoint.Client.ListItem item in items)
{
    var version = item.FieldValues["_UIVersionString"].ToString();
}

Nascondere l’icona e il titolo di un’app per SharePoint o Office 365

Quando realizziamo un'app per SharePoint 2013 o Office 365 in modalità Sharepoint-Hosted non abbiamo la possibilità di cambiare completamente l'impostazione delle pagine che compongono la nostra applicazione e di default viene inserito in ogni pagina il titolo della nostra app e il logo.

A volte questa cosa può non rispettare gli standard grafici che ci siamo prefissati per la nostra App.

Per eliminare la barra del titolo è sufficiente inserire nei css dell'App o nella singola pagina in cui vogliamo eliminare l'elemento il seguente snippet di CSS.

#s4-titlerow{
    display:none !important;
}