Allow for layout definitions to structure the input components

[timiil]

Hi , nice start 👍

i am thinking we may add some layout to the dynamic form , we can pass another 'schema' object to RenderFormElements class that render the elements in some layout, or we can define some new attributes tag onto the POCO.

how do you think ? dude 💯

[irushabh]

Hello,

I am totally agree with your suggestion. Without Layout there is no use of it.
Infact, My suggestion is it has to be user input such as How many rows and columns user wants to add in the layout.

Also, it can be form wizard with more than one steps form.

Thanks,
Rushabh

[Alex Knijf]

Hey @timiil, sure that is a great idea. At the moment the focus was to render the components without to much hassle.
@irushabh "no use" seems a little reductive. You are now able to render simple forms,and if that is someones requirement it's usable. :)

Anyway thanks I'll put it on a roadmap. if you guys have any requirements. please provide a list in this issue. And we'll make an effort to get it in the lib.

[Alex Knijf]

Problem

At the moment of writing only simple forms are supported. These are column based flex items. The requested feature is that the developer is able to specify groups and layout for the forms.

Example: create an address form group with the address and house-number input fields on one line and have the address be 8/12th and house-number 4/12th for the form row.

Visual example

Address

---

Form row 1 | [ --------adress---------- | ---h. number--- ] 12 columns
Form row 2 | [------- County-----| ---- Country----- ] 12 columns
Form row 3 | [ etc.... ] 12 columns
Form row 4 | [ etc.... ] 12 columns
Form row 5 | [ etc.... ] 12 columns

Solution

Group Label

---

Form row 1 | [ --------8-------- | ---4--- ] 12 columns
Form row 2 | [------ 6 -----| ---- 6 ---- ] 12 columns
Form row 3 | [ etc.... ] 12 columns
Form row 4 | [ etc.... ] 12 columns
Form row 5 | [ etc.... ] 12 columns

public class VxFormLayoutAttribute {

   public string Label { get; set; }

   public Array<VxFormGroup> Groups { get; set; }

}

public class VxFormGroup<TModel> {

  public string Label { get; set; }
  
  public string Id { get; set; }

  public Array<VxFormRow<TModel>> { get; set; }

}

public class VxFormRow<TModel> {

  public string Label { get; set; }
  
  public string Id { get; set; }

  public LabelPositions LabelPosition {get; set;}

  public Array<VxFormColumn> { get; set; }

}

public class VxFormColumn {
  
    public int ColSpan { get;set; }

    public string FieldName { get; set; }
    
}

public enum LabelPositions {
  Combined,
  Individual
}

MoSCoW

MUST

[ ] render multiple inputs on one line
[ ] 12 columns based grid for form row
[ ] combine the labels for multiple fields

SHOULD

[ ] switchable label positions: top and left

[timiil]

hi, here is just some little code:

public class Product 
{
     public string ID {get; set; }
    
     public string Name {get; set; }

     public decimal SinglePrice {get; set; }

     public string Description {get; set; }
}

viewProductForm.json:

    { field : "ID", caption : "Identity", allowNull : false, readonly: true, control : textbox, col : 1, width: 3 },
     { field : "Name", allowNull : false, minLen: 8, control : textbox, col : 5, width: 3 },
     { field : "SinglePrice", icon:"money", defaultValue: 0.0,control : numEdit, col:1, width: 3, row: 2 },
     { field : "Description", icon:"memo", control : text, col:5, width: 3, row: 2, height: 3 }

how do u feel these ?

[Alex Knijf]

hi, here is just some little code:

public class Product 
{
     public string ID {get; set; }
    
     public string Name {get; set; }

     public decimal SinglePrice {get; set; }

     public string Description {get; set; }
}

viewProductForm.json:

    { field : "ID", caption : "Identity", allowNull : false, readonly: true, control : textbox, col : 1, width: 3 },
     { field : "Name", allowNull : false, minLen: 8, control : textbox, col : 5, width: 3 },
     { field : "SinglePrice", icon:"money", defaultValue: 0.0,control : numEdit, col:1, width: 3, row: 2 },
     { field : "Description", icon:"memo", control : text, col:5, width: 3, row: 2, height: 3 }

how do u feel these ?

I understand what you are after but that is not what this issue is gonna solve. This issue is for specifing a solution for: "How to lay out the form-fields in a form". JSON based rendering of a form on feels a bit old skool thinking. What's nice in blazor is that we share the models between server and client code.

So could you give me an example when and why you want to have a JSON interface in the VxFormGenerator? The only reason i can come up with it: is that you have a api already created with a existing "schema" for describing a form. Because if it is a new Application it would be cumberstone to create the api not in dotnet core. If that is the case you just create a JSON to VxFormLayout parser based on your api response. The repository is able to handle string lookups as well.need to create example for it in the demo application. (not sure if it is fully implemented yet)

But If JSON schema support is still a requirement we need to separate it from this issue. Having said that, all the models are serializable, i would not see any big hurdles to serialize the JSON to a VxFormLayout object.

[timiil]

Agree with you. i think we should give the view layout from an API . but we can first implement the POCO View way, and then the JSON way in the future. more important things may are : ICON, FontStyle, CSS style...features.