CODEWITHSUNDEEP
orchardcms
tonyb206
tonyb206

Reputation: 11

Custom Forms Styling

New to orchard. I'm trying to style a custom form without success. I've also been using the shape modeler. I created a New ContentType and add Fields f1, f2, f3... I create a CustomForm. Now I want to wrap different divs around certain fields say

<div class="g1">
f1
f2
</div>
<div class="g2">
f4
f6
</div>

BTW I've tried this construct without success:

        dynamic content = @Model.Content;
    <div class="g1">
        if(@content.ContentTypeName.f1 || @content.ContentTypeName.f2)
        { @Dispaly(...)
        }
    </div>

Can this be done in the content.edit.cshtml view? If so please provide an example. Thanks

Also, is there any way to reflect the properties of Model.Content during runtime?

Upvotes: 0

Views: 1499

Answers (3)

tonyb206
tonyb206

Reputation: 11

Finally came up with a solution, albeit quite ugly, but it works: In my alternate associated with the Content_Edit:

@{
    dynamic content = Model.Content;
 }

<div class="g1">
@{
     foreach (var item in content)
     {
         if (item.Model.GetType().Name == "BooleanField")
         {
             if (f.Name == "f1" || f.Name == "f2")
             {
                 @Display(item);
             }
          }
      }
 }
</div>
<div class="g2">        
@{
     foreach (var item in content)
     {
         if (item.Model.GetType().Name == "BooleanField")
         {
             if (f.Name == "f4" || f.Name == "f6")
             {
                 @Display(item);
             }
         }
     }
 }
</div>

Upvotes: 1

Glen Reyes
Glen Reyes

Reputation: 21

What I did was create local zones in the Content_Edit alternate then rearrange the fields using placement.info

Placement.info:

<Match ContentType="MyForm">
    <Place Fields_Input_Edit-FirstField="MyFirstZone:1"/>
    <Place Fields_Input_Edit-SecondField="MySecondZone:1"/>
</Match>

Content.Edit-MyForm.cshtml:

<div class="edit-item">
    <div class="edit-item-primary">
        @if (Model.Content != null) 
        {
            <div class="edit-item-content">
                <div class="first-zone">
                    @Display(Model.MyFirstZone)
                </div>
                <div class="second-zone">
                    @Display(Model.MySecondZone)
                </div>
            </div>
        }
    </div>
    ....
</div>

Upvotes: 2

Bertrand Le Roy
Bertrand Le Roy

Reputation: 17814

Typically in Orchard, you override templates for parts and fields, not for the whole content item. Shape tracing can help you determine what template alternates you can use for each field and even generate the file with the default code for you to modify.

Also, Model.Content, if anything, will be a zone, not the content item. Depending on which template you're in, you may be able to use Model.ContentItem instead.

Upvotes: 1

Related Questions