Edytowanie kodu za pomocą Visual Studio Code dla sieci Web (wersja zapoznawcza)

[Ten temat jest dokumentacją wersji wstępnej i może ulec zmianie.]

W programie Design Studio można edytować kod witryny przy użyciu Visual Studio Code dla sieci Web. Ta funkcja umożliwia edytowanie zawartości statycznej, HTML, CSS, Liquid i JavaScript dla następujących metadanych witryny internetowej:

Metadane	Content
Formularze zaawansowane (formularze wieloetapowe)	JavaScript
Formularze podstawowe	JavaScript
Fragmenty kodu zawartości	Wszystkie obsługiwane wstawki zawartości
Listy	JavaScript
Pliki internetowe	Wyświetlanie i pobieranie plików multimedialnych. Edytuj pliki tekstowe (kod).
Strony sieci Web	Cała obsługiwana zawartość (w zależności od języka), JavaScript i CSS
Szablony sieci Web	Cała obsługiwana zawartość

Uwaga / Notatka

Nie będzie można tworzyć rekordów metadanych, a jedynie dodawać i edytować zawartość, kod oraz wyświetlać i pobierać załączniki plików.

Visual Studio Code dla sieci Web zapewnia bezpłatne, bezinstalowe środowisko microsoft Visual Studio Code działające w całości w przeglądarce, dzięki czemu można przeglądać kod witryny i szybko i bezpiecznie wprowadzać lekkie zmiany kodu. Więcej informacji: Visual Studio Code for the Web experience.

Ważne

• Jest to funkcja w wersji zapoznawczej.
• Funkcje w wersji zapoznawczej nie są przeznaczone do użytku w środowiskach produkcyjnych i mogą mieć ograniczoną funkcjonalność. Te funkcje są dostępne przed oficjalną wersją, aby klienci mogli uzyskać wczesny dostęp i przekazać opinię.

Uwaga / Notatka

• Pierwsze ładowanie Visual Studio Code dla sieci Web może potrwać trochę czasu, ponieważ zainstaluje wymagane rozszerzenia dla tej funkcji.
• Operacje tworzenia, usuwania i zmieniania nazw plików nie są obsługiwane.
• Ta funkcja korzysta z rozszerzenia sieciowego Power Platform Tools. Rozszerzenia sieci Web są ograniczone przez piaskownicę przeglądarki i mają ograniczenia w porównaniu z normalnymi rozszerzeniami.
  • Interfejs wiersza polecenia platformy Power Platform nie jest obsługiwany.
  • Funkcje rozszerzenia internetowego narzędzi Power Platform Tools są ograniczone do Power Pages środowiska edytowania kodu.
  • Ta funkcja nie jest dostępna w usłudze Government Community Cloud (GCC), Government Community Cloud (GCC High) i Departamencie Obrony (DoD). Użytkownicy w tych regionach będą używać aplikacji Portals Management do edytowania kodu. Aby uzyskać więcej informacji , zobacz Edytowanie kodu w aplikacji Do zarządzania portalami .

Edytowanie kodu dostępnego w programie Design Studio

Możesz rozpocząć edytowanie kodu witryny przy użyciu Visual Studio Code dla sieci Web na stronie głównej Power Pages, wybierając Edytuj kod witryny z menu rozwijanego Edytuj.

Możesz również edytować kod w studio projektowym z następujących obszarów:

• Edytuj kod strony internetowej z obszaru roboczego Pages
• Kod szablonu nagłówka z obszaru roboczego Strony
• Edytowanie niestandardowego kodu CSS z obszaru roboczego Styling
• Edytowanie niestandardowego kodu JavaScript dla formularzy wieloetapowych
• Edytowanie niestandardowego kodu JavaScript dla formularzy podstawowych
• Edycja niestandardowych skryptów JavaScript dla list
• Edytowanie fragmentów kodu zawartości
• Edytowanie szablonów sieci Web
• Wyświetlanie i pobieranie plików internetowych multimediów (obrazów)
• Edytowanie plików internetowych opartych na tekście (CSS, JavaScript, inne)

