Dela via

Redigera kod med Visual Studio Code för webben (förhandsversion)

  • Artikel

[Det här ämnet är en förhandsversion av dokumentationen och kan ändras.]

I designstudion kan du redigera webbplatskoden med Visual Studio Code för webben. Med den här funktionen kan du redigera statiskt innehåll, HTML, CSS, Liquid och JavaScript för följande webbplatsmetadata:

Metadata Innehåll
Avancerade formulär (flerstegsformulär) JavaScript
Enkla formulär JavaScript
Innehållskodavsnitt Allt innehåll som innehållskodavsnitt
Listor JavaScript
Webbfiler Visa och hämta mediefiler. Redigera textfiler (kod).
Webbsidor Allt innehåll som stöds (per språk), JavaScript och CSS
Webbmallar Allt innehåll som stöds

Kommentar

Du kommer inte att kunna skapa metadataposter, bara lägga till och redigera innehåll, kod och visa/hämta bifogade filer.

Med Visual Studio Code för webben får du en gratis, installationsfri Microsoft Visual Studio Code-upplevelse som körs helt i webbläsaren, så att du kan bläddra i webbplatskoden och göra lätta kodändringar snabbt och säkert. Mer information: Visual Studio Code för webben-upplevelsen.

Viktigt!

  • Detta är en förhandsversion.
  • Förhandsversionsfunktioner ska inte användas i produktion och funktionerna kan vara begränsade. Funktionerna är tillgängliga före den officiella publiceringen så att kunderna kan få tillgång tidigare och ge oss feedback.

Demonstration av hur du använder Visual Studio Code för webben för att redigera Power Pages-webbplatser.

Kommentar

  • Första gången Visual Studio Code för webben läses in kan det ta lite tid, då det kommer att installera de tillägg som krävs för den här funktionen.
  • Åtgärder för att skapa, ta bort och byta namn stöds inte.
  • Den här funktionen använder webbtillägget Power Platform Tools. Webbtillägg begränsas av webbläsarens sandbox-miljö och har därför begränsningar jämfört med vanliga tillägg.
    • Power PlatformCLI stöds inte.
    • Funktionerna i webbtillägget Power Platform Tools är begränsade till Power Pages-kodredigering.
    • Den här funktionen är inte tillgänglig i Government Community Cloud (GCC), Government Community Cloud (GCC High) och Försvarsdepartementet (DoD). Användare i dessa regioner använder appen portalhanteringshantering för att redigera kod. Se Redigera kod i appen portalhantering för mer information.

Redigera kod i designstudion

Du kan börja redigera webbplatsens kod med Visual Studio Code for the Web från Power Pages startsida genom att välja alternativet Redigera webbplatskod från listrutan Redigera.

Du kan också redigera kod i designstudion från följande områden:

Nu ska vi se hur du redigerar kod med de här områdena.

Redigera webbsideskod från arbetsytan Sidor

När du öppnar Power Pages designstudio, du se alternativet Redigera kod i menyn Sidor1 och längst upp till höger på skärmen2.

Redigera kod från arbetsytan Sidor.

Kod för rubrikmallen från arbetsytan Sidor

Välj Redigera webbplatsrubrik och välj Redigera kod för att öppna kodredigeraren.

Redigera kod från rubriken Sidor.

Redigera anpassad CSS-kod från arbetsytan Formatering

Gå till arbetsytan Formatering och välj tillgänglig anpassad CSS i menyn Redigera kod för att öppna kodredigeraren.

Redigera kod från anpassad CSS.

Slå samman meddelande om konflikt

Om du samarbetar med andra utvecklare kan det finnas situationer där du kommer att arbeta med samma källkod. Om du försöker spara ändringar i en inaktuell fil får du ett meddelande till Jämför eller Skriv över ändringar.

Genom att jämföra koden visas aktuell kod tillsammans med din kod och låter dig återgå till de befintliga ändringarna, acceptera varje ändring individuellt eller använda dina ändringar och skriva över det befintliga innehållet.

Slå samman konflikter i kod.

Du kan granska det senaste innehållet och antingen sammanslå eller skriva över koden eller ignorera ändringarna.

Självstudier: Redigera webbplatskod med Visual Studio Code för webben

