Basic form styling

Topics: Customizing Orchard
Jun 19, 2012 at 6:43 PM

Hi Orchard gurus-
I'm a noob to Orchard, and struggling with simple styling of a form.
I created this simple form to help me wrap my head around basic concepts...

So, I created a new content type called AddComposer and added fields:
ComposerName (Input field)
IsClassical (Boolean Field)
IsRock (Boolean Field)
IsJazz (Boolean Field)
IsNorthernHemisphere (Boolean Field)
IsSouthernHemisphere (Boolean Field)
Then I added a custom form of content type AddComposer and added an alternate at the Content_Edit level. So far so good.
What I'd like to do is group the boolean fields into 2 seperate divs so that music types are grouped under div1 and locations
grouped under div2, etc.
I expected it would be as simple as modifying the alternate like this:
What am I missing? Thanks

Jun 19, 2012 at 7:23 PM

  dynamic content = @Model.Content;


Your best bet to get the correct path is to use the Shape Tracing module and look at the model to browse for the property you need.

Jun 20, 2012 at 6:07 AM
Edited Jun 20, 2012 at 7:08 AM

Hi sebastien- Thanks for your response.

I've been viewing the page in the Shape Tracing module and see the multitude of properties- Ay-yi-yi!


__interceptors: {Castle.Core.Interceptor.IInterceptor[1]}   

__target: {ShapeProxy771fe31319334ab2ac9ee3510b0493d2}

Metadata: {Orchard.DisplayManagement.Shapes.ShapeMetadata}


But I can't seem to reference an individual content type field object like 'isRock' as you suggested...

This works---

I created the dynamic object:

@{dynamic content = @Model.Content;}

and can render all the field objects the via

and, I'm able to iterate through like:
@foreach (var item in content)

{ @Display(item)}

But no luck referencing individual field object directly like @content.isRock so I can group fields into particular div wrappers like: 

<div class="genre">




Am I just clueless about the calling syntax?
Do I need to add entries into

I really must be missing something...

Thanks for your patience

Jun 20, 2012 at 4:49 PM

It's in my previous answer: @content.AddComposer.IsRock

Jun 20, 2012 at 7:31 PM

Sorry about being repetitive, but in the Content.Edit-url-addcomposer.cshtml


@{ dynamic content = @Model.Content; }

@if (Model.Content != null)


@Display(@content)       <<< This Renders
@Display(@content.AddComposer.IsRock) <<< Does Not Render
And here is what a watch on @content reveals:

@content {IShapeProxyab27170099e642febc633e9e04924450}

__interceptors: {Castle.Core.Interceptor.IInterceptor[1]}

__target: {ShapeProxy75bc50bd1caa4fb6a905e0c92ca7c4fe}

Metadata: {Orchard.DisplayManagement.Shapes.ShapeMetadata}

Jun 21, 2012 at 4:20 AM

Display is for shapes. If content.AddComposer.IsRock is a bool like it looks to be, then you don't need to put Display around it, just do @content.AddComposer.IsRock.

Jun 21, 2012 at 5:27 AM

Thanks for your patience Bertrand, but @content.AddComposer.IsRock  doesn't do it either-

Here's the immediate window on that @content.AddComposer.IsRock{}   

_behavior: Count = 2   

ClaySharp.IClayBehaviorProvider.Behavior: Count = 2

I've finally been stepping through the debugger for a few hours now and see
The Zone[Content] is being dynamically generated (duh shoulda realized this in the first place)

and it's template is referencing


and invokes[Shape]        public void EditorTemplate

which renders out the html containing the content fields values.

Still trying to figure out where I can hook to my Field 'IsRock'...

I hope I can still reference it somewhere way down in the bowels of the Model.Content object.
Should I be including Orchard.ContentManagement.ContentField or some such in my .cshtml file?

Jun 21, 2012 at 5:35 AM

Right, it seems like you're making some unwarranted assumptions there, such as that content is your content item. It's not. Or that you need to override content.cshtml to achieve what you're trying to achieve. You almost never have to override that template. Instead, part or field templates are usually where you want to act. Or that you need to override a template to modify the order of things, whereas this should be done through

Jun 21, 2012 at 5:54 AM

Humm, so you're saying I should be modifying the file? But I thought that only allows you to change the order of the fields not really style their arrangement. I mean what if i have a form with 20 fields and want to arrange them in multiple columns and float their labels left or right? Can this be done with 

Jun 21, 2012 at 5:58 AM

It allows you to change the order, but also to create alternates.

But if all you want to do is arrange fields in columns or float their labels, you don't even need that: this should be done in CSS.