Structure, Layout and Navigation

The structure and general layout of your form are determined by three key structural elements:

• Page
• Tabs
• Blocks

These elements are defined within the <form> tag of your HTML template file. Navigation is implemented as an ordered list, where each first-level list entry represents a page. Tabs are defined on the nested second list levels, and blocks are defined using an <a> tag.

<form>
    <!-- first level - pages -->
    <ol>
        <li data-hf-title="Operation customer" id="page-operation-customer">
            <!-- second level - tabs -->
            <ol>
                <li data-hf-title="Operation" id="tab-operation">
                    <!-- block definitions -->
                    <a href="#operation_tab_1"></a>
                    <a href="#operation_tab_2"></a>
                </li>
                <li data-hf-title="Customer" id="tab-customer">
                    <a href="#customer_tab_1"></a>
                    <a href="#customer_tab_2"></a>
                </li>
            </ol>
        </li>
        <li data-hf-title="Material & Order" id="page-material">
            <ol>
                <li data-hf-title="Material" id="tab-material">
                    <a href="#material_tab_1"></a>
                    <a href="#material_tab_2"></a>
                </li>
                <li data-hf-title="Order" id="tab-order">
                    <a href="#order_tab_1"></a>
                    <a href="#order_tab_2"></a>
                </li>
            </ol>
        </li>
    </ol>
</form>

Pages (First Level Navigation)

The page represents the main menu for the form and is positioned on the left side of the form (or on top of the form in a hamburger menu in case of a mobile device). The menu is implemented as a HTML ordered list. Every form must specify at least one page.

Each list entry must contain the attribute data-hf-title or data-hf-htmlTitle. These attributes define the label of the menu entry. The data-hf-htmlTitle attribute can be used to display HTML content as label. If both title attributes were specified, the contents of the data-hf-htmlTitle attribute is displayed.

Further attributes are data-hf-condition and id. The attribute id is required for expandable or repeating tabs or in combination with the attribute data-hf-condition. Nevertheless it is best practice to define the attribute id.

For further and more general (programmatical) accessibility of structure elements you can add a class-attribute.

Page navigation

<!-- first level – pages -->
<ol>
    <li data-hf-title="Operation customer">...</li>

    <li data-hf-htmlTitle="<strong>Customer Relations</strong>">...</li>

    <li data-hf-title="Billing Information" data-hf-condition="{...}" id="billing" class="special-pdf">...</li>

    <li data-hf-title="Operation remarks" data-hf-type="evaluation">...</li>
</ol>

Define a page which is not included in the generated PDF by adding the attribute data-hf-type="evaluation".
Please consider this page to be the last one, so the generation of the corresponding PDF can be processed without gaps.

For more general purpose of styling your PDF use classes inside the list entries.

Note

On the right side of the navigation menu, counters are displayed. These counters represent the number of not yet filled out required fields. If all required fields are filled out, the counter is hidden and a checkmark is displayed.

The number of visible menu entries (e.g. pages) should be limited to seven, due to display issues, otherwise scrolling in the left menu area can be necessary.

Next Page Button

The "Next Page" button is used to provide users with a simple way to jump to the next page. It is placed at the end of the page. It is configured by the attribute data-hf-next-page on a page element.

<!-- first level – pages -->
<ol>
    <li data-hf-title="Operation customer" data-hf-next-page>
        <!-- second level - tabs -->
        <ol>
            ...
        </ol>
    </li>
</ol>

data-hf-next-page also takes an object for more complex configurations. A valid JSON string has to be used.

<!-- first level – pages -->
<ol>
    <li
        data-hf-title="Operation customer"
        data-hf-next-page='{
            "condition": "visible",
            "hint": "<strong>To navigate</strong> to the next (or other) page(s), you can also use the page menu on the left side."
        }'
    >
        <!-- second level - tabs -->
        <ol>
            ...
        </ol>
    </li>
</ol>

Attributes	Type	How to use	Description
condition	String	"condition": "visible"	Set the condition for the NextPageButton. visible navigates to the next visible page. fullfilled navigates to the next editable page.
hint	String	"hint": "<strong>Test</strong>: This is a test hint for NextPageButton"	Display a hint text below the actual button. HTML is allowed. Quotes of HTML attributes have to be escaped. Images can only be used from Form Definition.
nextText	String	"nextText": "Next Page"	Display a custom prefix before next page title.
audioFeedback	String	"audioFeedback": true	Gives the user an audio feedback when clicking on the next button. Default: false

