Sdílet prostřednictvím

Návod: Vytvoření aplikace pro službu SharePoint pomocí LightSwitch

  • Článek

S použitím LightSwitch, můžete vytvořit aplikaci pro službu SharePoint, ve kterém můžete zobrazit, přidat a aktualizace dat služby SharePoint ze vzdáleného umístění s použitím moderních, dotykovým ovládáním zařízení, například telefonů a tabletů mobilní uživatelé.V tomto návodu vytvoříte aplikaci, ve kterém můžete zadat obchodních zástupců pro fiktivní food distributora, Contoso zvířata průzkumu data o způsob, jakým partnera ukládá zobrazení svých produktů.

Tito zástupci často navštěvujete každém umístění a dodávat produkty a chování kvalitu zjišťování, které měří přítomnosti, který má každý produkt v rámci úložiště.Během zjišťování zástupců obvykle shromažďovat následující typy dat:

  • Čistota zobrazení (v rozsahu od "velmi špatná" na "vynikající").

  • Osvětlení produktu (také v rozsahu od "velmi špatná" na "vynikající").

  • Umístění uličky produktu (uprostřed uličky, konec uličky nebo uličky zakončení).

  • Výška doby skladování produktu (začátek doby skladování, doby skladování okem úrovni nebo doby skladování dolní).

Zástupci také fotografie zobrazí produkt pro podporu celkového hodnocení.

Požadavky

Tento průvodce vyžaduje Visual Studio 2013.

Budete také potřebovat ukázkové soubory v stažení kurz aplikace průzkumu: vývoj služby SharePoint aplikace pomocí LightSwitch.

Pro hostování aplikace, je také nutné mít web služby SharePoint Developer na Office 365, které můžete získat Centrum pro vývojáře aplikací pro Office a SharePoint pro.

Vytvořit aplikaci LightSwitch ve formátu HTML

Vyvíjet aplikaci LightSwitch pro SharePoint, nejprve vytvořit projekt klienta v programu Silverlight nebo HTML.V tomto návodu použijete HTML tak, aby mohla optimalizovat obrazovky pro mobilní zařízení.

Vytvoření projektu

  1. Na řádku nabídek klikněte na položky Soubor, Nový, Projekt.

    Otevře se dialogové okno Nový projekt.

  2. V seznamu šablon, rozbalte položku jazyka Visual Basic nebo Visual C# uzel, zvolte LightSwitch uzel a pak zvolte buď aplikace HTML LightSwitch (Visual Basic) nebo aplikace HTML LightSwitch (Visual C#).

  3. V název text zadejte SurveyAppa poté zvolte možnost OK tlačítko.

Přidat podporu pro zobrazení dat zjišťování

Zástupci zadávají data, musí ověřit, kterou jste zadali a později znovu načíst data.Chcete-li přidat tuto funkci, začněte přidáním průzkumu entity v databázi vnitřní, který bude uložení dat průzkumu a pak přidejte domácí obrazovky, chcete-li zobrazit data.Základní obrazovka se zobrazí při spuštění zástupce aplikace.

Chcete-li přidat entitě Průzkum

  1. V Průzkumníka řešení, otevřete místní nabídku pro SurveyApp.Server uzel a poté zvolte možnost přidat tabulku.

    v návrháři entit se zobrazí.

  2. V vlastnosti okno, v textovém poli pro název vlastnost, zadejte průzkumu.

  3. V v návrháři entit, zadejte následující hodnoty:

    Name

    Typ

    Požadováno

    SalesRepName

    String

    Ne

    Čistoty

    Integer

    Ano

    Osvětlení

    Integer

    Ano

    ShelfPlacement

    Integer

    Ano

    AislePlacement

    Integer

    Ano

  4. Zvolte čistoty pole a poté v vlastnosti okna, zvolte seznam voleb hypertextový odkaz.

  5. V seznam voleb dialogového okna, zadejte následující hodnoty a pak zvolte OK tlačítko.

    Hodnota

    Zobrazovaný název

    0

    Velmi nízké

    1

    Slabé

    2

    Uspokojivé

    3

    Dobrý

    4

    Vynikající

  6. Zvolte osvětlení pole a poté v vlastnosti okna, zvolte seznam voleb hypertextový odkaz.

  7. V seznam voleb dialogového okna, zadejte následující hodnoty a pak zvolte OK tlačítko.

    Hodnota

    Zobrazovaný název

    0

    Velmi nízké

    1

    Slabé

    2

    Uspokojivé

    3

    Dobrý

    4

    Vynikající

  8. Zvolte ShelfPlacement pole a poté v vlastnosti okna, zvolte seznam voleb hypertextový odkaz.

  9. V seznam voleb dialogového okna, zadejte následující hodnoty a pak zvolte OK tlačítko.

    Hodnota

    Zobrazovaný název

    0

    Začátek doby skladování

    1

    Úroveň okem doby skladování

    2

    Doby skladování dolů

  10. Zvolte AislePlacement pole a poté v vlastnosti okna, zvolte seznam voleb hypertextový odkaz.

  11. V seznam voleb dialogového okna, zadejte následující hodnoty a pak zvolte OK tlačítko.

    Hodnota

    Zobrazovaný název

    0

    Střední uličky

    1

    Konec uličky

    2

    Ulička zakončení

Chcete-li vytvořit základní obrazovka

  1. V Průzkumníka řešení, otevřete místní nabídku pro SurveyApp.HTML klienta uzel a poté zvolte možnost přidat obrazovce.

    Zobrazí se dialogové okno Přidat novou obrazovku.

  2. V vyberte šablonu obrazovky seznam, zvolte Procházet na obrazovce údaje.

  3. V název obrazovky text zadejte SurveysHome.

  4. V obrazovce dat seznam, zvolte zjišťovánía poté zvolte možnost OK tlačítko.

  5. V obrazovce Designer, zvolte obrazovce | SurveysHome uzlu.

    Na obrazovce | Domovská stránka zjišťování uzlu

  6. V vlastnosti okna, zvolte zobrazované jméno textové pole a stiskněte enter Contoso produktu průzkumy.