I den här självstudien går du igenom hur du redigerar webbplatskoden med Visual Studio Code för webben.

Steg 1: Redigera webbplatskod med Visual Studio Code för webben

  1. Öppna din webbplats i Power Pages-designstudion

  2. Längst upp till höger väljer du Redigera kod

    Öppnar kod i Visual Studio Code från designstudion.

  3. Välj Öppna Visual Studio Code i bekräftelsedialogen.

  4. Logga in på Visual Studio Code med autentiseringsuppgifterna till miljön.

  5. Vänta på att Power Platform Tools initieras och på att webbsideskoden ska läsas in i den vänstra rutan.

Steg 2: Uppdatera innehåll och kod

  1. Utforskaren till vänster på skärmen läser in respektive metadata för webbplatskonfiguration som kan redigeras med Visual Code för webben.

    Explorer-menyn för en namnlös arbetsyta som visar webbfiler.

  2. Ändra respektive metadatafiler och håll ned Ctrl+S för att spara ändringarna.

  3. Gå till designstudion och välj Synkronisera för att hämta alla uppdateringar i din aktuella designstudiosession.

    Gränssnitt för att tillåta användare att välja knappen Synkronisera och synkronisera ändringar som gjorts i Visual Studio Code till designstudion.

  4. Välj Förhandsgranska för att se ändringarna på Power Pages-webbplatsen.

Använda Visual Studio Code för webb- eller Visual Studio Code för dator

Användare kan redigera, felsöka och förhandsgranska ändringar i sidredigeringar med Visual Studio Code för webben utan att behöva använda externa verktyg. Visual Studio Code för dator innehåller andra avancerade funktioner för redigering av alla webbplatsmetadata och för att använda GitHub, ramverk och kontinuerlig integrering/kontinuerlig utveckling (CI/CD).

Egenskap VS Code för webben VS Code för dator
Skapa nya metadataposter för webbplatskonfiguration Nej Begränsad till webbsidor, sidmallar, webbmallar, innehållsavsnitt och webbfiler.
Direkt webbplatsredigering Ja Nej
Redigering av webbplatsmetadata Begränsad till redigering av webbsidor, innehållsavsnitt, grundläggande formulär, formulär med flera steg, listor och webbmallar. Alla Power Pages metadatakonfiguration
Förhandsgranskning av webbplats Planerat Planerat
Stöd för Power Platform CLI Nej Ja
Avancerat arbetsflöde för processor och lagring – stöd för ReactJS eller annat ramverksverktyg Nej Ja
Integrering av GitHub med funktioner som kodincheckning, kodutcheckning, hantering av konflikter och sammanslagning. Nej Ja

Redigera kod i portalhanteringsappen

Kommentar

  • Användning Visual Studio Code for the Web för att redigera webbplatser stöds inte i Government Community Cloud (GCC), Government Community Cloud (GCC High) och Försvarsdepartementet (DoD). Användare i dessa regioner kan använda appen portalhantering för att göra ändringar.

Om regionen inte har stöd för Visual Studio Code för webben, väljer du ikonen för kodredigeraren </> i kommandofältet för att öppna appen portalhantering.

Navigera till motsvarande webbsidor, grundläggande formulär, flerstegsformulär, listor eller webbmallar poster för att redigera kod.

Typ Kodplats
Webbsida Välj post för webbplats.
Välj en webbplatsinnehållspost i avsnittet Lokaliserat innehåll.
Sidkopia kan redigeras i fältet Kopiera (HTML) på fliken Allmänt.
Anpassad JavaScript och Anpassad CSS-kod kan redigeras på fliken Avancerat.
Grundläggande formulär Markera den grundläggande formulärposten.
Redigera Anpassad JavaScript på fliken Ytterligare inställningar.
Flerstegsformulär Markera formulärposten med flera steg.
Välj steget med flera steg i formuläret på fliken Formulärsteg.
Redigera Anpassad JavaScript på fliken Formuläralternativ.
List Markera listposten.
Redigera Anpassad JavaScript på fliken Alternativ.
Webbmall Välj en webbmallspost.
Redigera källa på fliken Allmänt.

Spara posten och förhandsgranska webbplatsen för att testa koden.

Se även