Share via

Code bewerken met Visual Studio Code voor het web (preview)

  • Artikel

[Dit onderwerp maakt deel uit van de voorlopige documentatie en kan nog veranderen.]

Vanuit de ontwerpstudio kunt u de sitecode bewerken met Visual Studio Code voor het web. Met dit kenmerk kunt u statische inhoud, HTML, CSS, Liquid en JavaScript bewerken voor de volgende metagegevens voor websites:

Metagegevens Inhoud
Geavanceerde formulieren (formulieren voor meerdere stappen) JavaScript
Basisformulieren JavaScript
Inhoudsfragmenten Alle ondersteunde inhoud van inhoudsfragmenten
Lijsten JavaScript
Webbestanden Mediabestanden bekijken en downloaden. Tekstbestanden (code) bewerken.
Webpagina's Alle ondersteunde inhoud (per taal), JavaScript en CSS
Websjablonen Alle ondersteunde inhoud

Notitie

U kunt geen metagegevensrecords maken, alleen inhoud en code toevoegen en bewerken en bestandsbijlagen bekijken/downloaden.

Visual Studio Code voor het web biedt een gratis Microsoft Visual Studio Code-ervaring (geen installatie nodig) die volledig in uw browser wordt uitgevoerd, zodat u door de sitecode kunt bladeren en snel en veilig kleine codewijzigingen kunt doorvoeren. Meer informatie: Ervaring van Visual Studio Code voor het web

Belangrijk

  • Dit is een preview-functie.
  • Preview-functies zijn niet bedoeld voor productiegebruik en bieden mogelijk beperkte functionaliteit. Deze functies zijn beschikbaar vóór een officiële release zodat klanten vroeg toegang kunnen krijgen en feedback kunnen geven.

Demo van het gebruik van Visual Studio Code voor het web om Power Pages-sites te bewerken.

Notitie

  • Als Visual Studio Code voor het web voor het eerst wordt geladen, kan dat even duren omdat de vereiste extensies voor deze functie worden geïnstalleerd.
  • Bewerkingen voor het maken, verwijderen en hernoemen van bestanden worden niet ondersteund.
  • Deze functie maakt gebruik van de webextensie Power Platform Tools. Webextensies worden beperkt door de browser-sandbox en hebben daarom beperkingen in vergelijking met normale extensies.
    • Power Platform CLI wordt niet ondersteund.
    • De functies van de webextensie Power Platform Tools zijn beperkt tot Power Pages-codebewerkingservaring.
    • Deze functie is niet beschikbaar in Government Community Cloud (GCC), Government Community Cloud (GCC High) en Department of Defense (DoD). Gebruikers in deze regio's gebruiken de Portalbeheer-app om code te bewerken. Zie Code bewerken in de Portalbeheer-app voor meer informatie.

Code bewerken beschikbaar in ontwerpstudio

U kunt beginnen met het bewerken van de code van uw site met Visual Studio Code voor het web vanaf de Power Pages-startpagina door de optie Sitecode bewerken te kiezen uit het vervolgkeuzemenu Bewerken.

U kunt de code ook bewerken in de ontwerpstudio vanuit de volgende gedeelten:

Laten we eens kijken hoe u code kunt bewerken met behulp van deze gebieden.

Webpaginacode bewerken vanuit de werkruimte Pagina´s

Als u de Power Pages-ontwerpstudio opent, wordt de optie Code bewerken weergegeven in het menu Pagina´s1 en de rechterbovenhoek van het scherm2.

Code bewerken via de werkruimte Pagina´s.

Koptekstsjablooncode via werkruimte Pagina´s

Selecteer Sitekop bewerken en selecteer vervolgens Code bewerken om de code-editor te openen.

Code bewerken via werkruimte Pagina´s.

Aangepaste CSS-code bewerken via werkruimte Stijl

Ga naar Werkruimte Stijl en selecteer het beschikbare menu Code bewerken via aangepaste CSS om de code-editor te openen.

Code bewerken via aangepaste CSS.

Conflictmelding samenvoegen

Als u samenwerkt met andere ontwikkelaars, kunnen er situaties zijn waarin u aan dezelfde broncode werkt. Als u probeert wijzigingen in een verouderd bestand op te slaan, ontvangt u een melding om wijzigingen te Vergelijken of te Overschrijven.

Als u de code vergelijkt, wordt de huidige code naast uw code weergegeven en kunt u terugkeren naar de bestaande wijzigingen, elke wijziging afzonderlijk accepteren of uw wijzigingen gebruiken en de bestaande inhoud overschrijven.

Conflicten in code samenvoegen.

U kunt de nieuwste inhoud bekijken en de code samenvoegen of overschrijven of de wijzigingen negeren.

Zelfstudie: sitecode bewerken met Visual Studio Code voor het web

