Tilpas Umbraco Forms-temaer: find standard-CSS og JS

Frontend-teams vil gerne eje markupen i en formular. Umbraco Forms gør det muligt med themes, men én ting er let at overse: hvor kommer standardtemaets CSS og JavaScript fra, så du kan begynde at rette i dem?

Sådan virker Forms-temaer

Det grundlæggende:

• Opret en mappe Views/Partials/Forms/Themes/<your-theme>.
• Kopiér kun de filer, du vil ændre. Det kan være én fil eller hele standardtemaet.
• En view, der ikke ligger i din temamappe, falder tilbage til standardtemaet, så du behøver ikke kopiere alt.
• Dit tema dukker op i temavælgeren, og du kan også vælge et, når du renderer en formular.
• Ret aldrig standardtemaets filer direkte. Ændringerne forsvinder ved næste Forms-opgradering.

Den manglende del: CSS og JS

Dokumentationen giver en zip med standardtemaets partial views. Stylesheet og script ligger ikke i den zip. De følger med Forms-pakken som statiske assets, så en frontend-udvikler, der åbner projektet, ikke finder noget at kopiere.

Der er to måder at få fat i dem:

1. Udgiv projektet. Udgiv til en ren mappe og kig i outputtet.

dotnet publish -c Release -o output

Standardtemaets statiske filer ligger så i:

output/wwwroot/App_Plugins/UmbracoForms/assets/themes/default

1. Kig i din NuGet-cache. De samme filer ligger i pakken umbraco.forms.staticassets, i en mappe som staticwebassets/Assets/themes/default. Udgivelse er som regel nemmere, fordi mappestrukturen er lettere at se.

Kobl din egen CSS og JavaScript på

Når du har kopieret og rettet filerne, skal formularen bruge dem fra dit temas views:

Html.SetFormThemeCssFile("~/path/to/your/style.css");
Html.AddFormThemeScriptFile("~/path/to/your/umbracoforms.js");

Vær opmærksom på metode-signaturen. I ældre dokumentation tager den første helper form-modellen som første argument, i den nyeste gør den ikke. Tjek dokumentationen for den Forms-version, du bruger.

Hvis du ændrer eller tilføjer scripts, så kopiér Script.cshtml fra standardtemaet og peg script-referencerne på dine egne filer.

To ting at huske

• Behold de CSS-klasser, logikken har brug for. Forms' betingede logik afhænger af nogle klasser. Tilføj dine egne, men fjern ikke dem, der allerede er der.
• Opgraderinger er den reelle pris. Det svære er at finde ud af, hvad der ændrede sig i standardtemaet mellem Forms-versioner. Dokumentationen leverer standardtemaet som zip for flere versioner, så gem den version, du startede fra, og sammenlign med den nye i et diff-værktøj.