Options for rendering forms

Topics: Feature requests, General, Standard packages, Visual editor
Sep 22, 2011 at 6:02 AM
Edited Sep 22, 2011 at 6:03 AM

First of all, I'd like to say, thank-you for an excellent job on the Forms Renderer. It does a great and works well for 80-90% of forms. I like that you generate a true "label" element with the for attribute. I also like that you group things into fieldsets.

I do have a few recommendations and comments, however.

  1. Submit and Reset buttons. I recommend making the default render a <button> element instead of <input type="submit">. The reason for this is much more control over the styling. 
    • See here for examples: http://particletree.com/features/rediscovering-the-button-element/
  2. ReadOnly="true" renders as a textbox, however it might be a good idea to render it a label, which by nature is read only. 
    • Of course a purist would say that it's technically data input, so showing it as a read only input box has its merits, but I thought I'd mention it anyway. 
  3. Add an attribute (unless there already is one) to Render in the Console but not on the page. An example of when you'd want to do this is when, for example, you're storing IP Addresses of users when they submit a form. You want to be able to expose that to the Console but you don't want the Forms Renderer to show it.
    • I suppose a workaround is some CSS like the following to fake it, but you can't hide it as the Label will still show up:

 

/* To show it as a label */
input[readonly] {
    border: 0 solid #FFFFFF !important;
    color: #CCCCCC;
}

 

Another example is the Date Form was submitted. You often want to see this information in the console, but don't necessarily want to clutter up the form with this information.

Oct 12, 2011 at 5:07 PM

In rereading this I guess I didn't really ask a clear question.

If I use a Form Renderer module, I'd love to see an option to display fields or not. There are many cases when you don't want to render out all fields, so once you've chosen a datatype, a Checkbox to hide any field that is optional or has a default value would be a GREAT addition to the Form Renderer.

If anyone has any suggestions for creating a new FormRenderer (modifying the existing one) that has this functionality, please let me know.

Also, it would be great if the Form Renderer rendered a <button> control instead of an <input>. It's really only IE6 that has odd behaviour with the button element.

Coordinator
Oct 13, 2011 at 6:21 AM

Hello,

Consider this to hide some optional fields with defaults values:

1) edit file \Frontend\Composite\Forms\Renderer\Widgets\Containers\FieldGroup.ascx , locate next row:

UiFields.Controls.Add(new LiteralControl(string.Format("<div class='FormElement{0}'>", Composite.Forms.Renderer.FormsRenderer.IsRequiredControl(formControlDefinition.FormControl.ID) ? " required" : "")));

and replace it with this code:

UiFields.Controls.Add(new LiteralControl(string.Format("<div class='FormElement{0}{1}'>", Composite.Packages.FormsRenderer.FormsRenderer.IsRequiredControl(formControlDefinition.FormControl.ID) ? " required" : "", formControlDefinition.Label.StartsWith("[hidden]") ? " hidden":"")));
2) The idea is to add "hidden" class to the fields which Label starts with "[hidden]"


3) Locate file \Frontend\Composite\Forms\Renderer\Styles.css and add next css rule:

.FormsRenderer .hidden{display:none;}
4) Now just set Label = [hidden] for fields you want to hide.

 

Regarding to the Button rendering, check this file \Frontend\Composite\Forms\Renderer\Controls\FormsRender.ascx

 

Nov 18, 2011 at 12:46 AM
Edited Nov 18, 2011 at 12:49 AM

Fantastic! Just one small change I noticed:

This worked Composite.Forms.Renderer.FormsRenderer.IsRequiredControl instead of Composite.Packages.FormsRenderer.FormsRenderer.IsRequiredControl

I'm on 2.1.3 Beta, so I don't know if that's why it's different.

So, the following worked:

UiFields.Controls.Add( 
   new LiteralControl(
    string.Format("<div class='FormElement{0}{1}'>",
      Composite.Forms.Renderer.FormsRenderer.IsRequiredControl(
        formControlDefinition.FormControl.ID) ? " required" : "", 
          formControlDefinition.Label.StartsWith("[hidden]") ? " hidden":"")));