In deze zelfstudie voert u de stappen uit om de sitecode te bewerken met Visual Studio Code voor het web.

Stap 1: sitecode bewerken met Visual Studio Code voor het web

  1. Open uw site in Power Pages-ontwerpstudio.

  2. Selecteer Code bewerken in de rechterbovenhoek.

    Visual Studio Code openen via de ontwerpstudio.

  3. Selecteer Visual Studio Code openen via het bevestigingsvenster.

  4. Meld u aan bij Visual Studio Code met uw omgevingsreferenties.

  5. Wacht tot de webextensie Power Platform Tools is geïnitialiseerd en de webpaginacode in het linkerdeelvenster is geladen.

Stap 2: inhoud en code bijwerken

  1. De verkenner aan de linkerkant van het scherm laadt de respectievelijke metagegevens van de websiteconfiguratie die kunnen worden bewerkt met Visual Code for the Web.

    Verkenner-menu voor een naamloze werkruimte met webbestanden.

  2. Breng wijzigingen aan in de respectievelijke metagegevensbestanden en druk op Ctrl+S om de wijzigingen op te slaan.

  3. Ga naar ontwerpstudio en selecteer Synchroniseren om alle updates in uw huidige ontwerpstudiosessie op te halen.

    Interface om de gebruiker in staat te stellen de knop Synchroniseren te selecteren om wijzigingen die zijn gemaakt in Visual Studio Code te synchroniseren met ontwerpstudio.

  4. Selecteer Voorbeeld om uw wijzigingen te zien op de Power Pages-site.

Visual Studio Code voor het web of Visual Studio Code voor bureaublad gebruiken

Gebruikers kunnen wijzigingen in paginabewerkingen bewerken, debuggen en bekijken met behulp van Visual Studio Code voor het web zonder externe tools te hoeven gebruiken. Visual Studio Code voor bureaublad biedt andere geavanceerde functies voor het bewerken van alle sitemetagegevens en de integratie met GitHub, frameworks en CI/CD-processen (continue integratie/continue ontwikkeling).

Functie VS Code voor het Web VS Code voor bureaublad
Maak nieuwe metagegevensrecords voor de websiteconfiguratie Nee Beperkt tot webpagina's, paginasjablonen, websjablonen, inhoudsfragmenten en webbestanden.
Directe sitebewerking Ja Nee
Bewerken van sitemetagegevens Beperkt tot het bewerken van webpagina's, inhoudsfragmenten, basisformulieren, meerstapsformulieren, lijsten en websjablonen. Alle Power Pages-metagegevensconfiguratie
Voorbeeld van site Gepland Gepland
Power Platform CLI-ondersteuning Nee Ja
Geavanceerde CPU- en opslaggebonden werkstroom - ReactJS of andere ondersteuning voor het bouwen van frameworks Nee Ja
GitHub-integratie met mogelijkheden zoals code inchecken, uitchecken, conflicten beheren en samenvoegen. Nee Ja

Code bewerken in de portalbeheer-app

Notitie

  • Het gebruik van Visual Studio Code voor het web om websites te bewerken, wordt niet ondersteund in Government Community Cloud (GCC), Government Community Cloud (GCC High) en Department of Defense (DoD). Gebruikers in deze regio's kunnen de Portalbeheer-app gebruiken om hun wijzigingen aan te brengen.

Als de regio de Visual Studio Code voor het web niet ondersteunt, selecteert u het pictogram van de code-editor </> in de opdrachtbalk om de Portalbeheer-app te openen.

Navigeer naar de bijbehorende webpagina's, basisformulieren, formulieren voor meerdere stappen, lijsten of websjablonen records om code te bewerken.

Type Codelocatie
Webpagina Selecteer een webpaginarecord.
Selecteer de inhoudsrecord van de webpagina in de sectie Gelokaliseerde inhoud.
De paginatekst kan worden bewerkt in het veld Tekst (HTML) op het tabblad Algemeen.
Aangepaste JavaScript en aangepaste CSS-code kan worden bewerkt vanaf het tabblad Geavanceerd .
Basisformulier Selecteer de basisformulierrecord.
Bewerk Aangepast JavaScript op het tabblad Aanvullende instellingen.
Formulier voor meerdere stappen Selecteer de formulierrecord met meerdere stappen.
Selecteer de formulierstap met meerdere stappen op het tabblad Formulierstappen .
Bewerk Aangepast JavaScript op het tabblad Formulieropties.
List Selecteer de lijstrecord.
Bewerk Aangepast JavaScript op het tabblad Opties.
Websjabloon Selecteer de websjabloonrecord.
Bewerk Bron op het tabblad Algemeen.

Sla de record op en bekijk een voorbeeld van uw website om de code te testen.

Zie ook