Przyjrzyjmy się, jak edytować kod przy użyciu tych obszarów.

Edytuj kod strony internetowej z obszaru roboczego Pages

Po otwarciu programu Power Pages design studio zobaczysz opcję Edytuj kod w menu Strony¹ i prawym górnym rogu ekranu².

Edytuj kod z obszaru roboczego Pages.

Kod szablonu nagłówka z obszaru roboczego Pages

Wybierz pozycję Edytuj nagłówek witryny , a następnie wybierz pozycję Edytuj kod , aby otworzyć edytor kodu.

Edytuj kod z nagłówka Stron.

Edytowanie niestandardowego kodu CSS z obszaru roboczego Styling

Przejdź do obszaru roboczego Styl i wybierz dostępne menu niestandardowego CSS Edytuj kod, aby otworzyć edytor kodu.

Edytuj kod z niestandardowego arkusza CSS.

widok akcji w Power Pages

Widok Power Pages Actions dostępny w dolnej części Eksploratora plików umożliwia zarządzanie witrynami Power Pages bezpośrednio w edytorze. Zmniejsza to konieczność przejścia na Power Pages studio projektowe, umożliwiając deweloperom szybkie wykonywanie typowych zadań z poziomu edytora.

Dostępne akcje

• Strona demonstracyjna
  Ta akcja powoduje wyczyszczenie pamięci podręcznej konfiguracji i otwarcie witryny w programie VS Code. Umożliwia deweloperom wyświetlanie podglądu i testowanie zmian w kodzie witryny bez konieczności przełączania kontekstu do studia projektowania Power Pages.

• Otwórz w studio projektowym Power Pages
  Po wprowadzeniu zmian w kodzie użyj tej akcji, aby przejść do studio projektowania Power Pages. Jest to przydatne w przypadku konfigurowania dostawców uwierzytelniania, ról sieci Web i innych ustawień witryny, które nie są edytowalne w edytorze kodu.

• Otwórz w programie VS Code Desktop
  Jeśli program VS Code Desktop jest zainstalowany, ta akcja spowoduje otwarcie witryny w aplikacji klasycznej. Wyzwala również pobieranie witryny, zapewniając, że kod jest dostępny lokalnie i gotowy do edycji.

Powiadomienie o konflikcie scalania

Jeśli współpracujesz z innymi deweloperami, mogą wystąpić sytuacje, w których będziesz pracować nad tym samym kodem źródłowym. W przypadku próby zapisania zmian w nieaktualnym pliku otrzymasz powiadomienie dotyczące porównywania lub zastępowania zmian.

Porównanie kodu spowoduje wyświetlenie bieżącego kodu obok Twojego kodu, co pozwoli na przywrócenie wcześniejszych wersji, zaakceptowanie każdej zmiany indywidualnie lub użycie Twoich zmian i nadpisanie istniejącej zawartości.

Scalanie konfliktów w kodzie.

Będziesz mógł przejrzeć najnowszą treść i scalić lub nadpisać kod albo odrzucić zmiany.

Samouczek: edytowanie kodu witryny przy użyciu Visual Studio Code dla sieci Web

W tym samouczku przedstawiono edytowanie kodu witryny przy użyciu Visual Studio Code dla sieci Web.

Krok 1. Edytowanie kodu witryny przy użyciu Visual Studio Code dla sieci Web

1. Otwórz witrynę w studio projektowym Power Pages

2. W prawym górnym rogu wybierz pozycję Edytuj kod

   

3. Wybierz pozycję Otwórz Visual Studio Code w oknie dialogowym potwierdzenia.

4. Zaloguj się do Visual Studio Code przy użyciu poświadczeń środowiska.

5. Poczekaj na zainicjowanie rozszerzenia internetowego Power Platform Tools oraz załadowanie kodu strony internetowej w okienku po lewej stronie.

Krok 2. Aktualizowanie zawartości i kodu

1. Eksplorator po lewej stronie ekranu ładuje odpowiednie metadane konfiguracji witryny internetowej, które można edytować przy użyciu programu Visual Code dla sieci Web.

   Menu Eksploratora dla obszaru roboczego bez tytułu z plikami internetowymi.