Next Page Button

Tabs (Second Level Navigation)

A "Tab" is used to further organize a page and its contents, corresponding to the second level of navigation. You can define tabs by nesting an ordered list (<ol>) inside the first level navigation (the page). Every form must specify at least one tab.

<!-- first level – pages -->
<ol>
    <li data-hf-title="Operation customer">
        <!-- second level - tabs -->
        <ol>
            <li data-hf-title="Operation">...</li>
            <li data-hf-title="Customer">...</li>
            <li data-hf-htmlTitle="<strong>Repair</strong>">...</li>
        </ol>
    </li>
</ol>

Tab navigation

For the first level navigation, define the menu entry labels by customizing the data-hf-title attribute.

If custom styles for tab labels are needed, use the data-hf-htmlTitle attribute to display HTML-formatted content as the label.

Tooltip

You can define a tooltip to provide a more detailed description of the tab's content. To enable this feature, set the data-hf-tooltip attribute.

<!-- first level – pages -->
<ol>
    <li data-hf-title="Operation customer">
        <!-- second level - tabs -->
        <ol>
            <li data-hf-title="Operation" data-hf-tooltip="Operation description">...</li>
            <li data-hf-title="Customer">...</li>
            <li data-hf-title="Repair">...</li>
        </ol>
    </li>
</ol>

Tab tooltip

Expandable Content

You can control the visibility of a tab's content by adding the attributes data-hf-expandableDefault, data-hf-expandable, and id. These attributes allow you to include or exclude additional content from both the form and the generated PDF file.

<li
    id="repairtab"
    data-hf-title="Repair"
    data-hf-expandable="true"
    data-hf-expandableDefault="closed"
    data-hf-condition="{...}"
>
    <!-- third level - blocks -->
</li>

Expandale Tabs

The default status can be set to closed or expanded. In case of the default value closed, the tab shows an ﹀-icon ("expand") on page load. The tab will be expanded by clicking the ﹀-icon to display the tab's content and add it to the PDF-file, opened tabs contain an ︿-icon ("close") to hide the input fields again and exclude the filled in content from the PDF.

Attributes	Type	How to use	Description
id*	String	id="repairtab"	Set the ID of the tab.
data-hf-expandable*	Boolean	data-hf-expandable="true"	Set the attribute to true to enable opening and closing.
data-hf-expandableDefault	String	data-hf-expandableDefault="closed"	Set "closed" to hide the tab content or "expanded" to show the content. This attribute is optional.

* These options are required

Repeatable Content

In HybridForms, you can repeat the entire content of a tab multiple times for reuse, with each instance called a repeating unit. This functionality is enabled by using the data-hf-repeatable attribute in the second level navigation. Since this is a broad topic, we have a separate documentation section dedicated to it. For more details, please refer to the "Repeating Units" page.

Tab Caption

The tab caption is shown above the tab's content and is defined using the data-hf-caption attribute on the tab element. A subtitle can be added by using the data-hf-subcaption attribute.

<li
    data-hf-title="Reparatur"
    data-hf-caption="Reparatur Termin"
    data-hf-subcaption="<strong>Hinweis:</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore"
>
    <a href="#controls-block1"></a>
    <a href="#controls-block2"></a>
</li>

Tab Caption

Blocks (Third Level Navigation)

"Blocks" are utilized to further organize the form. They serve as containers for the actual Form Controls and other HTML contents, corresponding to the third level of navigation.

You can define your blocks by using an <a> tag with the block ID as the link inside the second level navigation (the tab).

Note

These blocks have to be implemented as form blocks.

<!-- first level – pages -->
<ol>
    <li data-hf-title="Operation customer">
        <!-- second level - tabs -->
        <ol>
            <li data-hf-title="Operation">
                <!-- third level - blocks -->
                <a href="#operation-block1" data-hf-condition="{...}" data-hf-row-class="custom-row-class"></a>
                <a href="#operation-block2"></a>
                <a href="#"></a>
                <a></a>
            </li>
            ...
        </ol>
    </li>
</ol>

Note

