Citeck ECOS form templates

Author: Alexander S. Kazachkin

Citeck ECOSForms are displayed on the page according to the selected global template and the proper attribute and group templates. There are three global templates:

Table – is a global template used by default. It contains 1, 2 or 3 columns for arrangement of elements. The template for the attribute grouping is rowset, for the attribute itself – row.
Wide is used for arrangement of element on the full-width screen. The template for the attribute grouping is blockset, for the attribute itself – block.
Tabs – is a global template for arrangement of elements using tabs. Unlike the two previous templates, it is used only for arrangement of attribute sets. It uses the global templates Table and Wide as grouping templates.

Forms in Citeck ECOS contains the methods of setting up these templates.

"Wide" Template

The grouping template blockset must include the attributes in order to group it. This template frames the attribute group of the horizontal strings.

All attributes in the group will be placed in the full-width screen. If there are a lot of attributes or its width is large, the group elements will take one more string.

The attribute block takes 250 pixels of screen real estate by default. The width is a configured parameter and it can be specified in a hierarchical way. So the template root can contain the information about the block width for all elements, where the width in the block will be extended only to the elements inside the block.

Also every attribute can have its individual width. The better the parameter is uploaded, the higher its priority. The attribute with the individual width parameter will have the most maximum priority. Such approach allows to configure the element width on the form rather flexibly.

Let’s consider the following configuration form as an example:

    <view class="example:form1" template="wide">
        <param name="width">300px</param>

        <view id="blockset-with-width">
            <param name="width">450px</param>

            <field prop="example:prop1" />
            <field prop="example:prop2">
                <param name="width">600px</param>
            </field>
            <field prop="example:prop3" />
        </view>

        <view id="blockset-without-width">
            <field prop="example:prop4">
                <param name="width">700px</param>
            </field>
            <field prop="example:prop5" />
        </view>
    </view>

The width of 300 pixels is given globally for all attribute blocks. The form contains 2 grouping block, one of them also has the width setting of attached blocks. Consequently all element inside the block with the blockset-with-width identity will have the width of 450 pixels except the example:prop2 attribute with the given width.

If we consider the width of all attributes, we get the following scheme:

```
example:prop1 - 450px
```
```
example:prop2 - 600px
```
```
example:prop3 - 450px
```
```
example:prop4 - 700px
```
```
example:prop5 - 300px
```

"Tabs" Template

With this template you can use the grouping block as tabs. This option can be useful for the building of big forms or grouping structures on the form.

In order to rename the tab, the group must have the title parameter.

The template can be specified globally as well as for defined attribute group.

Note that the mechanism of form building ignores the attributes, if these attributes will be arranged at random inside the template.

Let’s consider the following scheme as an example:

<view class="example:form2" template="tabs">
    <view id="tab 1">
        <view>
            <field prop="example:prop1" />
        </view>

        <field prop="example:prop2" />
        <field prop="example:prop3" />

        <view tempate="tabs">
            <field prop="example:prop4" />
            <field prop="example:prop5" />

            <view>
                <field prop="example:prop6" />
                <field prop="example:prop7" />
            </view>
        </view>
    </view>

    <view id="tab 2" template="wide">
        <param name="title">Group 2</param>

        <field prop="example:prop8" />
        <field prop="example:prop9" />
    </view>
</view>

The form uses the tab template globally, it means that all next attribute groups will be the tabs, i.e. “tab1” and “tab2” blocks will be the global tabs on the form.

The second tab will use the “Wide” template for all next elements, but the first one – “Table” template used by default.

The first tab doesn’t use the parameter to name the tab, so this name will be generated automatically (the index in the tab array and the localized word “Tab” are used here). The second tabs is specified with the “title” parameter

There are several grouping block inside the 1^st tab where one of them uses the “Tabs” template. This is quite normal if the first tab consists of the block with tabs. However the block with tabs will be set incorrectly. Finally it will consists of only one tab; and attributes “example:prop4” and “example:prop5” won’t be displayed on the form (the template ignores undefined attributes without grouping blocks).