Editare cod cu Visual Studio Code for the Web (previzualizare)

[Acest subiect este documentație preliminară și poate fi modificat.]

Din studioul de design, poți edita codul site-ului folosind Visual Studio Code pentru Web. Această funcție vă permite să editați conținut static, HTML, CSS, Liquid și JavaScript pentru următoarele metadate de site:

Metadate	Conținut
Formulare avansate (formulare cu mai mulți pași)	JavaScript
Forme de bază	JavaScript
Fragmente de conținut	Tot conținutul de fragmente de conținut acceptat
Liste	JavaScript
Fișiere web	Vizualizați și descărcați fișiere media. Editați fișierele text (cod).
Pagini web	Tot conținutul acceptat (per limbă), JavaScript și CSS
Șabloane web	Tot conținutul acceptat

Notă

Nu veți putea crea înregistrări de metadate, ci doar adăuga și edita conținut, cod și vizualiza/descărca fișiere atașate.

Visual Studio Code for the Web oferă o experiență Microsoft Visual Studio Code gratuită, fără instalare, care rulează integral în browserul tău, permițându-ți să navighezi codul site-ului și să faci modificări ușoare rapid și în siguranță. Mai multe informații: Visual Studio Code pentru experiența web.

Important

• Aceasta este o caracteristică de previzualizare.
• Caracteristicile în regim de previzualizare nu sunt destinate utilizării în producție și pot avea funcționalitate restricționată. Aceste caracteristici sunt disponibile înainte de lansarea oficială, astfel încât clienții să poată obține acces din timp și să poată oferi feedback.

Notă

• Prima dată Visual Studio Code pentru Web încărcarea poate dura ceva timp deoarece va instala extensiile necesare pentru această funcție.
• Operațiunile de creare, ștergere și redenumire a fișierelor nu sunt acceptate.
• Această caracteristică utilizează extensia web Power Platform Tools . Extensiile web sunt restricționate de sandbox-ul browserului și, prin urmare, au limitări în comparație cu extensiile normale.
  • CLI Power Platform nu este acceptat.
  • Funcțiile de extensie web ale Power Platform Tools sunt limitate la experiența de editare a codului Power Pages.
  • Această caracteristică nu este disponibilă în Government Community Cloud (GCC), Government Community Cloud (GCC High) și Department of Defense (DoD). Utilizatorii din aceste regiuni vor folosi aplicația de gestionare a portalurilor pentru editarea codului. Consultați Editarea codului în aplicația de gestionare a portalurilor pentru mai multe informații.

Editați codul disponibil în studioul de design

Poți începe să editezi codul site-ului tău folosind Visual Studio Code for the Web de pe pagina principală a Power Pages selectând opțiunea Editează codul site-ului din meniul derulant Edit.

De asemenea, puteți edita cod în studioul de design din următoarele zone:

• Editați codul paginii web din spațiul de lucru Pages
• Codul șablonului de antet din spațiul de lucru Pages
• Editare personalizată CSS cod din spațiul de lucru Styling
• Editați codul JavaScript personalizat pentru formularele cu mai mulți pași
• Editați codul JavaScript personalizat pentru formularele de bază
• Editați codul JavaScript particularizat pentru liste
• Editați fragmentele de conținut
• Editați șabloanele web
• Vizualizați și descărcați fișiere media. web (imagini)
• Editați fișiere web bazate pe text (CSS, JavaScript, altele)

Să vedem cum să editați codul folosind aceste zone.

Editați codul paginii web din spațiul de lucru Pages

Când deschizi Power Pages Design Studio, vezi opțiunea Edit code în meniul Pages¹ și în colțul din dreapta sus al ecranului².

Codul șablonului de antet din spațiul de lucru Pages

Selectați Editați antetul site-ului și apoi selectați Editați codul pentru a deschide editorul de cod.

Editare personalizată CSS cod din spațiul de lucru Styling

Accesați spațiul de lucru Stil și selectați meniul personalizat CSS Editați codul disponibil pentru a deschide editorul de cod.

Vizualizarea acțiunilor Power Pages

Vizualizarea Power Pages Acțiuni, accesibilă în partea de jos a File Explorer, îți permite să gestionezi Power Pages site-uri direct în editor. Reduce necesitatea de a trece la Power Pages design studio, permițând dezvoltatorilor să execute rapid sarcini comune din interiorul editorului.

Acțiuni disponibile

• Previzualizați site-ul
  Această acțiune șterge memoria cache de configurare și deschide site-ul în VS Code. Permite dezvoltatorilor să previzualizeze și să testeze modificările codului site-ului fără a fi nevoie să schimbe contextul către Power Pages Design Studio.

• Deschide în Power Pages studio de design
  După ce faci modificări de cod, folosește această acțiune pentru a accesa Power Pages Design Studio. Acest lucru este util pentru configurarea furnizorilor de autentificare, a rolurilor web și a altor setări de site care nu pot fi editate în editorul de cod.

