Úprava kódu pomocí Visual Studio Code pro web (Preview)

[Toto téma představuje předběžnou dokumentaci, která může být změněna.]

V návrhovém studiu můžete upravit kód webu pomocí Visual Studio Code pro web. Tato funkce umožňuje upravovat statický obsah, HTML, CSS, Liquid a JavaScript pro následující metadata webu:

Metadata	Obsahu
Rozšířené formuláře (formuláře s více kroky)	JavaScript
Základní formuláře	JavaScript
Fragmenty kódu obsahu	Veškerý podporovaný obsah fragmentů obsahu
Seznamy	JavaScript
Webové soubory	Zobrazení a stahování mediálních souborů. Úprava textových (kódových) souborů.
Webové stránky	Veškerý podporovaný obsah (podle jazyka), JavaScript a CSS
Šablony webů	Veškerý podporovaný obsah

Poznámka

Nebudete moct vytvářet záznamy metadat, přidávat a upravovat jenom obsah, kód a zobrazit nebo stáhnout přílohy souborů.

Visual Studio Code pro web poskytuje bezplatné prostředí Microsoft Visual Studio Code s nulovou instalací, které běží zcela v prohlížeči a umožňuje procházet kód webu a rychle a bezpečně provádět jednoduché změny kódu. Další informace: Visual Studio Code pro webové prostředí.

Důležité

• Toto je funkce Preview.
• Funkce Preview nejsou určené pro normální používání a mohou mít omezené fungování. Jsou to funkce, které jsou poskytnuté před svým oficiálním vydáním, aby si je zákazníci mohli co nejdříve vyzkoušet a mohli nám napsat své názory.

Poznámka

• Při prvním Visual Studio Code pro web načtení může nějakou dobu trvat, protože se pro tuto funkci nainstalují požadovaná rozšíření.
• Operace vytvoření, odstranění a přejmenování souborů se nepodporují.
• Tato funkce používá webové rozšíření Power Platform Tools . Webová rozšíření jsou omezena sandboxem prohlížeče a proto mají v porovnání s normálními rozšířeními omezení.
  • Rozhraní příkazového řádku Power Platform není podporováno.
  • Funkce webového rozšíření Power Platform Tools jsou omezené na Power Pages prostředí pro úpravy kódu.
  • Tato funkce není dostupná v cloudu GCC (Government Community Cloud), Government Community Cloud (GCC High) a v oddělení obrany (DoD). Uživatelé v těchto oblastech budou k úpravě kódu používat aplikaci Správa portálů . Další informace naleznete v části Úprava kódu v aplikaci Správa portálu .

Úprava kódu dostupná v návrhovém studiu

Můžete začít upravovat kód svého webu pomocí Visual Studio Code pro web z domovské stránky Power Pages tak, že v rozevírací nabídce Upravit vyberete možnost Edit site code.

Kód můžete upravovat také v návrhovém studiu v následujících oblastech:

• Úprava kódu webové stránky z pracovního prostoru Stránky
• Kód šablony záhlaví z pracovního prostoru Stránky
• Úprava vlastního kódu CSS z pracovního prostoru Styly
• Úprava vlastního kódu JavaScript pro formuláře s více kroky
• Úprava vlastního kódu JavaScript pro základní formuláře
• Úprav vlastního JavaScript pro seznamy
• Úprava fragmentů kódu
• Úprava webových šablon
• Zobrazení a stahování mediálních webových souborů (obrázků)
• Úprava textových webových souborů (CSS, JavaScript, jiné)

Podívejme se, jak upravit kód pomocí těchto oblastí.

Úprava kódu webové stránky z pracovního prostoru Stránky

Po otevření studia návrhů Power Pages uvidíte možnost Upravit kód v nabídce Stránky¹ a v pravém horním rohu obrazovky².

Úprava kódu z pracovního prostoru Stránky.

Kód šablony záhlaví z pracovního prostoru Stránky

Vyberte Upravit záhlaví webu a poté vyberte Upravit kód a otevřete editor kódu.

Úprava kódu ze záhlaví Stránky.

Úprava vlastního kódu CSS z pracovního prostoru Styly

Přejděte na Pracovní prostor pro styl a vyberte dostupnou nabídku CSS Upravit kód pro otevření editoru kódu.

Úprava vlastního kódu CSS.

zobrazení akcí Power Pages

Zobrazení Power Pages Actions přístupné v dolní části Průzkumníka souborů umožňuje spravovat Power Pages weby přímo v editoru. Snižuje nutnost přepnout na Power Pages design studio tím, že vývojářům umožňuje rychle provádět běžné úlohy v editoru.

Dostupné akce

• Náhled webu
  Tato akce vymaže mezipaměť konfigurace a otevře lokalitu ve VS Code. Umožňuje vývojářům zobrazit náhled a otestovat změny kódu webu, aniž by museli přepínat kontext do Power Pages design studia.

• Otevřít v návrhovém studiu Power Pages
  Po provedení změn kódu pomocí této akce přejděte do Power Pages design studia. To je užitečné při konfiguraci zprostředkovatelů ověřování, webových rolí a dalších nastavení webu, která se nedají upravovat v editoru kódu.

