Úprava kódu pomocou Visual Studio Code for the Web (náhľad)

[Táto téma je predbežnou dokumentáciou a môže sa zmeniť.]

Zo štúdia dizajnu môžete upravovať kód stránky pomocou Visual Studio Code pre web. Táto funkcia vám umožňuje upravovať statický obsah, HTML, CSS, Liquid a JavaScript pre nasledujúce metadáta webových stránok:

Metaúdaje Obsah
Rozšírené formuláre (viackrokové formuláre) jazyk JavaScript
Základné formy jazyk JavaScript
Úryvky obsahu Všetok podporovaný obsah zlomku kódu obsahu
Zoznamy jazyk JavaScript
Webové súbory Zobrazenie a sťahovanie mediálnych súborov. Upraviť textové (kódové) súbory.
Webové stránky Všetok podporovaný obsah (podľa jazyka), JavaScript a CSS
Webové šablóny Všetok podporovaný obsah

Poznámka

Nebudete môcť vytvárať záznamy metaúdajov, iba pridávať a upravovať obsah, kód a zobrazovať alebo sťahovať prílohy súborov.

Visual Studio Code for the Web poskytuje bezplatný zážitok z Microsoft Visual Studio Code bez inštalácie, ktorý beží úplne vo vašom prehliadači, čo vám umožňuje prehliadať kód stránky a rýchlo a bezpečne vykonávať ľahké zmeny v kóde. Viac informácií: Visual Studio Code pre webový zážitok.

Dôležité

  • Toto je ukážková funkcia.
  • Funkcie ukážky nie sú určené na produkčné účely a môžu mať obmedzenú funkčnosť. Tieto funkcie sú k dispozícii pred oficiálnym vydaním, aby k nim mohli zákazníci získať rýchly prístup a poskytnúť odozvu.

Demo použitia Visual Studio Code pre web na úpravu Power Pages site.

Poznámka

  • Prvé načítanie Visual Studio Code pre web môže chvíľu trvať, pretože bude inštalovať potrebné rozšírenia pre túto funkciu.
  • Operácie vytvorenia, odstránenia a premenovania súborov nie sú podporované.
  • Táto funkcia používa webové rozšírenie Power Platform Tools . Webové rozšírenia sú obmedzené izolovaným priestorom prehliadača, a preto majú obmedzenia v porovnaní s bežnými rozšíreniami.
    • Power Platform CLI nie je podporovaný.
    • Funkcie webového rozšírenia Power Platform Tools sú obmedzené na skúsenosti s úpravou kódu v Power Pages.
    • Táto funkcia nie je k dispozícii v službách Government Community Cloud (GCC), Government Community Cloud (GCC High) a Department of Defense (DoD). Používatelia v týchto regiónoch budú na úpravu kódu používať aplikáciu Správa portálu . Ďalšie informácie nájdete v časti Úprava kódu v aplikácii Správa portálu.

Úprava kódu je k dispozícii v dizajnérskom štúdiu

Kód vašej stránky môžete začať upravovať pomocou Visual Studio Code for the Web z domovskej stránky Power Pages výberom možnosti Upraviť kód stránky v rozbaľovacom menu Edit výberom c0Edit code/c0.

Kód môžete v dizajnovom štúdiu upravovať aj z nasledujúcich oblastí:

  • Úprava kódu webovej stránky z pracovného priestoru Pages
  • Kód šablóny hlavičky z pracovného priestoru Pages
  • Upraviť vlastné CSS kód z pracovného priestoru Styling
  • Upravte vlastný kód JavaScript pre viackrokové formuláre
  • Upravte vlastný kód JavaScript pre základné formuláre
  • Upravte vlastný JavaScript pre zoznamy
  • Upravte zlomky kódu obsahu
  • Upravte webové šablóny
  • Zobrazenie a sťahovanie mediálnych webových súborov (obrázkov)
  • Úprava textových webových súborov (CSS, JavaScript, iné)