Chcete-li otestovat aplikaci v prohlížeči

  1. V panelu nabídek zvolte možnost Ladit, Spustit ladění.

    Aplikace se zobrazí v prohlížeči a vypadat například takto: na následujícím obrázku.

    Průzkum obrazovce aplikace v místním prohlížeče

    Vzhledem k tomu, že jste nezadali žádná data ještě se neobjeví žádné položky průzkumu.Budete později přidat na obrazovce pro vytváření a úpravy dat zjišťování.

  2. Zavřete okno prohlížeče, chcete-li ukončit aplikaci z běhu.

Povolit, který je hostitelem služby SharePoint

Chcete-li vytvořit aplikace, která zástupců lze spustit z webu služby SharePoint, je nutné povolit, hostování na webu služby SharePoint změnou nastavení projektu klienta HTML.

[!POZNÁMKA]

Pro hostování aplikace, je nutné web služby SharePoint Developer na Office 365, které můžete získat Centrum pro vývojáře aplikací pro Office a SharePoint pro.

Chcete-li povolit, který je hostitelem služby SharePoint

  1. V Průzkumníka řešení, zvolte SurveyApp uzlu.

  2. V panelu nabídek zvolte možnosti Projekt, Povolit SharePoint.

  3. V povolení SharePoint průvodce, zadejte adresu URL pro svůj web vývojáře Office 365 a pak zvolte Dokončit tlačítko.

    Adresa URL by měla trvat https:// formuláře server.sharepoint.com/sites/Developer/.

    Do vašeho LightSwitch projektu jsou přidány odkazy na několik sestavení služby SharePoint a do řešení je přidán projekt pro webové aplikace SharePoint.

Chcete-li otestovat hostované aplikaci

  1. V panelu nabídek zvolte možnost Ladit, Spustit ladění.

    Při prvním spuštění služby SharePoint aplikací ve vašem počítači, budete vyzváni k instalaci certifikátu Localhost, protože aplikace LightSwitch, které jsou povoleny pro SharePoint, který je hostitelem vždy používat protokol SSL (Secure Sockets Layer).Pokud tento certifikát přijmout, upozornění zabezpečení se nezobrazí pokaždé, když se spuštění aplikace.Vzhledem k tomu, že byl certifikát se vztahuje pouze na Localhost, systém otočena směrem hrozby.

  2. V výstraha zabezpečení dialogové okno zvolte Ano tlačítko.

  3. Pokud upozornění zabezpečení se zobrazí dialogové okno, zvolte Ano tlačítko.

    Otevře se webový prohlížeč.

  4. Na přihlásit stránky, zvolte přihlásit tlačítko.

  5. Zadejte heslo a pak zvolte přihlásit tlačítko.

  6. Pokud budete vyzváni, zvolte vztah důvěryhodnosti se tlačítko.

    Aplikace se zobrazí v prohlížeči a vypadat například takto: na následujícím obrázku.

    Aplikace se SharePoint chrome

    Pás se zobrazí v horní části obrazovky, aby uživatel můžete přejít zpět na web služby SharePoint.Tento panel chrome služby SharePoint se objeví na všechny aplikace pro službu SharePoint.

  7. Zavřete okno prohlížeče, chcete-li ukončit aplikaci z běhu.

Přidat podporu pro vytváření a úpravu dat zjišťování

Teď, když SharePoint jste součástí vaší aplikace, můžete se vrátit k přidání funkcí tak, aby uživatelé mohou vytvářet a upravovat data zjišťování.V této části přidáte několik více entit připojením ke seznamy služby SharePoint přidat relace mezi entitami, upravit základní obrazovka, vytvořit obrazovky pro zadávání dat a připojili navigace pro nové obrazovce.

Chcete-li přidat entity

  1. Ve webovém prohlížeči vyhledejte váš web služby SharePoint Developer pomocí stejnou adresu URL, které jste zadali v předchozích postup pro povolení služby SharePoint.

  2. V nabídce služeb Office 365, zvolte nastavení ikonu a poté zvolte možnost nastavení webu položky nabídky.

  3. V webové návrháře galerií seznam, zvolte seznamu šablon.

  4. Na Designer Galerie webových stránky, klepněte v nabídce zvolte soubory, uložit dokument.

  5. V přidat šablonu dialogové okno zvolte Procházet, vyhledejte contoso_customers_template.stp soubor šablony, která byla zahrnuta v souboru ke stažení ukázky a poté zvolte možnost OK tlačítko.

  6. V Galerie šablon seznamů dialogové okno zvolte Uložit tlačítko.

  7. V nabídce, zvolte soubory, uložit dokument.

  8. V přidat šablonu dialogové okno zvolte Procházet, vyhledejte contoso_products_template.stp soubor šablony, která byla zahrnuta v souboru ke stažení ukázky a poté zvolte možnost OK tlačítko.

  9. V Galerie šablon seznamů dialogové okno zvolte Uložit tlačítko.

  10. Na Developer nabídky pruhu, zvolte obsah webu, zvolte přidat aplikaci propojit a poté zvolte možnost Contoso zákazníci šablony.

  11. V přidání vlastní seznam dialogového okna, název seznamu zákaznícia poté zvolte možnost Create tlačítko.

  12. Na obsah webu stránky, zvolte přidat aplikaci propojit a poté zvolte možnost Contoso produkty šablony.

  13. V přidání vlastní seznam dialogového okna, název seznamu produktya poté zvolte možnost Create tlačítko.

  14. V sadě Visual Studio v Průzkumníka řešení, otevřete místní nabídku pro SurveyApp.Server uzel a poté zvolte možnost přidat zdroj dat.

  15. V připojit Průvodce zdroje dat, zvolte SharePoint ikonu a poté zvolte možnost Další tlačítko.

  16. V zadejte adresu webu služby SharePoint textového pole zadejte adresu URL pro web služby SharePoint developer a pak zvolte Další tlačítko.

  17. V vyberte entity, která má být použita v aplikaci seznamu, rozbalte položku seznam uzel, vyberte zákazníka a produkty zaškrtávacích políček a pak zvolte Dokončit tlačítko.

    Zákazníci, produkty a UserInformationList entity jsou přidány do aplikace.