• Otevřít v desktopové verzi VS Code
  Pokud je nainstalovaná desktopová aplikace VS Code, tato akce otevře web v desktopové aplikaci. Aktivuje také stahování webu a zajišťuje, aby byl kód k dispozici místně a připravený k úpravám.

Oznámení o konfliktu sloučení

Pokud spolupracujete s dalšími vývojáři, můžou se vyskytnout situace, kdy budete pracovat na stejném zdrojovém kódu. V případě, že se pokusíte uložit změny do zastaralého souboru, dostanete upozornění k porovnání nebo přepsání změn.

Porovnáním kódu se zobrazí aktuální kód vedle vašeho kódu a umožní vám vrátit se ke stávajícím změnám, přijmout každou změnu jednotlivě nebo použít vaše změny a přepsat stávající obsah.

Sloučení konfliktů v kódu.

Budete si moci prohlédnout nejnovější obsah a kód buď sloučit nebo přepsat, nebo zahodit změny.

Kurz: Úprava kódu webu pomocí Visual Studio Code pro web

V tomto kurzu si projdete úpravou kódu webu pomocí Visual Studio Code pro web.

Krok 1: Úprava kódu webu pomocí Visual Studio Code pro web

1. Otevřete svůj web v Power Pages design studiu

2. V pravém horním rohu vyberte Upravit kód.

   

3. V potvrzovacím dialogovém okně vyberte Open Visual Studio Code.

4. Přihlaste se k Visual Studio Code pomocí přihlašovacích údajů prostředí.

5. Počkejte na inicializaci webového rozšíření Power Platform Tools a načtení kódu webové stránky v levém podokně.

Krok 2: Aktualizujte obsah a kód

1. Průzkumník na levé straně obrazovky načte příslušná metadata konfigurace webu, která lze upravovat pomocí Visual Code pro web.

   Nabídka Průzkumníka pro nepojmenovaný pracovní prostor zobrazující soubory webu.

2. Proveďte změny v příslušných souborech metadat a stisknutím Ctrl+S změny uložte.

3. Přejděte do návrhového studia a volbou Synchronizovat stáhněte všechny aktualizace ve vaší aktuální relaci návrhového studia.

   

4. Výběrem možnosti Preview zobrazíte změny na webu Power Pages.

Použití Visual Studio Code pro web nebo Visual Studio Code Desktop

Uživatelé můžou upravovat, ladit a zobrazit náhled změn v úpravách stránek pomocí Visual Studio Code pro web, aniž by museli používat externí nástroje. Visual Studio Code Desktop poskytuje další pokročilé funkce pro úpravy všech metadat webu a integraci s procesy GitHub, architektur a kontinuální integrace a průběžného vývoje (CI/CD).

Funkce	VS Code pro web	VS Code pro stolní počítače
Vytvoření nových záznamů metadat konfigurace webu	Ne	Omezeno na webové stránky, šablony stránek, webové šablony, úryvky obsahu a webové soubory.
Přímá úprava webu	Ano	Ne
Úprava metadat webu	Omezeno na úpravy webových stránek, úryvků obsahu, základních formulářů, vícekrokových formulářů, seznamů a webových šablon.	Konfigurace metadat všech Power Pages
Náhled webu	Naplánováno	Naplánováno
Podpora Power Platform CLI	Ne	Ano
Pokročilé pracovní postupy vázané na procesor a úložiště – Podpora nástrojů ReactJS nebo jiného nástroje pro sestavení architektury	Ne	Ano
Integrace GitHub s funkcemi, jako je vyhodnocení kódu, odhlášení, správa konfliktů a sloučení.	Ne	Ano

Úprava kódu v aplikaci Správa portálu

Poznámka

• Použití Visual Studio Code pro web k úpravám webových stránek není podporováno v Government Community Cloud (GCC), Government Community Cloud (GCC High) a Ministerstvu obrany (DoD). Uživatelé v těchto oblastech můžou k provádění změn použít aplikaci Správa portálu .

Pokud oblast nepodporuje Visual Studio Code pro web, výběrem ikony editoru kódu </> na panelu příkazů otevřete aplikaci Portal Management.

Přejděte na odpovídající záznamy kategorie Weby, Základní formuláře, Formuláře s více kroky, Seznamy nebo Webové šablony a tam upravte kód.

Typ	Umístění kódu
webová stránka	Vyberte záznam webové stránky. Vyberte záznam obsahu webové stránky v sekci Lokalizovaný obsah. Kopii stránky lze upravit v poli Kopírovat (HTML) na kartě Obecné.Kód Vlastní JavaScript a Vlastní CSS lze upravit z karty Rozšířený.
Základní formulář	Vyberte základní záznam formuláře. Upravit vlastní JavaScript na záložce Další nastavení
Formulář s více kroky	Vyberte záznam formuláře s více kroky.Vyberte krok formuláře s více kroky na kartě Kroky formuláře. Upravte Vlastní JavaScript na kartě Možnosti formuláře.
Seznam	Vyberte záznam seznamu. Upravit vlastní JavaScript na kartě Možnosti
Šablona webu	Vyberte záznam webové šablony. Upravit zdroj na kartě Obecné

Uložte záznam a zobrazte náhled svého webu a otestujte kód.

Viz také

• Použijte Visual Studio Code a Microsoft Power Platform CLI