Poďme sa pozrieť, ako upraviť kód pomocou týchto oblastí.

Upravte kód webovej stránky z pracovného priestoru Pages

Keď otvoríte Power Pages design studio, v menu Pages vidíte možnosť Edit code v menu Pages1 a v pravom hornom rohu obrazovky2.

Upravte kód z pracovného priestoru Pages.

Kód šablóny hlavičky z pracovného priestoru Pages

Vyberte Upraviť hlavičku lokality a potom vyberte Upraviť kód na otvorenie editora kódu.

Upravte kód z hlavičky Pages.

Upravte vlastný CSS kód z pracovného priestoru Styling

Prejdite na pracovný priestor Styling a výberom dostupnej vlastnej ponuky CSS Upraviť kód otvorte editor kódu.

Upravte kód z Vlastného CSS.

Zobrazenie akcií v Power Pages

Zobrazenie Power Pages Actions, dostupné v spodnej časti Prieskumníka súborov, vám umožňuje spravovať Power Pages stránky priamo v editore. Znižuje potrebu prejsť na Power Pages design studio tým, že umožňuje vývojárom rýchlo vykonávať bežné úlohy priamo v editore.

Dostupné akcie

  • Ukážka lokality
    Táto akcia vymaže vyrovnávaciu pamäť konfigurácie a otvorí lokalitu vo VS Code. Umožňuje vývojárom prehliadať a testovať zmeny v kóde stránky bez nutnosti prepínať kontext do Power Pages design studio.

  • Otvorte v Power Pages dizajnérskom štúdiu
    Po vykonaní zmien v kóde použite túto akciu na prechod do Power Pages design studio. Je to užitočné na konfiguráciu poskytovateľov overovania, webových rolí a ďalších nastavení lokality, ktoré nie je možné upravovať v editore kódu.

  • Otvoriť v pracovnej ploche VS Code
    Ak je nainštalovaný VS Code Desktop, táto akcia otvorí lokalitu v počítačovej aplikácii. Spustí tiež sťahovanie stránky, čím sa zabezpečí, že kód bude dostupný lokálne a pripravený na úpravy.

Power Pages Zobrazenie akcií vo VS Code.

Upozornenie na konflikt zlúčenia

Ak spolupracujete s inými vývojármi, môžu nastať situácie, keď budete pracovať na rovnakom zdrojovom kóde. V prípade, že sa pokúsite uložiť zmeny do zastaraného súboru, dostanete upozornenie Porovnať alebo Prepísať zmeny.

Porovnanie kódu zobrazí aktuálny kód popri vašom kóde a umožní vám vrátiť sa k existujúcim zmenám, prijať každú zmenu samostatne alebo použiť vaše zmeny a prepísať existujúci obsah.

Konflikty zlúčenia v kóde.

Budete si môcť prezrieť najnovší obsah a kód buď zlúčiť alebo prepísať, alebo zahodiť zmeny.

Návod: Úprava kódu stránky pomocou Visual Studio Code for the Web

V tomto tutoriáli prechádzate úpravou kódu stránky pomocou Visual Studio Code for Web.

Krok 1: Upravte kód stránky pomocou Visual Studio Code for the Web

  1. Otvorte si stránku v Power Pages design studio

  2. V pravom hornom rohu vyberte položku Upraviť kód

    Otvorenie v roku Visual Studio Code z dizajnérskeho štúdia.

  3. Vyberte Otvorte Visual Studio Code v potvrdzovacom dialógu.

  4. Prihláste sa do Visual Studio Code pomocou prihlasovacích údajov do prostredia.

  5. Počkajte, kým sa inicializuje webové rozšírenie Power Platform Tools a v ľavom paneli sa načíta kód webovej stránky.

