# HybridForms


## Category

- [Custom Code Guide](https://manuals.hybridforms.net/docs/category/custom-code-guide.md)
- [Custom Styling Guide](https://manuals.hybridforms.net/docs/category/custom-styling-guide.md)
- [Features](https://manuals.hybridforms.net/docs/category/features.md)
- [Form Controls](https://manuals.hybridforms.net/docs/category/form-controls.md)
- [Form Templates](https://manuals.hybridforms.net/docs/category/form-templates.md)
- [FormDev](https://manuals.hybridforms.net/docs/category/formdev.md)
- [HF Utilitiy Classes](https://manuals.hybridforms.net/docs/category/hf-utilitiy-classes.md)
- [HTML Template File](https://manuals.hybridforms.net/docs/category/html-template-file.md)
- [JS (deprecated)](https://manuals.hybridforms.net/docs/category/js-deprecated.md)

## Custom Code Guide

- [Controls](https://manuals.hybridforms.net/docs/custom-code-guide/controls.md): Custom Controls in HybridForms are specialized TypeScript classes designed to enhance Form Development by providing tailored functionality and visual components. Derived from HybridForms.API.UIControls.BaseControl, these controls have the capability to render HTML elements, manage events, and seamlessly integrate with the HybridForms Framework.
- [Examples](https://manuals.hybridforms.net/docs/custom-code-guide/examples.md): In HybridForms development, TypeScript functions are crucial for creating dynamic Forms.
- [Functions](https://manuals.hybridforms.net/docs/custom-code-guide/functions.md): Functions in TypeScript play a crucial role in enhancing the functionality of HybridForms by encapsulating reusable code that can be invoked as needed.
- [Integration](https://manuals.hybridforms.net/docs/custom-code-guide/integration.md): We strongly advice for TypeScript over JavaScript when implementing Custom Code.
- [Controls](https://manuals.hybridforms.net/docs/custom-code-guide/js/controls.md): Custom Controls in HybridForms are specialized WinJS classes designed to enhance Form development by providing tailored functionality and visual components. Derived from HybridForms.API.UIControls.BaseControl, these controls have the capability to render HTML elements, manage events, and seamlessly integrate with the HybridForms framework.
- [Functions](https://manuals.hybridforms.net/docs/custom-code-guide/js/functions.md): Functions in TypeScript play a crucial role in enhancing the functionality of HybridForms by encapsulating reusable code that can be invoked as needed.
- [Integration](https://manuals.hybridforms.net/docs/custom-code-guide/js/integration.md): There are two possible ways to implement JS functionality:

## Custom Styling Guide

- [Borders](https://manuals.hybridforms.net/docs/custom-styling-guide/hf-utility-classes/borders.md): Use border utilities to easily style the border and border-radius of an element. This is especially useful for images, buttons, and other elements.
- [Button](https://manuals.hybridforms.net/docs/custom-styling-guide/hf-utility-classes/button.md): Use button utilities to quickly style buttons in HybridForms Forms.
- [Color](https://manuals.hybridforms.net/docs/custom-styling-guide/hf-utility-classes/color.md): Use color utilities to quickly style the text and background color of an element. Great for container, buttons, or any other element.
- [Helpers](https://manuals.hybridforms.net/docs/custom-styling-guide/hf-utility-classes/helpers.md): There are several helper utilities for quick styling.
- [Layout](https://manuals.hybridforms.net/docs/custom-styling-guide/hf-utility-classes/layout.md): Use layout utilities to quickly add layout specific stylings.
- [Integration](https://manuals.hybridforms.net/docs/custom-styling-guide/integration.md): SCSS files cannot be directly included in the Form, they must first be compiled into standard CSS files.
- [Theming](https://manuals.hybridforms.net/docs/custom-styling-guide/theming.md): Easily customize the look and feel of HybridForms with our flexible theming system. Use intuitive themes, CSS variables for dynamic styling, and a wide range of customization options to tailor the UI to your needs.

## Form Api Typescript Definitions

- [Form-API TypeScript Definitions](https://manuals.hybridforms.net/assets/llms-txt/attachments/hybridforms.d.md): TypeScript definitions for HybridForms Form-API

## Form Controls

- [ApproveButton](https://manuals.hybridforms.net/docs/form-controls/approveButton.md): The ApproveButton is a button that triggers the approval process for a form. After the approval process is completed, the user is redirected to a predefined page.
- [BooleanControl](https://manuals.hybridforms.net/docs/form-controls/booleancontrol.md): The BooleanControl is a hidden helper control that can be used to store boolean values in the form.
- [ButtonControl](https://manuals.hybridforms.net/docs/form-controls/buttoncontrol.md): The ButtonControl invokes a predefined custom callback.
- [CheckBox](https://manuals.hybridforms.net/docs/form-controls/checkbox.md): An HTML CheckBox to be used in Forms.
- [ComboBox](https://manuals.hybridforms.net/docs/form-controls/combobox.md): The values of the control "ComboBox" can be provided as static datasource (data formatted like a Json Array inside your template) or in case of a external datasource e.g. by referencing a SharePoint list by linking to the URL or by providing a oData source.
- [Condition](https://manuals.hybridforms.net/docs/form-controls/condition.md): Conditions can be set to HTML areas using the ` tag and the control Condition` within a block.
- [DataControl](https://manuals.hybridforms.net/docs/form-controls/datacontrol.md): The DataControl is a hidden control that can be used to store data in the Form.
- [DatePicker](https://manuals.hybridforms.net/docs/form-controls/datepicker.md): A DatePicker is a control element that allows the user to select a date from a calendar.
- [DateTimePicker](https://manuals.hybridforms.net/docs/form-controls/datetimepicker.md): A DateTimePicker is a control element that allows the user to select date and time from a calendar.
- [DrawingControl](https://manuals.hybridforms.net/docs/form-controls/drawingcontrol.md): The DrawingControl is a control element that allows the user to draw on a given image.
- [DropDownList](https://manuals.hybridforms.net/docs/form-controls/dropdownlist.md): The new control is an alternative to the Control "ComboBox". The values of the control "DropDownList" can be provided as static datasource (data formatted as JSON Array inside your Template) or by an external datasource e.g. by referencing a HFSqlServer list by linking to the URL or by providing an oData source as known of the ComboBox control.
- [FileUploader](https://manuals.hybridforms.net/docs/form-controls/fileuploader.md): The FileUploader ctrl enables the user to upload files inside the Form.
- [Highlighter](https://manuals.hybridforms.net/docs/form-controls/highlighter.md): A Highlighter is used to highlight text. It is possible to place an initial value as children to the control but it is very limited which tags can be placed.
- [HtmlContainer](https://manuals.hybridforms.net/docs/form-controls/htmlcontainer.md): A HtmlContainer is used to dynamically add HTML elements to a Form. It is possible to place an initial value as children to the control but it is very limited which tags can be placed.
- [Label](https://manuals.hybridforms.net/docs/form-controls/label.md): The Label control is used to create a HybridForms label element.
- [MailButton](https://manuals.hybridforms.net/docs/form-controls/mailbutton.md): The MailButton invokes the local installed E-Mail program and passes filled in email address information and the predefined subject string.
- [MapButton](https://manuals.hybridforms.net/docs/form-controls/mapbutton.md): The MapButton invokes routing apps. It passes filled in address information and the current location information.
- [MultiSelect](https://manuals.hybridforms.net/docs/form-controls/multiselect.md): The values of the control "MultiSelect" can be provided as static datasource (data formatted like a Json Array inside your template) or in case of a external datasource e.g. by referencing a HybridForms catalog by linking to the URL or by providing an oData source.
- [NumericField](https://manuals.hybridforms.net/docs/form-controls/numericfields.md): NumericFields restrict the input value to numbers in the case of a simple input field or you refine it by further properties to offer a kind of slider.
- [OLMapControl](https://manuals.hybridforms.net/docs/form-controls/olmapcontrol.md): The OLMapControl renders an interactive OpenLayers map inside a form. It stores the current map state as JSON and can optionally generate a static image that is used in create view, PDF output and offline mode.
- [PhoneButton](https://manuals.hybridforms.net/docs/form-controls/phonebutton.md): The PhoneButton offers the possibility to dial a phone number provided by an input field inside your Form by a dial-up application i.e. "Skype" or the mobile device.
- [PicturePicker](https://manuals.hybridforms.net/docs/form-controls/picturepicker.md): The PicturePicker provides image thumbnails directly within the Form data. Insert an image, sketch or map by clicking on the plus icon.
- [RadioBox](https://manuals.hybridforms.net/docs/form-controls/radiobox.md): An HTML RadioBox to be used in Forms.
- [ReverseGeolocatorButton](https://manuals.hybridforms.net/docs/form-controls/reversegeolocatorbutton.md): This Form control is a button which request the current location of the user and fills in the Form fields defined in its options.
- [ScanButton (Barcode/NFC)](https://manuals.hybridforms.net/docs/form-controls/scanbuttonbarcode.md): This Form control (button) starts a scan of barcodes and processes the decoded information inside the Form.
- [ScanButton (IDScanner)](https://manuals.hybridforms.net/docs/form-controls/scanbuttonidscanner.md): This Form control is a button which starts an OCR scan of passports, ID cards and driving licenses and fills in the scanned information.
- [SelectBox](https://manuals.hybridforms.net/docs/form-controls/selectbox.md): This type of Form control is similar to the HTML Select Box and the ComboBox control.
- [Signature](https://manuals.hybridforms.net/docs/form-controls/signature.md): The Signature control captures signatures and stores biometric data of the signature.
- [SignatureLight](https://manuals.hybridforms.net/docs/form-controls/signaturelight.md): Like our Signature control, the SignatureLight control captures signatures. However, the SignatureLight control does not capture biometric data but only stores the user’s signature as an image.
- [Switch](https://manuals.hybridforms.net/docs/form-controls/switch.md): The Switch control is a simple control element that can be used to toggle between two states.
- [TextField / Textarea](https://manuals.hybridforms.net/docs/form-controls/textfield.md): Please ensure there is no non breaking space or line break between the 'textarea'-opening and closing tag. Otherwise the cursor will not be positioned at the correct place on focus.
- [TimePicker](https://manuals.hybridforms.net/docs/form-controls/timepicker.md): The TimePicker is a control element that allows the user to select a time.
- [TreeView](https://manuals.hybridforms.net/docs/form-controls/treeview.md): The TreeView control enables you to display complex dataSources/catalogs in a hierarchical view and offers the possibility to select and store multiple values as well as the hierarchical path of the values.
- [Webview](https://manuals.hybridforms.net/docs/form-controls/webview.md): The Webview is used to safely display a website or a video file in the Form.

## Form Templates

- [App Kiosk Mode](https://manuals.hybridforms.net/docs/form-templates/features/appkioskmode.md): The App Kiosk Mode is designed for providing the possibility to let unauthorized persons fill out Forms in a secure way. In "single"-App Kiosk Mode an authorized person has to open a new Form, switch to App Kiosk Mode and then pass along the device to another person. To unlock the kiosk mode a PIN is required. In "sequential"-App Kiosk Mode once it is activated, one Form after another is opened without leaving the App Kiosk Mode.
- [Conditions](https://manuals.hybridforms.net/docs/form-templates/features/conditions.md): Conditions enable you to offer different options of form parts based on the input, alter the visibility of form parts or create dependencies.
- [Counter](https://manuals.hybridforms.net/docs/form-templates/features/counter.md): Counter, which you can find under System Settings, offers a quite flexible opportunity to define unique reference numbers for Forms. Users with a valid user license can request a unique counter value when using the HybridForms Client App online.
- [Dynamic Repeating Units](https://manuals.hybridforms.net/docs/form-templates/features/dynamicrepeatingunits.md): Dynamic Repeating units are like standard repeating units a repeatable set of controls on the level of tabs. But in case of dynamic repeating units the single repeating units gets generated based on a provided data source. In this way you can add repeating sets of data based on the rows of a datasource. To define a dynamic repeating unit use the **dynamicRepeatingUnit** property on the **data-hf-repeating** attribute.
- [Form Field Validation](https://manuals.hybridforms.net/docs/form-templates/features/formfieldsvalidations.md): Form field validation handles the input. You can restrict the type of characters or the maximal length or match the input values to a certain pattern to ensure only valid and correct values are stored.
- [Integrate Maps](https://manuals.hybridforms.net/docs/form-templates/features/integrate-maps.md): Integrate custom maps into your Form Templates. You can use different types of libraries for creating interactive maps in your forms. Settings and properties can be set in the admin ui and in Custom Code you can further customize your maps.
- [Media Features](https://manuals.hybridforms.net/docs/form-templates/features/media.md): HybridForms provides several media features that can be integrated.
- [Repeating Units](https://manuals.hybridforms.net/docs/form-templates/features/repeatingunits.md): Repeating units are a repeatable set of controls on the level of tabs. If you define a tab as repeatable the content defined in this tab can be repeated (progammatically or by the user) depending on the repeating options you set.
- [Stages and Workflows](https://manuals.hybridforms.net/docs/form-templates/features/stages.md): Stages enable you to control the editable parts and the form processing within the scope of predefined workflows.
- [Language / Translations](https://manuals.hybridforms.net/docs/form-templates/features/translation.md): In the HybridForms App, there are 3 areas for language control:
- [Workflow Examples](https://manuals.hybridforms.net/docs/form-templates/features/workflow-examples.md):  
- [Folder Structure](https://manuals.hybridforms.net/docs/form-templates/folder-structure.md): Form Templates and Areas
- [Basics](https://manuals.hybridforms.net/docs/form-templates/html-template-file/basics.md): The General Structure
- [Form Blocks](https://manuals.hybridforms.net/docs/form-templates/html-template-file/formblocks.md): Form Blocks are the actual containers for the Form Controls and other HTML contents.
- [Referencing CSS and JS Files](https://manuals.hybridforms.net/docs/form-templates/html-template-file/referencing-css-js-files.md): In HybridForms, you can enhance the customization and styling of your Form by using custom CSS, and you can add additional functionality using custom JavaScript code.
- [Referencing Files](https://manuals.hybridforms.net/docs/form-templates/html-template-file/referencing-files.md): Referencing Form Template Files
- [Structure, Layout and Navigation](https://manuals.hybridforms.net/docs/form-templates/html-template-file/structure.md): The structure and general layout of your form are determined by three key structural elements:
- [Title Templates](https://manuals.hybridforms.net/docs/form-templates/html-template-file/titletemplates.md): Title templates are implemented as `` elements and defined by the IDs: headerTitleTemplate, titleTemplate and listTemplate.
- [Template Variables](https://manuals.hybridforms.net/docs/form-templates/html-template-file/variables.md): Template variables are used to define the Form Template settings and configurations. They are declared inside the ``-tag of the Form Template file.
- [Includes](https://manuals.hybridforms.net/docs/form-templates/includes.md): HF-Includes are blocks defined in a template HTML file referenced by the HTML Form Definition file.
- [PDF](https://manuals.hybridforms.net/docs/form-templates/pdf.md): The PDF export of a Form is created automatically by the HybridForms service and stored as attachment file of a Form data list item.
- [Template Settings](https://manuals.hybridforms.net/docs/form-templates/template-settings.md): Every FormDefinition folder can have an index.json file. It is used to mimic server settings during development.

## Formdev

- [Local Backend](https://manuals.hybridforms.net/docs/formdev/backend.md): Mimic a HybridForms server locally. An Express NodeJS server is used to enable the web client of HybridForms to work properly.
- [Dev Tools](https://manuals.hybridforms.net/docs/formdev/devtools.md): These CLI tools can or have to be used to make form development faster and easier.
- [FormDev Quickstart](https://manuals.hybridforms.net/docs/formdev/quickstart.md): Form development environment for developing Form Templates locally

## Optional
- [Server API Documentation](https://documenter.getpostman.com/view/6898557/S1EMUzAD?version=latest): Comprehensive documentation for the HybridForms Server API