Custom Forms + CSS Placement of fields

Topics: Customizing Orchard
Sep 25, 2012 at 1:41 PM

I'm having a hard time placing some my fields side-by-side for a form i have setup. Each field is contained within it's own <fieldset> tag with no custom id or class name i can use for CSS.

I have tried creating alternate EditorTemplate file for my fields using the designer tool, but i'm not sure what @model directive to use.

Can someone point me where i need to be looking please?

Coordinator
Sep 25, 2012 at 5:52 PM

You may want to override a full content template alternate. See http://weblogs.asp.net/bleroy/archive/2011/07/31/so-you-don-t-want-to-use-placement-info.aspx

Sep 26, 2012 at 2:05 PM

I have tried using the Shape Tracer to generate an alternate file for me for each of my fields, however I am having a hard time with what the model class should be, it appears to be a ShapeProxy class of some kind.

Someone suggesting using dynamic as the type, i got a little further with this however there is a nested Model property to get to the actual properties...such as:

Model.Model.SelectedValues

This is causing issues with Html Helpers to display my fields.

Any ideas on what to do from here?

Sep 26, 2012 at 2:19 PM

I noticed i can override the template for the whole form too rather than individual fields and it gave me a default template like so:

@using Orchard.ContentManagement;
 
@{
    ContentItem customForm = Model.ContentItem;
    string returnUrl = Model.ReturnUrl;
 
    // remove default Save/Publish buttons
    Model.Editor.Zones["Sidebar"].Items.Clear();
}
 
@using (Html.BeginFormAntiForgeryPost(Url.Action("Create", "Item", new { area = "Orchard.CustomForms", id = Model.ContentItem.Id }))) {
    @Html.ValidationSummary()
 
    // Model is a Shape, calling Display() so that it is rendered using the most specific template for its Shape type
    @Display(Model.Editor)
 
    @Html.Hidden("returnUrl", returnUrl);
 
    <fieldset class="submit-button">
        <button type="submit" name="submit.Save" value="submit.Save">@T("Submit")</button>
    </fieldset>
}

 

Can i override the @Display(Model.Editor) to custom html, how would i call the Html helpers for each field?

Thanks for the help.

Coordinator
Sep 30, 2012 at 10:48 PM

Sure, why not? But I'm struggling to understand what you mean by "call the html helpers for each field".

Sep 30, 2012 at 11:24 PM

Well i have 5 fields for example, 4 text fields and 1 drop down option.

How can i define my fields so they are strongly typed, is that even possible?

For example can i call @Html.TextboxFor(x => x.Fullname)

If i have defined a drop down list for my form with some option values for the list, if i was to manually override the form how would i access these options?

For example:
@Html.DropDownList(x => x.TitlePrefix, new SelectList(?))

I have just done a very quick hack and removed the line: @Display(Model.Editor) and replaced with string based html helpers like below, where Lead is the name of my form (this seems very hacky):

@Html.TextBox("Lead.Fullname.Value", "", new { required = "required", placeholder = "Your full name", @class="textMedium", maxlength="25"})

Although i'm not sure what to do with a drop down list.

I'm probably going about this the wrong way all together though.

Coordinator
Oct 1, 2012 at 1:50 AM

No, that won't work, you'll have to use the helpers that don't take a Lambda: Lambdas and dynamics don't play nice together. If you want strongly typed, just build a view model like you would in regular MVC.