SharePoint - Strumenti di sviluppo

In questo capitolo tratteremo i diversi livelli di "sviluppo" relativi a SharePoint. Ogni livello serve in qualche modo l'utente finale del sito di SharePoint. Puoi dividere questo spettro nel seguente:

  • End users - che utilizzano la piattaforma come piattaforma applicativa.

  • Power users - che creano e amministrano (e magari brand) siti.

  • Designers - che marca il sito e costruisce l'esperienza dell'utente.

  • Developers - chi crea e distribuisce app.

Una serie di persone interagisce con SharePoint, dagli sviluppatori agli utenti finali. È rappresentato nella figura seguente

Impostazioni del sito

Le impostazioni del sito sono una delle parti principali di SharePoint. È molto importante averne familiarità.

Step 1 - Per accedere alla pagina Impostazioni sito, fare clic su User Profile in SharePoint Admin center. Fare clic sull'opzioneSetup My Site in Impostazioni sito personale.

Si aprirà la pagina seguente.

In questa pagina troverai la maggior parte delle configurazioni per il tuo sito come:

  • Cambia il tema del tuo sito.
  • Attiva le funzionalità.
  • Gestisci le autorizzazioni.

Step 2- Alcune opzioni di impostazione sono disponibili anche nelle Impostazioni. Quindi fai clic su Impostazioni nel riquadro di sinistra.

Tieni presente che le funzionalità principali della pagina Impostazioni sito sono suddivise in categorie principali. Ad esempio, la maggior parte delle impostazioni di sicurezza sono disponibili nella categoria Utenti e autorizzazioni, temi nelle raccolte di Web Designer e così via.

Aggiungi pagina HTML

L'esperienza di editing varia dalla formattazione del testo all'aggiunta di immagini o contenuti multimediali. Puoi ottenere un po 'di più dal codice incorporando HTML direttamente nel tuo sito di SharePoint.

Questa attività sembra un po 'più simile allo sviluppo, quindi diamo un'occhiata a un semplice esempio aggiungendo una pagina HTML.

Step 1- Apri il tuo sito di SharePoint e vai alla home page del sito. Nella scheda Pagina fare clic sull'opzione di menu Modifica.

Step 2 - Nella scheda INSERISCI, fai clic sull'opzione Incorpora codice.

Si aprirà la seguente finestra di dialogo:

Step 3 - Aggiungi del codice HTML nel campo del codice come mostrato di seguito -

Step 4 - Fare clic su Insert e vedrai che lo snippet HTML è inserito.

Step 5 - Fare clic su Save.

Puoi vedere che il codice HTML è inserito nel tuo sito di SharePoint.

Aggiungi file multimediale

Per aggiungere un'app Media Player al tuo sito di SharePoint, apri il tuo sito di SharePoint e vai alla home page del sito.

Step 1 - Nella scheda Pagina, fai clic sull'opzione di menu Modifica.

Step 2 - Seleziona l'opzione web part.

Step 3 - Seleziona Media e Contenuto da Categories e seleziona il file Media with Partsdalla sezione Parti. ClicAdd.

Step 4 - Salva la pagina e vedrai la pagina seguente, che contiene il file Media.

SharePoint Designer

Molti sviluppatori preferiscono non utilizzare SharePoint Designer come strumento per lo sviluppo di siti di SharePoint. Tuttavia, il punto è che lo strumento di SharePoint Designer può semplificare alcune attività di sviluppo.

Le caratteristiche importanti sono:

  • SharePoint Designer può essere utilizzato per una varietà di funzioni di progettazione per SharePoint, inclusa la creazione e la modifica di siti, pagine, elenchi e tipi di contenuto.

  • SharePoint Designer è utile anche per creare un flusso di lavoro dichiarativo basato su regole che può essere importato in Visual Studio per una personalizzazione di livello più approfondito.

  • Può essere scaricato e installato da https://www.microsoft.com/en-pk/download/details.aspx?id=35491

  • Quando si apre per la prima volta SharePoint Designer, è necessario fornirgli l'URL del sito di SharePoint e autenticarsi come utente con privilegi elevati.

  • SharePoint Designer eredita le autorizzazioni standard di SharePoint.

  • Dopo aver aperto il sito in SharePoint Designer, vengono visualizzate una serie di opzioni navigabili e alcune informazioni sul sito, come metadati del sito, autorizzazioni, siti secondari e così via.

Quindi utilizziamo SharePoint Designer, ma prima dobbiamo configurare SharePoint Designer utilizzando Office 365 aprendo il tuo sito di SharePoint.

Step 1 - Apri il sito di SharePoint.

Step 2- Seleziona l'opzione di menu Impostazioni di Office 365. Seleziona Impostazioni nel riquadro a sinistra, quindi seleziona il software nel riquadro centrale.

Step 3 - Seleziona Tools & add-insnel riquadro di sinistra e vedrai le diverse opzioni. Alla fine vedrai SharePoint Designer Option, fai clic sul collegamento.

Step 4- Apri SharePoint Designer dopo l'installazione. Clicca ilOpen Site opzione.

Step 5 - Specifica l'URL del tuo sito SharePoint e fai clic su Apri.

Step 6 - Una volta aperto il sito di SharePoint Designer, vedrai che sono disponibili diverse opzioni.

Step 7 - Fare clic su Elenchi di SharePoint sulla barra multifunzione e selezionare Attività dal menu.

Step 8- Si apre una nuova finestra di dialogo. Specificare il nome e la descrizione e fare clic su OK.

Step 9 - Andiamo sullo stesso sito, utilizzando il portale e vedrai l'elenco delle cose da fare nel tuo sito.

Visual Studio ed Expression Blend