Chcete-li vytvořit vztahy mezi entitami

  1. V Průzkumníka řešení, rozbalte položku zdroje dat uzel, otevřete místní nabídku pro Surveys.lsml uzel a poté zvolte možnost otevřete.

  2. V v návrháři entit, na panelu nástrojů zvolte vztah odkazu.

    Přidat nový vztah se zobrazí dialogové okno.

  3. V k sloupce v název seznam, zvolte zákazníkaa poté zvolte možnost OK tlačítko.

  4. V v návrháři entit, zvolte vztah odkazu.

  5. V přidat nový vztah dialogovém k sloupce v název seznam, zvolte produktua poté zvolte možnost OK tlačítko.

Chcete-li upravit základní obrazovka

  1. V Průzkumníka řešení, otevřete místní nabídku pro SurveysHome.lsml uzel a poté zvolte možnost otevřete.

  2. V prostředním podokně návrháře obrazovky, rozbalte seznam průzkumu uzel a poté zvolte možnost rozložení řádků.

  3. Zvolte název zástupce prodeje, čistoty, osvětlení, umístění doby skladování, a uličky umístění uzly a potom je odstranit.

  4. V přidat seznam, zvolte zákazníka.

  5. V přidat seznam, zvolte produktu.

Chcete-li přidat na obrazovce pro vytváření a úpravy zjišťování

  1. V Návrháři obrazovce Rozbalit panel příkazů uzel a poté zvolte možnost přidat.

  2. V dialogovém okně Přidat tlačítko zvolte možnost Zvolit existující metodu.

  3. V showTab seznam, zvolte addAndEditNew.

  4. V přejít na seznam, zvolte nová obrazovkaa poté zvolte možnost OK tlačítko.

    Přidat nové obrazovce zobrazí se dialogové okno

  5. V přidat nové obrazovce dialogového okna, přijměte výchozí hodnoty a pak zvolte OK tlačítko.

  6. V Návrháři obrazovce přesunout zákazníka a produktu uzly tak, aby se zobrazí pod název zástupce prodeje uzlu.

  7. Odstranit rozložení řádků | Vpravo uzlu.

Chcete-li přidat navigační obrazovky

  1. V Průzkumníka řešení, otevřete místní nabídku pro zjišťování Home.lsml uzel a poté zvolte možnost otevřete.

  2. V Návrháři obrazovky, zvolte seznam | Můj produkt průzkumy uzlu.

  3. V vlastnosti okna, zvolte klepněte na položku: None hypertextový odkaz.

    Upravit akce ItemTap zobrazí se dialogové okno.

  4. V showTab seznam, zvolte editSelected.

  5. V přejít na seznam, zvolte přidat upravit průzkumua poté zvolte možnost OK tlačítko.

K otestování změny

  1. V panelu nabídek zvolte možnost Ladit, Spustit ladění.

  2. V dialogovém okně domácí zvolte přidat průzkum tlačítko.

    Přidat upravit průzkumu obrazovky.

  3. Rozbalit zákazníka seznamu zobrazíte ukázková data zákazníků.

  4. Rozbalit produktu seznam a zobrazovat data ukázky produktu.

  5. Rozbalte každou z zbývající zobrazí zobrazíte volby, které jste zadali dříve v tomto návodu.

  6. Zavřete okno prohlížeče, chcete-li ukončit aplikaci z běhu.

Přidání logiky pro název obchodního zástupce

Zadejte své názvy pokaždé, když se vytvořit průzkum by nemělo být obchodních zástupců.Dále přidáte logiku automaticky naplnit název zástupce prodeje pole s názvem aktuálního ověřeného uživatele a chcete-li zobrazit pouze zjišťování, že každý zástupce vytvořen.

Chcete-li nastavit výchozí hodnotu

  1. V Průzkumníka řešení, otevřete místní nabídku pro Surveys.lsml uzel a poté zvolte možnost otevřete.

    Otevře se v návrháři entit.

  2. V psát kód seznam, zvolte Surveys_Inserting.

  3. V editoru kódu, přidejte následující kód, který Surveys_Inserting metoda:

    entity.SalesRepName = Application.User.Name

    entity.SalesRepName = this.Application.User.Name;

    Tato metoda se spouští v rámci uložit server kanálu kdykoli průzkumu je vložen entity.Pokud aplikace načte informace o uživateli, odpovídá uživatele, který je přihlášen do služby SharePoint.

  4. V Průzkumníka řešení, otevřete místní nabídku pro AddEditSurvey.lsml uzel a poté zvolte možnost otevřete.

    Obrazovce Designer otevře.

  5. V prostředním podokně odstranit název zástupce prodeje uzlu.

