Serenity: How to customize a XYZ Form to add a block of text?

[john20xdoe]

Hi, how can I add a simple paragraph to a Form? (like a short

element that contains a block of instructional text). or can I overload an attribute to do this.?

[Estrusco]

If you want an hint, there is Hint("your text") attribute

[john20xdoe]

Thanks. but hint only shows on hover and is associated with a specific column.

I think i need something similar to the [Category] attribute, which is placed in-between the XYZColumns properties, but instead of rendering the html for category in the form (you know, the category name with the line), a short paragraph that encompasses the entire length of the form appears instead
.

[john20xdoe]

If I need to create a new Attribute, can anyone redirect me to an example for one that renders HTML code in transcriptTypescript?

[volkanceylan]

You need to create a widget, see ones in Serenity source.

[john20xdoe]

@volkanceylan

thanks, I'll check it out. will update this issue with the code snippet i come up with.

[dfaruque]

you can create a template for that dialog like this

<div class="s-DialogContent">
    <div id="~_Toolbar" class="s-DialogToolbar">
    </div>
    <div class="s-Form">
        <form id="~_Form" action="">
            <div class="fieldset ui-widget ui-widget-content ui-corner-all">
                <div >
                    Some texts here...
                </div>
                <div id="~_PropertyGrid"></div>
                <div class="clear"></div>
            </div>
        </form> 
    </div>
</div>

and give a name like SomeDialog.Template.html

[john20xdoe]

@dfaruque
thanks, I honestly had not yet considered the html template even though I had read about it in the guide. =) This is a good nudge to a closer direction.

I can't yet continue with my Serene experiments (I'm in a sprint in another project), but the next step is: now I need to figure out how to configure the text for the (custom) widget here:

<div >
  Some texts here...
</div>

via a custom attribute, settable in Form (or Row?).

[volkanceylan]

See StaticTextBlock sample in 2.4.11.4

[john20xdoe]

HI, sorry for late reply.
I have checked the StaticTextBlock sample, from 2.4.11.4 and it worked perfectly. (I copied StaticTextBlock.ts to my lower version of Serene and T4-transformed, voila!) The only (minor) downside is one needs to have a property in the Form to attach it to, unlike [Category]. Of course, there is an Attribute option to HideLabel to hide the property, which is nice.

I'll post my contribution to StaticTextBlock.ts here. I added a containerClass option, where you can put your own CSS class to the static text block. Just T4 transform again so it can be available in your C# code.

namespace XYZ.Common {

    /**
     * This is an editor widget but it only displays a text, not edits it.
     *  
     */
    @Serenity.Decorators.element("<div/>")
    @Serenity.Decorators.registerEditor([Serenity.ISetEditValue])
    export class StaticTextBlock extends Serenity.Widget<StaticTextBlockOptions>
        implements Serenity.ISetEditValue {

        private value: string;

        constructor(container: JQuery, options: StaticTextBlockOptions) {
            super(container, options);

            // hide the caption label for this editor if in a form. ugly hack
            if (this.options.hideLabel)
                this.element.closest('.field').find('.caption').hide();

            this.updateElementContent();
        }

        private updateElementContent() {
            var text = Q.coalesce(this.options.text, this.value);

            // if isLocalText is set, text is actually a local text key
            if (this.options.isLocalText)
                text = Q.text(text);

            // don't html encode if isHtml option is true
            if (this.options.isHtml) {
                this.element.html(text);                
            }
            else this.element.text(text);

            if (this.options.containerClass)
                this.element.addClass(this.options.containerClass);
        }

        /**
         * By implementing ISetEditValue interface, we allow this editor to display its field value.
         * But only do this when our text content is not explicitly set in options
         */
        public setEditValue(source: any, property: Serenity.PropertyItem) {
            if (this.options.text == null) {
                this.value = Q.coalesce(this.options.text, source[property.name]);
                this.updateElementContent();
            }
        }
    }

    export interface StaticTextBlockOptions {
        text: string;
        isHtml: boolean;
        isLocalText: boolean;
        hideLabel: boolean;
        containerClass: string;
    }
}

Thanks @volkanceylan !