• Our form generator automatically combines two blocks into a single row when the form is built on the client side. To style this row, you can apply a CSS class to the parent row using the data-hf-row-class attribute.

• <a> tags that lack an href attribute or contain only a hashtag are treated as empty blocks. This can be beneficial for structuring the form.

Form Blocks

Form Blocks serve as the containers for Form Controls and other HTML content. They are defined as div elements within the HTML Form Template. These div elements must include the ID and data-hf-block attributes. For more details on this topic, please refer to the Form blocks page.

block template

<div id="operation-block1" data-hf-block></div>
<div id="operation-block2" data-hf-block></div>

Templating with Includes

If various blocks have a similar structure and differ only in a few elements (such as label text, images, etc.), you can define the block once in a template file and create new blocks by referencing these template blocks. This is a comprehensive topic, so we have dedicated a separate section to it. For more information, please refer to the page "Includes".

fullWidth Blocks

Typically, when the App window is wide enough, two blocks are displayed side by side. If data-hf-fullWidth="true" is applied, a single block will stretch across the entire row.

<li data-hf-title="Customer">
    <a href="#controls-fullWidth" data-hf-fullWidth="true"></a>
    <a href="#controls-block1"></a>
    <a href="#controls-block2"></a>
</li>

fullWidth Blocks

Separator Blocks

The data-hf-separator attribute adds a horizontal line only to an empty full-width block, with the line color defined by the CSS variable --block-separator-color.

<li data-hf-title="Customer">
    <a href="#controls-fullWidth" data-hf-fullWidth="true"></a>
    <a href="#" data-hf-fullWidth="true" data-hf-separator></a>
    <a href="#controls-block1"></a>
    <a href="#controls-block2"></a>
</li>

Separator Blocks

Block Title

The block title appears above the block's content and is set using the data-hf-caption attribute on the block element. You can include a subtitle by adding the data-hf-subcaption attribute. By default, a separator line is shown above the title, but this can be defined by setting data-hf-separator="bottom" or data-hf-separator="none".

<li data-hf-title="Reparatur">
    <a
        href="#controls-fullWidth"
        data-hf-fullWidth="true"
        data-hf-caption="Reparatur Termin"
        data-hf-subcaption="<strong>Hinweis:</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore"
        data-hf-separator="bottom"
    ></a>
    <a href="#controls-block1"></a>
    <a href="#controls-block2"></a>
</li>

Without data-hf-separator="bottom"
Block Title

When there is a row with a block title on only one side, the content on the other side may become misaligned. To fix this, you can place an element with the class hf-title-height inside the block. This element will match the height of the block title, ensuring alignment.

Before

<li data-hf-title="Reparatur">
    <a href="#controls-fullWidth" data-hf-fullWidth="true"></a>
    <a
        href="#controls-block1"
        data-hf-caption="Reparatur Termin"
        data-hf-subcaption="<strong>Hinweis:</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore"
    ></a>
    <a href="#controls-block2"></a>
</li>

Block Title Misaligned

After

<li data-hf-title="Reparatur">
    <a href="#controls-fullWidth" data-hf-fullWidth="true"></a>
    <a
        href="#controls-block1"
        data-hf-caption="Reparatur Termin"
        data-hf-subcaption="<strong>Hinweis:</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore"
    ></a>
    <a href="#controls-block2"></a>
</li>

<div id="#controls-block2" data-hf-block>
    <div class="grid column1">
        <div class="r1 c1">
            <div class="hf-caption-height"></div>
        </div>
    </div>
</div>

Block Title Height Fix

Strucural Conditions

You can set conditions on every structural element (page, tab, block) to control its visibility based on specified criteria. Conditions are defined by adding the data-hf-condition attribute to the structural element. This comprehensive topic is covered in detail on the page "Conditions".

CSS classes

To apply custom styles to pages, tabs, and blocks, or to access structural elements via JavaScript, add CSS classes to the structural elements within the <form> tag.

HTML

Example of changing the default font color by adding a class to the page element

<li data-hf-title="Input Controls " class="custom-class-tab">
    <!-- Buttons -->
    <a href="#controls-block1"></a>
    <a href="#controls-block2" class="custom-class-block"></a>
</li>

CSS

.custom-class-tab{
    color: #257bc7;
}

.custom-class-block{
color: #c72525;
}