Chcete-li přidat filtrování logiky

  1. V Průzkumníka řešení, otevřete místní nabídku pro Surveys.lsml uzel a poté zvolte možnost otevřete.

    Otevře se v návrháři entit.

  2. V psát kód seznam, zvolte Surveys_Filter.

  3. V editoru kódu, přidejte následující kód, který Surveys_Filter metoda:

    filter = Function(e) e.SalesRepName = Application.User.Name

    filter = f => f.SalesRepName == this.Application.User.Name;

    Tato metoda se spouští na serveru vždy, když průzkumu entity je dotazována.

K otestování změny

  1. V panelu nabídek zvolte možnost Ladit, Spustit ladění.

  2. V dialogovém okně domácí zvolte přidat průzkum tlačítko.

  3. V zákazníka vyberte zákazníka.

  4. V produktu vyberte produkt.

  5. V každé zbývající seznamů, zvolte hodnotu a pak zvolte Uložit tlačítko.

  6. Ověřte, zda obsahuje seznam průzkumy průzkumu, kterou jste právě vytvořili.

  7. Zavřete okno prohlížeče, chcete-li ukončit aplikaci z běhu.

Přidání logiky pro datum poslední zjišťování

Dále přidáte kód, aby odpovídalo datum, kdy byl průzkum naposledy provedený na webu každého zákazníka.

Chcete-li aktualizovat datum poslední zjišťování

  1. V Průzkumníka řešení, otevřete místní nabídku pro Surveys.lsml uzel a poté zvolte možnost otevřete.

  2. V psát kód seznam, zvolte Surveys_Inserted.

  3. V editoru kódu, přidejte následující kód, který Surveys_Inserted metoda:

    Dim c As Customer = Me.DataWorkspace.DeveloperData.Customers.Where(
                Function(f) f.CompanyName = entity.Customer.CompanyName).FirstOrDefault()
            If (Not c Is Nothing) Then
                c.LastSurveyDate = Date.Today
                Me.DataWorkspace.DeveloperData.SaveChanges()
            End If

    Customer c = this.DataWorkspace.DeveloperData.Customers.Where(f =>
 f.CompanyName == entity.Customer.CompanyName).FirstOrDefault();

            if (c != null)
            {
                c.LastSurveyDate = DateTime.Today;
                this.DataWorkspace.DeveloperData.SaveChanges();
            }

K otestování změny

  1. V panelu nabídek zvolte možnost Ladit, Spustit ladění.

  2. V dialogovém okně domácí zvolte přidat průzkum tlačítko.

  3. V zákazníka vyberte zákazníka.

  4. V produktu vyberte produkt.

  5. V každé zbývající seznamů, zvolte hodnotu a pak zvolte Uložit tlačítko.

  6. Ověřte, zda obsahuje seznam průzkumy průzkumu, kterou jste právě vytvořili.

  7. V nabídce, zvolte zpět na web.

    Zobrazí se váš web služby SharePoint Developer.V zákazníci seznamu, LastSurveyDate byla aktualizována pro zákazníka, který jste právě zjišťování.

  8. Zavřete okno prohlížeče, chcete-li ukončit aplikaci z běhu.

Aktualizovat na úvodní obrazovce a záhlaví

Dále budete aktualizovat úvodní obrazovka, která se zobrazí při spuštění aplikace, zobrazí se název aplikace namísto názvu projektu.Je také změnit název zobrazený v záhlaví nebo v prohlížeči karty.

Chcete-li aktualizovat zobrazované řetězce

  1. V Průzkumníka řešení, rozbalte položku SurveyApp.HTMLClient uzel, otevřete místní nabídku pro default.htm souboru a poté zvolte možnost otevřete.

  2. Vyhledejte v editoru kódu <div> elementu a potom nahradit SurveyApp s Contoso Product Surveys.

    Tento řetězec se zobrazí na úvodní obrazovce.

  3. V elementu < title > nahradit SurveyApp s Contoso Product Surveys.

K otestování změny

  1. V panelu nabídek zvolte možnost Ladit, Spustit ladění.

    Všimněte si, že se zobrazí Contoso produktu průzkumy na úvodní obrazovce a v záhlaví.

  2. Zavřete okno prohlížeče, chcete-li ukončit aplikaci z běhu.

Přidat podporu pro odesílání a zobrazení fotografií

Dále přidáte podporu pro odesílání fotografií do knihovny obrázků služby SharePoint.Když obchodním zástupcem nahraje fotografii, SharePoint automaticky vytvoří miniaturu tuto fotografii a verze, která je optimalizována pro web.Tyto další obrázky vám pomůže obchodních zástupců Procházet a správě obrázků rychleji a snadněji ve službě SharePoint než v SQL databáze pro LightSwitch.

Aplikace pro SharePoint mohou zahrnovat různé prvky, například seznamy, moduly, typy obsahu a kontejnery, které jsou uloženy ve webové aplikaci a které jsou nainstalovány a odebrat jako součást aplikace.

Chcete-li přidat fotografii entity

  1. V Průzkumníka řešení, otevřete místní nabídku pro SurveyApp.Server uzel a poté zvolte možnost přidat tabulku.

  2. V vlastnosti okna v název text zadejte fotografii.

  3. V návrháři entit zadejte následující hodnoty:

    Name

    Typ

    Požadováno

    FullImageUrl

    Webové adresy

    Ano

    ThumbnailUrl

    Webové adresy

    Ano

    OptimizedUrl

    Webové adresy

    Ano

    NameWithExt

    String

    Ano

    Datum vytvoření

    Datum a čas

    Ano

