skills.rest
OrchardCMS
OrchardCMSOFFICIAL
Explore all skills by this author →
Website𝕏@OrchardCMSGitHub

orchardcore-admin-edit-views

Creates OrchardCore admin edit views using ocat-* CSS class conventions.

8.2k|2.6k|Updated Nov 19, 2014
Search Tags:#ASP.NET Core#razor#orchardcore#cshtml#css classes#form layout#admin views
One-click install
npx skills add https://github.com/OrchardCMS/OrchardCore --skill orchardcore-admin-edit-views
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: orchardcore-admin-edit-views
Source: https://github.com/OrchardCMS/OrchardCore/tree/main/.agents/skills/orchardcore-admin-edit-views
Command: npx skills add https://github.com/OrchardCMS/OrchardCore --skill orchardcore-admin-edit-views

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

OrchardCore admin edit views must follow the ocat-* CSS class system for consistent two-column form layouts, and using legacy Bootstrap classes like mb-3 or form-label breaks the admin theme styling. This Skill ensures every Edit view (*.Edit.cshtml, *.Fields.Edit.cshtml) uses the correct wrapper, label, and end-column structure.

Core Features & Use Cases

  • Standardized Field Templates: Provides ready-to-use markup for text inputs, textareas, selects, checkboxes, input groups, and limited-width fields using ocat-wrapper, ocat-label, ocat-end, and ocat-end-offset.
  • Migration Guidance: Maps legacy patterns (mb-3, form-group, form-label, @Orchard.GetLimitedWidthWrapperClasses()) to their ocat-* replacements.
  • Use Case: When adding a new settings edit view for an OrchardCore module, generate the full form markup with correct validation spans, hints, and required-field indicators that match the admin theme.

Quick Start

Create an OrchardCore admin edit view for my module's settings model following the ocat-* CSS class conventions.

Frequently Asked Questions about orchardcore-admin-edit-views

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an OrchardCore admin edit view with the ocat-* classes?▼

Wrap each field row in a div with class ocat-wrapper, place the label with class ocat-label in the left column, and wrap the input, validation span, and hint inside a div with class ocat-end. Add asp-validation-class-for on the wrapper for validated fields.

How do I replace mb-3 and form-label in OrchardCore edit views?▼

Replace div class="mb-3" or "form-group" with ocat-wrapper, replace label class="form-label" with ocat-label, and move the input, validation span, and hint into a nested ocat-end div. Checkboxes without a left label use ocat-end-offset instead.

When should I use ocat-end-offset instead of ocat-end?▼

Use ocat-end-offset when the row has no left-column label, such as checkboxes, standalone alerts, legends, or section headings. Never mix ocat-end and ocat-end-offset in the same row; choose exactly one based on whether a left label exists.

How do I make a limited-width field in an OrchardCore admin form?▼

Use ocat-limited-wrapper as the outer row with ocat-label and an inner ocat-limited div around the control. If the row also needs field-wrapper-* or content-part-wrapper-* classes, keep the outer ocat-wrapper and nest ocat-limited-wrapper inside ocat-end.

Can I still use @Orchard.GetLimitedWidthWrapperClasses() in new edit views?▼

No, the legacy helpers @Orchard.GetLimitedWidthWrapperClasses() and @Orchard.GetLimitedWidthClasses() are replaced by the ocat-limited-wrapper and ocat-limited classes. New and migrated views should use the ocat-* classes directly.

Related Skills

Explore More Software Engineering Skills→
shinexytshinexyt

orchardcore-module-creator

Generate OrchardCore module project structures, manifest files, and component templates.

Community
Intermediate
OrchardCMSOrchardCMS
8.2k

orchardcore-tester

Automate browser-based testing of OrchardCore CMS features with Playwright.

Official
Intermediate
iOfficeAIiOfficeAI
31.8k

i18n

Enforce standardized internationalization workflows with flat key naming and locale synchronization.

Official
Basic
gaurav-initgaurav-init

orchardcore-module-creator

Generate OrchardCore module directory structures, template files, and configuration code.

Community
Advanced