form component label and template

I want to render a form view with elements that show a label and some html template with a value. Any tips?
Basically a normal form with the look and feel of a form, but without any editors only textual values.

https://webix.com/snippet/5eab6210

Thanks, but there’s no proper aligment with the label.

https://webix.com/snippet/cf827efc

The html input control should be replaced with a div or span instead of a input control

then why not to use “readonly” text?

also you can use “forminput”
https://webix.com/snippet/c691a228

then why not to use “readonly” text?

Because i want to apply a template for example:
value: { id = 1, text = "Company} => render as link with a href attribute

also you can use “forminput”

Thanks. But forminput uses a fieldset making rendering/styling a bit complexer.

I tried:

  • Subclass the text control
  • Render a div instead of an input tag

But I get strange missing common.* functions.

you can use forminput with templated label
https://webix.com/snippet/0fafe151

But what about the space between the components?

https://webix.com/snippet/a19236a1

forminput inherits from the fieldset, which has default

paddingX: 18,
paddingY: 30

https://webix.com/snippet/d8962dda

a normal form with the look and feel of a form, but without any editors only textual values.

In general, the desired look is possible with positioning labels/controls via layout rows and cols.

As for the formInput features:

Basically, it acts as a wrapper with the label.
Also, if there’s a name property, it will call set/getValue for the body on set/getValues of parent ui.form.

If it contains a component which has built-in support for these methods (e.g. a label/text/richselect), the above snippet is enough.

To link other components with form API, you need to extend them with get/setValue, as described in the related topic.

As a result, you can get something like
https://webix.com/snippet/255f7cef