Chcete-li přidat relaci

  1. V Průzkumníka řešení, otevřete místní nabídku pro Surveys.lsml uzel a poté zvolte možnost otevřete.

  2. V v návrháři entit, na panelu nástrojů zvolte vztah odkazu.

  3. V přidat nový vztah dialogovém název řádku a k sloupec, zvolte fotografii v seznamu.

  4. V násobnost řádku a z sloupec, zvolte jeden v seznamu.

  5. V násobnost řádku a k sloupec, zvolte mnoho v seznamu.

  6. V na odstranění chování řádku a z sloupec, zvolte Cascade delete v seznamu a poté zvolte možnost OK tlačítko.

Chcete-li přidat knihovny obrázků serveru SharePoint

  1. V Průzkumníka řešení, otevřete místní nabídku pro SurveyApp.SharePoint uzel, zvolte přidata poté zvolte možnost novou položku.

  2. V přidat novou položku dialogové okno zvolte seznam.

  3. V název text zadejte fotografiea poté zvolte možnost přidat tlačítko.

  4. V Průvodce vlastním nastavením SharePoint, zvolte vytvořit seznam založený na existující šablony seznamu přepínač.

  5. V oznámení seznam, zvolte knihovny obrázkůa poté zvolte možnost Dokončit tlačítko.

Chcete-li přidat třída nástrojů

  1. V Průzkumníka řešení, otevřete místní nabídku pro SurveyApp.Server uzel, zvolte přidata poté zvolte možnost existující položku.

    Přidat existující položku zobrazí se dialogové okno.

  2. Vyhledejte PhotoListHelper.vb nebo PhotoListHelper.cs soubor, který stažen jako součást vzorku a poté zvolte možnost přidat tlačítko.

  3. V editoru kódu v AddPhoto metodu, vyhledejte řádek siteContext.ExecuteQuery()a pak přidejte následující kód:

    siteContext.Load(siteContext.Web)
siteContext.ExecuteQuery()

    siteContext.Load(siteContext.Web);
siteContext.ExecuteQuery();

    [!POZNÁMKA]

    Tento doplňkový kód je nezbytné v Visual Studio 2013 Chcete-li zabránit výjimce v následných volání na adresu URL.

  4. V nabídce, zvolte sestavení, sestavit řešení zajistit, že kód správně zkompiluje.

Chcete-li přidat řadič WebAPI

  1. V Průzkumníka řešení, otevřete místní nabídku pro SurveyApp.Server uzel, zvolte přidata poté zvolte možnost novou položku.

  2. V přidat novou položku dialogové okno zvolte webové uzel a poté zvolte možnost třídy řadiče webové rozhraní API šablony.

  3. V název text zadejte PhotosControllera poté zvolte možnost přidat tlačítko.

  4. V editoru kódu nahraďte obsah s následujícím kódem:

    Imports System.Net
Imports System.Web.Http
Imports LightSwitchApplication
Imports Microsoft.SharePoint.Client
Imports System.IO
Imports System.Net.Http
Imports System.Net.Http.Headers
Imports System.Text
Imports System.Threading.Tasks

Public Class PhotosController
    Inherits ApiController


