UI Custom HTML in dialog

Basic Building Blocks Series: Within the basic building blocks series over time I will add all the little things which someone who just starts with Serenity Framework would have to spend a lot of time figuring it out him/herself.

What you get with this article:

You can insert at any sequential (vertical) position within your dialog any HTML you want.

1. Either fully statically defined within xyzForm.cs
2. Coming from the language translation files (e.g. site.texts.invariant.json)
3. Programmatically filled in from xyzDialog.ts

---

Please note: It is not required to define these fake string fields within xyzRow.cs

---

For this example, we have two fields and we want to display some HTML in between them.

Like this:

---

Solution 1

To define the custom HTML statically within xyzForm.cs, modify your xyzForm.cs like this:

        [StaticTextBlock(HideLabel = true, IsHtml = true, IsLocalText = false, Text = "<label class=\"caption\"></label><b>Your custom HTML here</b>")]
        public String YourHTMLcontent { get; set; }

---

Solution 2

To statically fill this from your translation files, modify your xyzForm like this:

        [StaticTextBlock(HideLabel = true, IsHtml = true, IsLocalText = true, Text = "Dialogs.YourDialogName.YourCustomHTML")]
        public String YourHTMLcontent { get; set; }

and then add this to your site.texts.invariant.json file:

        "Dialogs.YourDialogName.YourCustomHTML": "<label class=\"caption\"></label><b>Your custom HTML here</b>",

---

Solution 3

To programmatically fill this from xyzDialog.ts, modify first your xyzForm.cs like this:

        [StaticTextBlock(HideLabel = true, IsHtml = true, IsLocalText = false)]
        public String YourHTMLcontent { get; set; }

and then add this to your xyzDialog.ts:

        protected afterLoadEntity()
        {
            super.afterLoadEntity()

            this.form.YourHTMLcontent.element.html('<div class = "PlaceHolder"><label class="caption"></label><b>Your custom HTML here</b></div>');
            
        }