Puoi anche usare Visual Studio e Blendper aggiungere del contenuto al tuo sito di SharePoint. Visual Studio offre molte funzionalità per aiutare a sviluppare applicazioni in SharePoint; è utile familiarizzare con loro in dettaglio.

Diamo un'occhiata a un semplice esempio di applicazione ospitata da SharePoint aprendo Visual Studio. SelezionareFile → New → Project opzione.

Step 1 - Apri Visual Studio e seleziona il file File → New → Project menu.

Step 2 - Nel riquadro di sinistra selezionare Templates → Visual C# → Office/SharePoint e quindi nel riquadro centrale selezionare App for SharePoint.

Immettere il nome nel campo Nome, fare clic su OK e verrà visualizzata la seguente finestra di dialogo.

Nella nuova app per SharePoint, è necessario aggiungere l'URL del sito di SharePoint di cui si desidera eseguire il debug e quindi selezionare il modello ospitato da SharePoint come modo in cui si desidera ospitare la propria app per SharePoint.

Step 3 - Vai all'interfaccia di amministrazione di SharePoint e copia l'URL di SharePoint.

Step 4 - Incolla l'URL nel file New App for SharePoint finestra di dialogo come mostrato di seguito.

Step 5 - Fare clic su Next e aprirà il file Connect to SharePoint finestra di dialogo in cui dobbiamo effettuare il login.

Step 6 - Inserisci le tue credenziali e fai clic su Sign inpulsante. Dopo aver effettuato correttamente l'accesso al sito di SharePoint, verrà visualizzata la seguente finestra di dialogo:

Step 7 - Fare clic su Finish. Una volta creato il progetto, fare clic suAppMenifest.xml file in Esplora soluzioni.

Step 8 - Fare clic su Permissionstab. Si aprirà un elenco a discesa Scope.

Step 9 - Nell'elenco a discesa Ambito, selezionare Web, che è l'ambito delle autorizzazioni che stai configurando. Nell'elenco a discesa Autorizzazione, selezionaRead, che è il tipo di autorizzazione che stai configurando.

Step 10 - Apri il file Default.aspx e sostituiscilo con il codice seguente.

<%-- The following 4 lines are ASP.NET directives needed when 
   using SharePoint components --%>

<%@ Page Inherits = "Microsoft.SharePoint.WebPartPages.WebPartPage,
   Microsoft.SharePoint, Version = 15.0.0.0, Culture = neutral,
   PublicKeyToken = 71e9bce111e9429c" MasterPageFile = "~masterurl/default.master"
   Language = "C#" %>

<%@ Register TagPrefix = "Utilities" Namespace = "Microsoft.SharePoint.Utilities"
   Assembly = "Microsoft.SharePoint, Version = 15.0.0.0, Culture = neutral,
   PublicKeyToken = 71e9bce111e9429c" %>

<%@ Register TagPrefix = "WebPartPages"
   Namespace = "Microsoft.SharePoint.WebPartPages" Assembly = "Microsoft.SharePoint,
   Version = 15.0.0.0, Culture = neutral, PublicKeyToken = 71e9bce111e9429c" %>

<%@ Register TagPrefix = "SharePoint"
   Namespace = "Microsoft.SharePoint.WebControls" Assembly = "Microsoft.SharePoint,
   Version = 15.0.0.0, Culture = neutral, PublicKeyToken = 71e9bce111e9429c" %>

<%-- The markup and script in the following Content element 
   will be placed in the <head> of the page --%>

<asp:Content ID = "Content1" ContentPlaceHolderID = "PlaceHolderAdditionalPageHead" 
   runat = "server">
   <script type = "text/javascript" src = "../Scripts/jquery- 1.6.2.min.js"></script>
   <link rel = "Stylesheet" type = "text/css" href = "../Content/App.css" />
   <script type = "text/javascript" src = "../Scripts/App.js"></script>
</asp:Content>

<asp:Content ID = "Content2" ContentPlaceHolderID = "PlaceHolderMain" runat = "server">
   
   <script type = "text/javascript"> 
      function hello() {
         var currentTime = new Date();
         $get("timeDiv").innerHTML = currentTime.toDateString();
      }
   </script>
   
   <div id = "timeDiv"></div>
   <input type = "button" value = "Push me!" onclick = "hello();" />
</asp:Content>

Step 11- Vai a Esplora soluzioni, fai clic con il pulsante destro del mouse sul progetto e seleziona Pubblica. Clicca ilPackage the apppulsante. Questo crea la tua app ospitata da SharePoint e la prepara per la distribuzione nel tuo sito di SharePoint.

Vedrai la seguente cartella, che contiene il file * .app.

Step 12 - Accedi al tuo sito in linea di SharePoint.

Step 13 - Fare clic su Apps for SharePointnel riquadro di sinistra. Si aprirà una nuova pagina.

Step 14 - Trascina i tuoi file qui per caricarli.

Una volta caricato il file, vedrai la seguente pagina:

Step 15 - Fare clic sull'opzione - Site Contentsnel riquadro di sinistra. Clicca iladd an app come mostrato nella seguente schermata:

Si aprirà una nuova pagina.

Step 16 - Seleziona Your Apps → From Your Organizationnel riquadro di sinistra e vedrai che l'app è disponibile per l'installazione. Fare clic sull'app.

Step 17- Quando fai clic sull'app, si apre una finestra di dialogo come mostrato nella seguente schermata. ClicTrust it.

Step 18- Vedrai che l'app è installata. Una volta completata l'installazione, puoi fare clic sull'app.

Vedrai la pagina seguente, che contiene un pulsante:

Quando fai clic sul file Push me pulsante, visualizzerà la data corrente.