Group control elements in serenity dialog/form

[vmrosariojoe]

Hi Team, my screen dialog output appears like this :

I want the UI to group the elements and appear like below :


How to achieve this in my form/dialog with css attributes?

[minhhungit]

Hi @vmrosariojoe try something like this on your form.cs

[HalfWidth]
public String PatientReferenceNo{ get; set; }

[HalfWidth]
public String PatientFullName{ get; set; }

[HalfWidth]
[FormCssClass("line-break-sm")]
public DateTimePatientDateOfBirth{ get; set; }

[HalfWidth]
[FormCssClass("line-break-sm")]
public int Age{ get; set; }

[HalfWidth]
[FormCssClass("line-break-sm")]
public String PatientPatientImage{ get; set; }

Put [HalfWidth] on all fields, but just put [FormCssClass("line-break-sm")] from 3rd field to last field

Read more here
https://serenity.is/blog/2018/05/16/multi-column-layout

[vmrosariojoe]

minhhungit,
Thanks for your reply. However i'm not able to get the desired output. Still there is space:

My code :

    [DisplayName("PRN")]
    [HalfWidth]
    public Int64? PatientId { get; set; }

    [HalfWidth]
    [ReadOnly(true)]
    [DisplayName("Patient Image")]
    public StringField PatientPatientImage { get; set; }

    [DisplayName("Reference No")]
    [ReadOnly(true)]
    [HalfWidth]
    [FormCssClass("line-break-sm")]
    public StringField PatientReferenceNo { get; set; }

    [DisplayName("Full Name")]
    [ReadOnly(true)]
    [HalfWidth]
    [FormCssClass("line-break-sm")]
    public StringField PatientFullName { get; set; }

    [DisplayName("Date Of Birth")]
    [ReadOnly(true)]
    [HalfWidth]
    [DisplayFormat("d")]
    [FormCssClass("line-break-sm")]
    public DateTimeField PatientDateOfBirth { get; set; }

    [DisplayName("Age")]
    [ReadOnly(true)]
    [QuarterWidth]
    [FormCssClass("line-break-sm")]
    public StringField Age { get; set; }
    
    [QuarterWidth]
    [ReadOnly(true)]
    [DisplayName("Gender")]
    [FormCssClass("line-break-sm")]
    public StringField GenderDescription { get; set; }

[minhhungit]

Hi @vmrosariojoe, to custom dialog layout, you can add a html template file with name same with your dialog, for example, your dialog has name AbcDialog.ts then create html template with name AbcDialog.Template.html

CategoryDialog.Template.html

<div class="s-DialogContent">
    <div id="~_Toolbar" class="s-DialogToolbar">
    </div>
    <div class="s-Form">
        <form id="~_Form" action="">
            <div class="fieldset" style="display: block">
                <div id="~_PropertyGrid" class="col-md-6"></div>
                <div id="~_rightPanelContainer" class="col-md-6"></div>
                <div class="clear"></div>
            </div>
        </form> 
    </div>
</div>

The template above add a div on right, we will use it to hold Image field

Edit your dialog.ts and move your Image field to new container

constructor() {
      super();
      this.byId("rightPanelContainer").append(this.form.Picture.getGridField());
  }

Nothing change on your Form.cs, but your field should be [FullWidth] instead [HaftWidth] like before, because right now they just take 50% of dialog

!!! Keep in mind that this is hack and it maybe a bug in future, so DO IT AT YOUR OWN RISK

Good luck, here is demo

[vmrosariojoe]

Thanks a lot minhhungit. This is working. Much appreciated.