• Deschidere în VS Code Desktop
  Dacă este instalat VS Code Desktop, această acțiune deschide site-ul în aplicația desktop. De asemenea, declanșează o descărcare a site-ului, asigurându-se că codul este disponibil local și gata de editare.

Notificare privind un conflict de îmbinare

Dacă colaborați cu alți dezvoltatori, pot exista situații în care veți lucra la același cod sursă. În cazul în care încercați să salvați modificările aduse unui fișier învechit, veți primi o notificare pentru compararea sau înlocuirea schimbărilor.

Compararea codului va afișa codul curent alături de codul dvs. și vă va permite să reveniți la modificările existente, să acceptați fiecare modificare individual sau să utilizați modificările și să suprascrieți conținutul existent.

Veți putea să examinați cel mai recent conținut și să îmbinați sau să înlocuiți codul sau să renunțați la modificări.

Tutorial: Editează codul site-ului folosind Visual Studio Code for the Web

În acest tutorial, treci prin editarea codului site-ului folosind Visual Studio Code for Web.

Pasul 1: Editează codul site-ului folosind Visual Studio Code for the Web

1. Deschide-ți site-ul în Power Pages design studio

2. În colțul din dreapta sus, selectați Editați codul

   

3. Selectați Open Visual Studio Code din dialogul de confirmare.

4. Autentifică-te în Visual Studio Code folosind acreditările mediului tău.

5. Așteptați să se inițializeze extensia web Power Platform Tools și să se încarce codul paginii web în panoul din stânga.

Pasul 2: Actualizați conținutul și codul

1. Exploratorul din partea stângă a ecranului încarcă metadatele respective de configurare a site-ului web care pot fi editate folosind Visual Code pentru Web.

   

2. Efectuați modificări la fișierele de metadate respective și apăsați Ctrl+S pentru a salva modificările.

3. Accesați studioul de proiectare și selectați Sincronizare pentru a extrage toate actualizările din sesiunea curentă a studioului de proiectare.

   

4. Selectați Previzualizare pentru a vedea modificările pe site-ul Power Pages.

Utilizarea Visual Studio Code pentru Web sau Visual Studio Code Desktop

Utilizatorii pot edita, depana și previzualiza modificările editărilor de pagină folosind Visual Studio Code for the Web fără a fi nevoie să folosească unelte externe. Visual Studio Code Desktop oferă alte funcții avansate pentru editarea tuturor metadatelor site-ului și integrarea cu GitHub, framework-uri și procese de integrare continuă/dezvoltare continuă (CI/CD).

Caracteristică	Cod VS pentru Web	VS Code Desktop
Creați noi înregistrări de metadate de configurare a site-ului web	Nu	Limitat la pagini web, șabloane de pagini, șabloane web, fragmente de conținut și fișiere web.
Editarea directă a site-ului	Da	Nu
Editarea metadatelor site-ului	Limitat la editarea paginilor web, fragmentelor de conținut, formularelor de bază, formularelor cu mai mulți pași, listelor și șabloanelor web.	Toate configurațiile metadatelor Power Pages
Previzualizarea site-ului	Planificat	Planificat
Power Platform Interfață de comandă (CLI) sprijin	Nu	Da
Procesor avansat și flux de lucru legat de stocare - ReactJS sau alt instrument de construcție a cadrului	Nu	Da
Integrare GitHub cu capabilități precum code check-in, check-out, gestionarea conflictelor și merge.	Nu	Da

Editarea codului în aplicația de gestionare a portalurilor

Notă

• Utilizarea Visual Studio Code for the Web pentru editarea site-urilor web nu este suportată în Government Community Cloud (GCC), Government Community Cloud (GCC High) și Department of Defense (DoD). Utilizatorii din aceste regiuni pot folosi aplicația Portal Management pentru a-și face modificările.

Dacă regiunea nu suportă Visual Studio Code pentru Web, selectarea pictogramei editorului de cod </> din bara de comenzi va deschide aplicația Portal Management.

Navigați la înregistrările de pagini web corespunzătoare, Formulare de bază, Formulare cu mai mulți pași, Liste sau Șabloane web pentru editarea codului.

Tip	Locație cod
Pagină web	Selectați înregistrarea paginii web. Selectați înregistrarea de conținut a paginii web din Conținut localizat secțiune. Copia paginii poate fi editată în Copiere (HTML) câmp pe General filă. JavaScript personalizat şi Personalizat CSS codul poate fi editat din Avansat filă.
Formular de bază	Selectați înregistrarea formularului de bază. Editați JavaScript personalizat în fila Setări suplimentare .
Formular cu mai mulți pași	Selectați înregistrarea formularului în mai mulți pași. Selectați pasul formularului în mai mulți pași din fila Pași formular . Editați JavaScript personalizat în fila Opțiuni formular .
Listă	Selectați înregistrarea listei. Editați JavaScript personalizat pe fila Opțiuni .
Șablon web	Selectați înregistrarea șablonului web. Editați sursa pe fila General .

Salvați înregistrarea și previzualizați site-ul pentru a vă testa codul.

Vedeți și

• Folosește Visual Studio Code și Microsoft Power Platform CLI