Need information on wrappers

Topics: General, Writing modules, Writing themes
Dec 23, 2011 at 7:27 AM

Evenin...Er Mornin!

Does anyone have a link or a good example showing the use of wrappers from Placement.info?
I think it's just a matter of not naming things properly - for all the bloody-brilliant things that Orchard does for you, it is a picky beast.:)

Anyway, what I want to do is wrap the editor of my course content item with a div so that I can style the controls a little differently.
Out of necessity I have a form with somewhere like 40 fields on 4 groups.
I'd like each group of fields to align left to right instead of top to bottom.
I wanted to wrap my "course" with a simple wrapper div that way I could append some CSS to TheAdmin theme without the risk of affecting other styles in the theme.
I only want this one edit form affected.

Is the Placement.info file the right way to go and if so, what should my wrapper file be named, and where should it be placed.

Mucho Thanks!
Will

Coordinator
Jan 6, 2012 at 4:32 AM

All the documentation on this is here: http://docs.orchardproject.net/Documentation/Understanding-placement-info

This being said, the problem you describe seems to be 100% CSS. I'm not sure how wrappers would help. Why can't you just edit the template for your part and add your div there? Unless your fields are custom fields that you created through the admin?

Jan 6, 2012 at 3:14 PM

I think the piece I am missing is purely a naming convention thing.
I was thinking there would be a way to have Orchard dynamically put a <div id="themeCourseWrapper"> around everything editable about a "course" so I could then apply CSS strictly to that object.

Note:  I was doing this in TheAdmin theme and I didn't want to risk my CSS additions to have any impact on the rest of the admin pages. So, I didn't want to generally apply css to all labels and textboxes. Only ones for this specific content type (including the title, routable, body and other Orchard-specific pieces). Styling my specific content part is easy, the entire content item...not so much. :)

I tried this in TheAdmin theme:
<Match ContentType="Course">
  <Place Parts_Course="Wrapper=Wrapper_Course"/>
</Match>
I tried naming the file
Wrapper_Course.cshtml, Course_Wrapper.cshtml and I tried putting it directly in the Views folder and Views/Wrappers. Also making sure the placement.info name always reflected the name of the file.

I simply never found the proper place or pattern for it - I am certain it's possible. I did look through the core modules and a few downloaded ones (oForms, mechanics, featured item) and didn't see them doing this either.

Thanks for any input.
Will

Coordinator
Jan 6, 2012 at 3:21 PM

Are you sure that's the name of your shape, not Parts_Course_Edit? What does the driver edit method look like?

Jan 6, 2012 at 3:38 PM

return ContentShape("Parts_Course_Edit",() => shapeHelper.EditorTemplate(TemplateName: "Parts/Course", Model: viewModel, Prefix: Prefix));

viewModel is of type CourseEditViewModel and contains a CoursePart, lists of states and disciplines (to facilitate drop down controls). Nothin about the title, route, body or contrib fields.

The view is in Views\EditorTemplates\Parts\Course.cshtml but it only has markup for the 20 fields directly on my CoursePartRecord, nothing for the title, route, body or contrib fields - orchard injects those.

I need to wrap the whole thing in teh admin editor, not just my specific part. When I look at the admin editor page using the IE developer tools I can see that the entire part is wrapped in
<div class="edit-item-primary">
    <div class="edit-item-content">
        Title
        CoursePart.CourseNumber
        Body
        CoursePartFields
        Contrib File Fields -- interspersed among other fields
    </div>
</div>

I need to wrap either of those divs with my own or, ideally, ALL content within that inner div like this:
<div class="edit-item-primary">
    <div class="edit-item-content">
        <div id="CourseAdminEditorWrapper">  <-- not sure how to make this part
            Title
            CoursePart.CourseNumber
            Body
            CoursePartFields
            Contrib File Fields -- interspersed among other fields
        </div>
    </div>
</div>

Thanks,
Will

Coordinator
Jan 6, 2012 at 3:42 PM

Yes, the name of your shape is Parts_Course_Edit, so your placement can't work.

I still don't understand why you need to do that and why you don't just put that div in you part's editor template.

Jan 6, 2012 at 5:23 PM

If I put that div in my editor template it won't encapsulate the
Title, Slug, Body or Contrib.FileUpload fields that make the entire content item - or I am missing how to do that?

For this editor, on the admin side, the client doesn't want the traditional Orchard layout -- they want to condense the information to something like this

Title:           <       titleTextBox     >      Course Number:     <courseNumberTextBox>
Permalink: <                                >      Set As Home Page <checkbox>
Body
<BodyTextArea>
FieldName1: <textbox>              FieldName2: <textbox>
FieldName3: <textbox>              FieldName4: <textbox>
FileUpload1: <control>              FieldName5: <textbox>
FileUpload2: <control>              FieldName6: <textbox>
etc
[Save]     [Clear]

If I just put the div in my own editor template then it will only be around the fields specifically defined on CoursePart, not Course content item, right? Or am I missing something critical about Orchard here?

Thanks,
Will

Coordinator
Jan 6, 2012 at 8:13 PM

Neither will putting a wrapper around the course *part* put a wrapper around everything. I think I see your confusion now: you are probably confusing the part with the item.

You won't be able to put a wrapper around more than one shape. I'm afraid this can't work in the present state of things. If you want completely arbitrary layout and CSS is not enough, you'll have to create your own editor probably by building a custom controller, view, etc.

Then again, the layout you are showing here seems very simple and I don't see why it couldn't be done with just CSS and the existing markup.

Coordinator
Jan 8, 2012 at 12:57 AM

Oh, I just got an idea, don't know why I didn't think of that before. You can probably override the content template for the whole type and define your own zones in there (that can have their own tags and classes. Then, it's just a matter of using placement to put each part in the zone you want. That's how you do a "wrapper" around more than one part. Duh. :)

Jan 8, 2012 at 5:04 PM
Now, that's an awesome idea!
Thanks Bertrand. :)

Will

Sent from my iPhone

On Jan 7, 2012, at 8:57 PM, "bertrandleroy" <notifications@codeplex.com> wrote:

From: bertrandleroy

Oh, I just got an idea, don't know why I didn't think of that before. You can probably override the content template for the whole type and define your own zones in there (that can have their own tags and classes. Then, it's just a matter of using placement to put each part in the zone you want. That's how you do a "wrapper" around more than one part. Duh. :)