2. krok: Aktualizujte obsah a kód

  1. Prieskumník na ľavej strane obrazovky načíta príslušné metadáta konfigurácie webových stránok, ktoré je možné upraviť pomocou Visual Code pre web.

    Ponuka Prieskumníka pre pracovný priestor bez názvu zobrazujúci webové súbory.

  2. Vykonajte zmeny v príslušných súboroch metadát a stlačením Ctrl+S zmeny uložte.

  3. Prejdite do dizajnérskeho štúdia a výberom možnosti Synchronizovať stiahnite všetky aktualizácie z aktuálnej relácie dizajnérskeho štúdia.

    Rozhranie, ktoré umožňuje používateľovi vybrať tlačidlo Sync na synchronizáciu zmien vykonaných v Visual Studio Code do návrhu studio.

  4. Vyberte Preview aby ste videli zmeny na Power Pages stránke.

Používanie Visual Studio Code for the Web alebo Visual Studio Code Desktop

Používatelia môžu upravovať, ladiť a prehliadať zmeny úprav stránok pomocou Visual Studio Code for the Web bez potreby používať externé nástroje. Visual Studio Code Desktop poskytuje ďalšie pokročilé funkcie na úpravu všetkých metadát stránok a integráciu s GitHub, frameworkmi a procesmi kontinuálneho integrácie/kontinuálneho vývoja (CI/CD).

Funkcia VS kód pre web Pracovná plocha VS Code
Vytvorte nové záznamy metadát konfigurácie webových stránok No Obmedzené na webové stránky, šablóny stránok, webové šablóny, úryvky obsahu a webové súbory.
Priama úprava stránky Áno No
Úprava metadát stránok Obmedzené na úpravu webových stránok, úryvkov obsahu, základných formulárov, viackrokových formulárov, zoznamov a webových šablón. Všetky konfigurácie metadát Power Pages
Náhľad lokality Plánovaný Plánovaný
Power Platform Rozhranie príkazového riadka podpora No Áno
Pokročilý pracovný postup viazaný na CPU a úložisko - podpora nástroja na zostavenie ReactJS alebo iného frameworku No Áno
Integrácia GitHub s možnosťami ako check-in kódu, check-out, riadenie konfliktov a zlúčenie. No Áno

Úprava kódu v aplikácii Správa portálov

Poznámka

  • Používanie Visual Studio Code for the Web na úpravu webových stránok nie je podporované v Government Community Cloud (GCC), Government Community Cloud (GCC High) a Department of Defense (DoD). Používatelia v týchto regiónoch môžu použiť aplikáciu Správa portálu na vykonanie svojich zmien.

Ak región nepodporuje Visual Studio Code pre web, výberom ikony editora kódu </> v príkazovom paneli sa otvorí aplikácia Portal Management.

Prejdite na príslušné záznamy Webové stránky, Základné formuláre, Viackrokové formuláre, Zoznamy alebo Webové šablóny na úpravu kódu.

Type Umiestnenie kódu
webová stránka Vybrať záznam webovej stránky. Vyberte záznam obsahu webovej stránky z Lokalizovaný obsah sekcia. Kópiu stránky je možné upraviť v Kopírovať (HTML) pole na Všeobecné záložka. Vlastný JavaScript a Vlastné CSS kód je možné upravovať z Pokročilé záložka.
Základný formulár Vyberte základný záznam formulára. Upraviť vlastný JavaScript na karte Ďalšie nastavenia .
Formulár s viacerými krokmi Vyberte záznam formulára s viacerými krokmi.Vyberte krok formulára s viacerými krokmi na karte Kroky formulára . Upraviť vlastný JavaScript na karte Možnosti formulára .
List Vyberte záznam zoznamu. Upraviť vlastný JavaScript na karte Možnosti .
Webová šablóna Vyberte záznam webovej šablóny. Upraviť zdroj na karte Všeobecné .

Uložte záznam a zobrazte náhľad svojho webu, aby ste otestovali svoj kód.

Pozrite si tiež

  • Last updated on