Ui-related template looks like a non-editable area for rendering plain text or a single data record. Its content is set with the help of the same-name template parameter.
The template property of the component sets its content:
webix.ui({
view: "template",
template: "Default template with some text inside" // text content
});
Related sample: Default Template
Template's content can as well be taken from an HTML node pointed to by:
<div id="myDiv">Default Template with some text inside</div>
webix.ui({
view: "template",
content: "myDiv"
});
Related sample: Default Template
<div id="my_box1" style='display:none;'>Some text here</div>
{ template: "html->my_box1", autoheight: true },
Related sample: Autosizing to Content
As a result, contents from HTML is placed inside the view.
{ view: "template", src: "loadtext.php" }
Specifying the view
type as "template" is optional. The following code works as well.
webix.ui({
container: "layout_div",
rows: [
{ template: "Default Template with some text inside" },
{ ... }
]
})
The same-name property of the component, template, is also used by Webix data components. It allows setting pattern to display texts and render data items from multiple datasets alongside with adding styling to them. The Data Templates article covers all the rules of templating.
The template content is set with the template property, which can be:
{ template: "Plain text" }
{template: "Text with <b>HTML</b> markup" }
{ template: "#title#", data: { title: "Image One", src: "imgs/image001.jpg" } }
// shows "Image One"
If a template is used as an individual data item (as shown above) the data fields should be interpolated in either of the two ways:
obj
) as parameter:{
data: {title: "Image One", src: "imgs/image001.jpg" },
template: function (obj) {
// obj is a data record object
return '<img src="'+obj.src+'"/>'
}
}
The rules of data templating can be studied in detail in the dedicated documentation article.
Dymanic content setting can be implemented with the help of:
The default template is a white non-editable area with some text or HTML content. It's surrounded by a grey border.
{ view: "template", template: "Text" }
The clean
template looks very much like the default one, but has no borders.
{ view: "template", template: "Text", type: "clean"}
Header template is used to set headers for layout rows/columns. Looks like a blue bar above the main contents.
webix.ui({
rows: [
{ view: "template", template: "Header Template", type: "header" },
{ view: "...", ... }
]
});
Note that headers of accordionitems are set in a different way.
Section template places header within the line that encircles a row/column thus making it possible to neatly divide the webpage into blocks. As there's a line in this template type, it would be nice to resort to borderless layout design.
{view: "template", template: "Header template", type: "section" }
Related sample: Template Types
Back to top