2. Wprowadź zmiany w odpowiednich plikach metadanych i naciśnij Ctrl+S , aby zapisać zmiany.

3. Przejdź do programu Design Studio i wybierz pozycję Synchronizuj , aby ściągnąć wszystkie aktualizacje w bieżącej sesji programu Design Studio.

   Interfejs umożliwiający użytkownikowi wybranie przycisku Synchronizuj w celu zsynchronizowania zmian wprowadzonych w Visual Studio Code ze studio projektowym.

4. Wybierz Przegląd aby wyświetlić zmiany w witrynie Power Pages.

Używanie Visual Studio Code dla sieci Web lub programu Visual Studio Code Desktop

Użytkownicy mogą edytować, debugować i wyświetlać podgląd zmian na stronach przy użyciu Visual Studio Code dla sieci Web bez konieczności używania narzędzi zewnętrznych. Visual Studio Code Desktop udostępnia inne zaawansowane funkcje do edytowania wszystkich metadanych witryny i integracji z GitHub, strukturami i procesami ciągłej integracji/ciągłego programowania (CI/CD).

Funkcja	Program VS Code dla sieci Web	VS Code Desktop
Tworzenie nowych rekordów metadanych konfiguracji witryny internetowej	Nie.	Ograniczone do stron sieci Web, szablonów stron, szablonów sieci Web, fragmentów zawartości i plików internetowych.
Bezpośrednie edytowanie witryny	Tak	Nie.
Edytowanie metadanych witryny	Ograniczone do edytowania stron internetowych, fragmentów zawartości, formularzy podstawowych, formularzy wieloetapowych, list i szablonów internetowych.	Konfiguracja metadanych Power Pages
Podgląd witryny	Planowane	Planowane
Obsługa Power Platform CLI	Nie.	Tak
Zaawansowany przepływ pracy ograniczony przez CPU i pamięć masową — obsługa biblioteki ReactJS lub innego narzędzia do kompilacji frameworku.	Nie.	Tak
Integracja z GitHub z funkcjami, takimi jak przesyłanie kodu, pobieranie, zarządzanie konfliktami i scalanie.	Nie.	Tak

Edytowanie kodu w aplikacji Do zarządzania portalami

Uwaga / Notatka

• Edytowanie witryn internetowych za pomocą Visual Studio Code nie jest obsługiwane w chmurze Government Community Cloud (GCC), Government Community Cloud (GCC High) i Departamencie Obrony (DoD). Użytkownicy w tych regionach mogą wprowadzać zmiany za pomocą aplikacji Do zarządzania portalami .

Jeśli region nie obsługuje Visual Studio Code dla sieci Web, wybranie ikony edytora kodu </> na pasku poleceń spowoduje otwarcie aplikacji Portal Management.

Przejdź do żądanych stron sieci Web, formularzy podstawowych, formularzy obejmujących wiele kroków, list lub szablonów sieci Web, aby edytować kod.

Typ	Lokalizacja kodu
Web page	Wybierz rekord strony internetowej. Wybierz rekord zawartości strony internetowej w sekcji Zlokalizowana zawartość . Kopiowanie strony można edytować w polu Kopiuj (HTML) na karcie Ogólne .Niestandardowy kod JavaScript i Niestandardowy kod CSS można edytować na karcie Zaawansowane .
Formularz podstawowy	Wybierz podstawowy zapis formularza. Edytuj niestandardowy kod JavaScript na karcie Ustawienia dodatkowe .
Formularz wieloetapowy	Wybierz rekord formularza wieloetapowego.Wybierz krok formularza wieloetapowego na karcie Kroki formularza . Edytuj niestandardowy kod JavaScript na karcie Opcje formularza .
List	Wybierz rekord listy. Edytuj niestandardowy kod JavaScript na karcie Opcje .
Szablon sieci Web	Wybierz rekord szablonu internetowego. Edytuj źródło na karcie Ogólne .

Zapisz rekord i wyświetl podgląd witryny internetowej, aby przetestować kod.

Zobacz także

• Użyj Visual Studio Code i Microsoft Power Platform CLI