Private _appWebContext As ClientContext
    Private ReadOnly Property AppWebContext() As ClientContext
        Get
            If _appWebContext Is Nothing Then
                Using serverContext = LightSwitchApplication.ServerApplicationContext.CreateContext()
                    _appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext()
                End Using
            End If
            Return _appWebContext
        End Get
    End Property
    Public Function PostFormData() As Task(Of HttpResponseMessage)
        If Not Request.Content.IsMimeMultipartContent() Then
            Throw New HttpResponseException(HttpStatusCode.UnsupportedMediaType)
        End If
        Dim memStream = New MultipartMemoryStreamProvider()
        Dim spCtx = AppWebContext
        Dim myTask = Request.Content.ReadAsMultipartAsync(memStream).ContinueWith(
          Function(t)
                  If t.IsFaulted OrElse t.IsCanceled Then
                      Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception)
                  End If
                  Dim fileList = New StringBuilder()
                  For Each contentItem In memStream.Contents
                      Dim sourceFileName = Path.GetFileName(contentItem.Headers.ContentDisposition.FileName.Replace("""", ""))
                      Try
                          Dim fileReadTask = contentItem.ReadAsByteArrayAsync().ContinueWith(
                              Function(frt)
                                Dim photoUrl = PhotoListHelper.AddPhoto(frt.Result, sourceFileName, spCtx)
                                Return photoUrl
                            End Function
                          )
                          fileReadTask.Wait()
                          fileList.AppendLine(fileReadTask.Result)
                      Catch ex As Exception
                          fileList.AppendLine("FAILED::" + ex.Message)
                      End Try
                  Next
                  Return Request.CreateResponse(HttpStatusCode.Created, fileList.ToString(), New MediaTypeHeaderValue("application/xml"))
              End Function
        )
        Return myTask

    End Function
    Public Function DeletePhoto(url As String) As Task(Of HttpResponseMessage)
        Dim spCtx = AppWebContext
        Dim deleteTask = New Task(Of HttpResponseMessage)(
            Function()
                    Try
                        PhotoListHelper.DeletePhoto(url, spCtx)
                        Return Request.CreateResponse(HttpStatusCode.OK)
                    Catch ex As Exception
                        Return Request.CreateErrorResponse(HttpStatusCode.NotModified, ex)
                    End Try
                End Function
        )
        deleteTask.Start()
        Return deleteTask
    End Function
End Class

    using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Net;
using System.Web.Http;
using LightSwitchApplication;
using Microsoft.SharePoint.Client;
using System.IO;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;

public class PhotosController : ApiController
{


private ClientContext appWebContext;
private ClientContext AppWebContext
        {
            get
            {
                if (appWebContext == null)
                {
                    using (var serverContext = LightSwitchApplication. ServerApplicationContext.CreateContext())
                    {
                        appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext();
                    }
                }
                return appWebContext;
            }
        }

        public Task<HttpResponseMessage> PostFormData()
        {
            if (!Request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }


                // Since we're uploading the image to Sharepoint directly, we'll just read the Http content into memory
                var memoryStream = new MultipartMemoryStreamProvider();
                // We need to get the appweb context before forking the new task; otherwise the LightSwitch runtime will 
                // throw because there is no HttpContext available on the calling thread.
                var sharepointContext = this.AppWebContext;
                var task = Request.Content.ReadAsMultipartAsync(memoryStream).
                    ContinueWith<HttpResponseMessage>(t =>
                    {
                        if (t.IsFaulted || t.IsCanceled)
                        {
                            Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);
                        }

                        // There can be multiple files in the POST, so we'll upload each attachment and attach its new
                        // URL (in the SP Picture Library).
                        StringBuilder fileList = new StringBuilder();
                        foreach (var contentItem in memoryStream.Contents)
                        {

                            var sourceFileName = Path.GetFileName(contentItem.Headers.ContentDisposition.FileName.Replace("\"", ""));
                            try
                            {
                                // Read the contents of the file into memory and upload it to Sharepoint
                                var fileReadTask = contentItem.ReadAsByteArrayAsync().
                                    ContinueWith<string>(frt =>
                                    {
                                        var photoURL = PhotoListHelper.AddPhoto(frt.Result, sourceFileName, sharepointContext);
                                        return photoURL;
                                    });
                                fileReadTask.Wait();
                                fileList.AppendLine(fileReadTask.Result);
                            }
                            catch (Exception ex)
                            {
                                fileList.AppendLine(@"FAILED::" + ex.Message);
                            }
                        }
                        return Request.CreateResponse(HttpStatusCode.Created, fileList.ToString(), new MediaTypeHeaderValue("application/xml"));
                    });
                return task;

        }

        public Task<HttpResponseMessage> DeletePhoto(string url)
        {
            var sharepointContext = this.AppWebContext;

            var deleteTask = new Task<HttpResponseMessage>(
                () =>
                {
                    try
                    {
                        PhotoListHelper.DeletePhoto(url, sharepointContext);
                        return Request.CreateResponse(HttpStatusCode.OK);
                    }
                    catch (Exception e)
                    {
                        return Request.CreateErrorResponse(HttpStatusCode.NotModified, e);
                    }
                });
            deleteTask.Start();
            return deleteTask;
        }
}

    Všimněte si, že tento kód získá SharePoint objekt hostitele pomocí serveru rozhraní API pro LightSwitch: appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext().SharePoint Hostitele objekt poskytuje přístup k několika užitečné vlastnosti a metody, které se používají k interakci s webem služby SharePoint.Zejména GetAppWebClientContext metoda představuje vstupní bod pro interakci s prvky, které náleží do webové aplikace.Když webové aplikace ClientContext je načtena, token řádné kontextu se používá ke komunikaci zpět do služby SharePoint.

Chcete-li přidat trasu HTTP do řadiče

  1. V Průzkumníka řešení, otevřete místní nabídku pro SurveyApp.Server uzel, zvolte přidata poté zvolte možnost novou položku.

  2. V přidat novou položku dialogové okno zvolte webové uzel a poté zvolte možnost Třída globální aplikace šablony.

  3. V název text zadejte Global.asaxa poté zvolte možnost přidat tlačítko.

  4. V editoru kódu, zadejte následující Imports nebo Using příkazů:

    Imports System.Web.Routing
Imports System.Web.Http

    using System.Web.Routing;
using System.Web.Http;

    Do metody Application_Start přidejte následující kód:

    RouteTable.Routes.MapHttpRoute(
       name := "DefaultApi",
      routeTemplate := "api/{controller}/{id}",
      defaults := New With { .id = System.Web.Http.RouteParameter.Optional }
  )

    RouteTable.Routes.MapHttpRoute(
                           name: "DefaultApi",
                           routeTemplate: "api/{controller}/{id}",
                           defaults: new { id = System.Web.Http.RouteParameter.Optional }
                           );
    }

    Trasa HTTP umožňuje controller, který má být volána z klienta.

  5. V nabídce, zvolte sestavení, sestavit řešení zajistit, že kód správně zkompiluje.

Ověřit aplikace k interakci se knihovna obrázků fotografie

Webové aplikace, která obsahuje fotografie knihovny obrázků, je umístěn v izolovanou doménu.Ve výchozím nastavení aplikace není ověřen k interakci se webové aplikace, takže je nutné přidat jednoduchého skriptu k provedení tohoto ověření.

Chcete-li přidat ověřování

  1. V Průzkumníka řešení, rozbalte položku SurveyApp.HTMLClient uzel, otevřete místní nabídku pro skripty uzel, zvolte přidata poté zvolte možnost existující položku.

  2. V přidat existující položku dialogové okno pole, vyhledejte sharepointauthhelper.js soubor, který stažen jako součást vzorku a poté zvolte možnost přidat tlačítko.

  3. V editoru kódu nahraďte obsah s následujícím kódem:

    $(document).ready(function () {
var paramName = "SPAppWebUrl";
var match = RegExp('[?&]' + paramName + '=([^&]*)')
.exec(window.location.search);
var appWebUrl = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
if (appWebUrl) {
var authproxy = appWebUrl + "/_layouts/15/appwebproxy.aspx"
var iframe = $("<iframe src='" + authproxy + "' style='width: 0px; height: 0px; border: 0px'/>");
$("body").append(iframe);
}
});

    [!POZNÁMKA]

    V Visual Studio 2013, ověřování pro aplikace SharePoint používá řetězec dotazu namísto do souboru cookie k předání adresy URL.

  4. V Průzkumníka řešení, otevřete místní nabídku pro default.htm souboru a poté zvolte možnost otevřete.

  5. V soubor Default přidejte odkaz na následující:

    <script type="text/javascript" src="Scripts/sharepointauthhelper.js"></script

  6. V nabídce, zvolte sestavení, sestavit řešení zajistit, že kód správně zkompiluje.

Přidat vlastní ovládací prvek pro odesílání fotografie

Dále vytvoříte vlastní ovládací prvek, který vás vyzve k odesílání fotografií každý produkt zobrazení obchodních zástupců.

Vytvoření vlastního ovládacího prvku

  1. V Průzkumníka řešení, rozbalte položku SurveyApp.HTMLClient uzel, otevřete místní nabídku pro skripty uzel, zvolte přidata poté zvolte možnost existující položku.

  2. V přidat existující položku dialogové okno pole, vyhledejte photohelper.js soubor, který stažen jako součást vzorku a poté zvolte možnost přidat tlačítko.

  3. V Průzkumníka řešení, otevřete místní nabídku pro default.htm souboru a poté zvolte možnost otevřete.

  4. V editoru kódu, přidejte odkaz na následující:

    <script type="text/javascript" src="Scripts/photohelper.js"></script>

  5. V Průzkumníka řešení, na panelu nástrojů zvolte logické zobrazení v seznamu.

  6. Otevřete místní nabídku pro AddEditSurvey.lsml obrazovky uzel a potom vyberte Open.

  7. V Návrháři obrazovky, otevřete místní nabídku pro automaticky otevíraná okna uzel a poté zvolte možnost přidat místní nabídka.

  8. V vlastnosti okna v název text zadejte UploadPhotos.

  9. V Návrháři obrazovky pod rozložení řádků | Odesílání fotografií uzel, rozbalte položku přidat uzel a poté zvolte možnost nové vlastní ovládací prvek.

    Přidat vlastní ovládací prvek se zobrazí dialogové okno.

  10. Zvolte OK tlačítko přijmout výchozí hodnotu obrazovce a zavřete dialogové okno.

  11. V vlastnosti okna v název text zadejte UploadControla poté zvolte možnost upravit kód vykreslení hypertextový odkaz.

  12. V editoru kódu, zadejte následující řádek kódu nad Moje aplikace.Metoda AddEditSurvey.UploadControl_render:

    var $uploadControlElement, uploadControlContentItem;

    Přidejte do těla metody následující kód:

    $uploadControlElement = $(element);
    uploadControlContentItem = contentItem;

    Když obchodním zástupcem nahraje fotografii, tento kód vytvoří fotografii entity v databázi vnitřní vlastnost odkazy plné velikosti, optimalizované a miniatury obrázků adresy URL v knihovně obrázků.Tuto entitu budou použita k zobrazení obrázků v aplikaci průzkumu později.

  13. V Průzkumníka řešení, otevřete místní nabídku pro AddEditSurvey.lsml obrazovky uzel a potom vyberte otevřete.

  14. V Návrháři obrazovky, otevřete místní nabídku pro rozložení řádků | Odesílání fotografií uzel a poté zvolte možnost přidat tlačítko.

  15. V přidat tlačítko dialogové okno zvolte napsat vlastní metody přepínač.

  16. Pojmenujte metodu UploadPhotoa poté zvolte možnost OK tlačítko.

  17. V obrazovce Designer, otevřete místní nabídku pro odeslat fotografii uzel a poté zvolte možnost upravit kód pro spuštění.

  18. V Editoru kódu přidejte následující kód do metody Upload:

    if ($("#fileInput").val() != "") {
        $.mobile.loading('show');
        $("#uploadForm").submit();
    }

    Tento kód se spustí, když uživatel provede ověření klepnutím odeslat fotografii na tlačítko UploadControl.

  19. V Návrháři obrazovky, otevřete místní nabídku pro karty uzel a poté zvolte možnost přidat záložku.

  20. V vlastnosti okna, jméno na kartě fotografie.

  21. Níže rozložení řádků | Fotografie uzel, otevřete místní nabídku pro panel příkazů uzel a poté zvolte možnost přidat tlačítko.

  22. V přidat tlačítko dialogové okno zvolte napsat vlastní metody přepínač, pojmenujte metodu UploadPhotosa poté zvolte možnost OK tlačítko.

  23. V vlastnosti okna, zadejte nahrát fotografie jako zobrazované jméno.

  24. V ikonu seznam, zvolte přidat obrázek.

  25. V obrazovce Designer, otevřete místní nabídku pro nahrát fotografie uzel a poté zvolte možnost upravit kód pro spuštění.

  26. V Editoru kódu přidejte následující kód:

    showUploadPopup(screen);

    Tento kód zobrazí místní nabídka informace, když uživatel provede ověření klepnutím nahrát fotografie tlačítko.

  27. V nabídce, zvolte sestavení, sestavit řešení zajistit, že kód správně zkompiluje.

Přidat obrazovce podporu pro zobrazení fotografie

Dále přidáte podporu pro zobrazení fotografií na AddEditSurvey obrazovky.Pro každou fotografii, zobrazí se miniatury, a pak při obchodním zástupcem zvolí miniatury, obrázek větší, optimalizované pro web se zobrazí v dialogovém okně.Kromě toho přidáte podporu pro odstraňování fotografie při obchodním zástupcem odstraní záznamy zjišťování pro tyto fotografie.

Chcete-li zobrazit miniatury

  1. V Průzkumníka řešení, otevřete místní nabídku pro AddEditSurvey.lsml obrazovky uzel a potom vyberte otevřete.

  2. V levém podokně návrháře obrazovky, zvolte přidat fotografie hypertextový odkaz.

    Fotografie dotazu je přidána na obrazovku.

  3. V prostředním podokně návrháře obrazovky v přidat seznam pro rozložení řádků | Fotografie uzel, zvolte fotografie.

  4. V seznam seznam, zvolte dlaždice seznamu.

  5. Odstranit úplná adresa Url obrázku, optimalizované adresy Url, název s klapka, datum vytvoření, a průzkumu uzlů.

    Pouze adresa Url miniaturu by měl zůstat uzlu.

  6. V seznamu miniaturu Url uzel, zvolte obrázek.

  7. V vlastnosti okna v části šířkav pixelů text zadejte 60.

  8. V části výškuv pixelů text zadejte 60.

Chcete-li přidat místní okno

  1. V Návrháři obrazovky, zvolte automaticky otevíraná okna uzel a poté zvolte možnost přidat místní nabídka.

  2. V vlastnosti okna v název text zadejte ViewPhotoDetails.

  3. V levém podokně návrháře obrazovce přesunout název s klapka uzlu tak, že se zobrazí v části rozložení řádků | Zobrazit podrobnosti fotografii uzlu.

  4. V seznamu název s klapka uzel, zvolte Text.

  5. Přesunout datum vytvoření uzlu tak, že se zobrazí v části název s klapka uzlu.

  6. V seznamu datum vytvoření uzel, zvolte Text.

  7. Přesunout optimalizované adresy Url uzlu tak, že se zobrazí v části datum vytvoření uzlu.

  8. V seznamu optimalizované adresy Url uzel, zvolte obrázek.

  9. V vlastnosti okna v šířka seznam, zvolte přizpůsobit obsahu.

  10. V výšku seznam, zvolte přizpůsobit obsahu.

  11. V pozici popisku seznam, zvolte žádný.

  12. V Návrháři obrazovky, zvolte seznam dlaždice | Fotografie uzlu.

  13. V vlastnosti okna, zvolte klepněte na položku hypertextový odkaz.

    Upravit akce ItemTap se zobrazí dialogové okno.

  14. V místní nabídka seznam, zvolte zobrazit podrobnosti o fotografiia poté zvolte možnost OK tlačítko.

Chcete-li přidat podporu pro odstraňování fotografie

  1. V Průzkumníka řešení, otevřete místní nabídku pro Photos.lsml uzel a poté zvolte možnost otevřete.

    Otevře se v návrháři entit.

  2. V psát kód seznam, zvolte Photos_Deleted.

  3. V Editoru kódu přidejte následující kód do metody Photos_Deleted:

    Try
                PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext())
            Catch ex As Exception
            End Try

    try
            {
                PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext());
            }
            catch (Exception) { }

    Vztah mezi fotografie a zjišťování entity byla nastavena na odstranit Cascade, takže je Photos_Deleted metoda je volána, když dojde k odstranění záznamu průzkumu.Tento kód volá DeletePhoto metodu PhotoListHelper třídy odstranit fotografie ze seznamu služby SharePoint.

  4. V Průzkumníka řešení, otevřete místní nabídku pro AddEditSurvey.lsml uzel a poté zvolte možnost otevřete.

  5. V Návrháři obrazovky, otevřete místní nabídku pro rozložení řádků | Zobrazit podrobnosti fotografii uzel a poté zvolte možnost přidat tlačítko.

  6. V přidat tlačítko dialogové okno zvolte napsat vlastní metody přepínač.

  7. V metody text zadejte DeletePhotoa poté zvolte možnost OK tlačítko.

  8. Otevřete místní nabídku pro odstranit fotografii uzel a poté zvolte možnost upravit kód pro spuštění.

  9. V Editoru kódu přidejte následující kód do metody DeletePhoto_Execute:

    deleteCurrentPhoto(screen);

    Vzhledem k tomu, že jste přidali tento kód v jazyce JavaScript, obchodních zástupců lze odstranit fotografie bez odstranění přidružené průzkumu.

K otestování změny

  1. V panelu nabídek zvolte možnost Ladit, Spustit ladění.

  2. V dialogovém okně domácí zvolte přidat tlačítko.

  3. V zákazníka vyberte zákazníka.

  4. V produktu vyberte produkt.

  5. V každé zbývající seznamů, zvolte hodnotu a pak zvolte Uložit tlačítko.

  6. V seznamu, průzkumy ověřte, zda se zobrazí v průzkumu, kterou jste právě vytvořili.

  7. Na fotografie , vyberte nahrát fotografie tlačítko.

  8. V nahrát fotografie dialogové okno zvolte Procházet tlačítko, přejděte k fotografii do místního počítače a poté zvolte možnost Open tlačítko.

  9. Zvolte odeslat fotografii tlačítko a pak zvolte obrázek miniatury, který se zobrazí.

    Zobrazit fotografii obrázek zobrazí se dialogové okno a obrazu v plné velikosti.

  10. Zvolte odstranit fotografii tlačítko a že ověřte, že byla vyjmuta miniaturu.

  11. Zavřete okno prohlížeče, chcete-li ukončit aplikaci z běhu.

Publikování bylo dokončeno aplikace do služby SharePoint

Zatím jste pouze spustit aplikaci v režimu ladění, který využívá služby SharePoint k ověřování a přesměruje na místním počítači instanci služby IIS Express.Vaše aplikace je nyní dokončena a můžete publikovat, na místní web služby SharePoint, Microsoft Azure nebo na hostitelském webu třetí strany.Po publikování aplikace ostatním uživatelům v rámci svých počítačů a mobilních zařízení spustit z webu služby SharePoint.Podívejte se na téma postup: publikovat cloudové obchodní aplikace ve službě SharePoint.

Viz také

Další zdroje

Aplikace LightSwitch pro SharePoint