This project is read-only.

Rendering Custom Form in a Pop-Up

Topics: General
Oct 31, 2014 at 7:42 PM
Hi Orchard gang - So I want to render a custom form in a fancybox pop-up. It's a "help me" form, and we don't want users to leave the current page - so popup it is. I can get that working easily by just rendering the link in a fancybox dialog:

<a href="/help-me-contact-form" class="dialog">click here</a>

Problem is, the whole theme comes along for the ride - navigation etc. I can switch that off with the [Theme(Enabled=false)] attribute in my own controller - so something like:
<p>Can't find what you're looking for? @Html.ActionLink("Click here", "HelpMe", "Camp", null, new{ @class="dialog" })</p> Where the "HelpMe" action (& view) on the "Camp" controller loads the custom form via the ContentManager and returns the CustomFormPart to the view (as the model). Just a wrapper so I can turn off theming in the pop up.

I created an alternate view for the form in my module, and call it in the HelpMe.cshtml view like so:

@Display(New.Content_Edit__HelpMeForm(Content: Model))

But that doesn't work (Orchard / Razor just renders "Orchard.CustomForms.Models.CustomFormPart").

What am I doing wrong? How would you go about injecting the form's shape into an arbitrary view (so that I can turn off theming)?

Oct 31, 2014 at 8:45 PM
I should also note - adding the "Disable Theme" part did not turn off the theme in either pop-up or regular page viewing mode. Caching is disabled for this route, so not a caching issue. Perhaps this part isn't compatible with Custom Forms, or is there an issue with this part?

I am currently on 1.8.0, but will be upgrading to 1.8.2 as soon as it drops :-)
Oct 31, 2014 at 10:34 PM
For your approach maybe this could help:

I also needed for one of my projects a custom form in an dialog. I solved it with adding a new zone to my theme which is set to display:none; and put the custom form with a custom form widget in that zone. Than the jQuery dialog picks that div and displays it.
Oct 31, 2014 at 10:59 PM
Thanks Benshi, not sure that's what I want though. My thought is to have my own controller use the ContentManager to grab an instance of the custom form, and either 1) make that CustomFormPart the model for the view, or 2) build the shape in the controller action and use the shape as the model (I'm leaning towards 2). That way I can disable the theme from the controller, put whatever markup I want in the view before / after the shape is rendered, and not mess about with widgets and zones - which we have too many of already.

I'm sure it's doable, I just need a better understanding of shape rendering and how to grab / create that shape either in my controller or via Razor in my view. I read Sipke's recent Shapes post, and one that Piotr wrote a while back, and they helped but I'm still not there.

Once I figure it out I will definitely post the results back here - I bet this is a common requirement!

Oct 31, 2014 at 11:00 PM
Oct 31, 2014 at 11:10 PM
Hey Kurt, maybe you want to give the new Dynamic Forms feature a shot? The Disable Theme part should work with that just fine (if not, let me know).
It is there on the 1.x branch. When you enable the Dynamic Forms feature, a new content type called Form will be created.
When you create a new Form content item, you start out with an empty Form element and a Button. You design your form using the Grid element and Form elements.
Be sure to attach the Disable Theme part to the Form content type. Now when you access the new Form item, it should render without the theme stuff.
Nov 1, 2014 at 4:37 AM
I think trying the Dynamic Forms is the best option. If you want stick to your option I think you should be able to render the shape of the custom form with the contentmanager and add it to your ViewModel. Then in the View you have to call Display(Model.CustomFormShape).

To build your Shape with the contentmanager use
var shape = _contentManager.BuildDisplay(ContentItem, "Detail");