Code bewerken met Visual Studio Code voor het web (preview)
[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.
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:
- Webpaginacode bewerken vanuit de werkruimte Pagina´s
- Koptekstsjablooncode van de werkruimte Pagina´s
- Aangepaste CSS-code bewerken via de werkruimte Stijl
- Aangepaste JavaScript-code voor formulieren met meerdere stappen bewerken
- Aangepaste JavaScript-code voor basisformulieren bewerken
- Aangepaste JavaScript voor lijsten bewerken
- Inhoudsfragmenten bewerken
- Websjablonen bewerken
- Media-webbestanden (afbeeldingen) bekijken en downloaden
- Op tekst gebaseerde webbestanden (CSS, javascript, andere) bewerken
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.
Koptekstsjablooncode via werkruimte Pagina´s
Selecteer Sitekop bewerken en selecteer vervolgens Code bewerken om de code-editor te openen.
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.
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.
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
Open uw site in Power Pages-ontwerpstudio.
Selecteer Code bewerken in de rechterbovenhoek.
Selecteer Visual Studio Code openen via het bevestigingsvenster.
Meld u aan bij Visual Studio Code met uw omgevingsreferenties.
Wacht tot de webextensie Power Platform Tools is geïnitialiseerd en de webpaginacode in het linkerdeelvenster is geladen.
Stap 2: inhoud en code bijwerken
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.
Breng wijzigingen aan in de respectievelijke metagegevensbestanden en druk op Ctrl+S om de wijzigingen op te slaan.
Ga naar ontwerpstudio en selecteer Synchroniseren om alle updates in uw huidige ontwerpstudiosessie op te halen.
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.