Skip to main content
Version: 10.

Folder Structure

Form Templates and Areas​

All Form Templates are usually located in a parent folder, which is conventionally named "form-templates" (of course, other folder names are also an option). For better organization, Form Templates can also be distributed across different "areas". In our formDev environment this is achieved by creating subfolders within the Form Templates directory labeled with the prefix area.[folder-name]. In production (when the App connects to a HybridForms server) the areas are defined and configured in the HF Admin UI.

Example folder structure in formDev:

Example folder structure formDev
In the example above there are two areas defined: a "Department Finance" area and a "Department Sales" area. Both of them have defined two Form Templates. And there is a another Form Template (Field Service) that does not belong to any area.

In our formDev on the settings page you´ll find the available Form Templates you can subscribe to. The structure looks like this: Example forms structure formDevDark Example forms structure formDev

Template Structure and Files​

Example folder structure of a Form Templatep

The HTML Template File (1)​

The core element of every Form Template is the HTML Form Template file, elaborately explained in the following chapter. This HTML file configures and structures your Form and is outlining its contents. Each template folder should contain only one HTML file (the first one found is utilized as the Form Template HTML file).

JS/TS and CSS/SCSS Files (2 and 3)​

The template folder typically contains JavaScript/TypeScript and CSS/SCSS files as well. Not obligatory, but they are frequently used to customize the appearance and structure of forms via styling (CSS) and to augment functionality with Custom Code (JS).

Code composed in TypeScript is automatically transpiled into JavaScript when the formDev is running. Similarly, Sass files are transpiled into native CSS code. Only JS and CSS files can be referenced in the Form Template.

Emulate Server Settings - index.json (4)​

The index.json file emulates server settings during development. Discover more about it in the index.json documentation.

Utilizing the pdf.header and pdf.footer files, you can create personalized header and/or footer layouts for the Form's PDF output. Find detailed instructions here.

Stages and Workflows - stages.json (6)​

In the stages.json file, you define your stages and server-side workflows. While workflows are exclusively processed on the server side and not within our formDev environment, stage settings are simulated in formDev (see here). For comprehensive instructions on stages and workflows, refer to the dedicated section here.

All Other Files​

The majority of additional files found in a template folder are asset files, meaning they are referenced within the Form Template. These typically include images or PDF files.