Version: Upcoming 🦄

Local Backend

Mimic a HybridForms server locally. An Express NodeJS server is used to enable the web client of HybridForms to work properly.
It is running on localhost:8182, be aware not to block this port with another service.

The service is automatically started together with the web client by running npm start in the root folder. This process looks for Form Template folders in the form-templates subfolder. This path can be configured by applying additional flags.

--path [path to Form Templates]
--include [Form Template to be included in the service]

npm start -- --path ../../change-default-folder/form-templates/ --include TestForm

Mimic Form Template Server Configurations - index.json

Every Form Template folder can have an index.json file. It is used to mimic Form Template server settings during development.

Note

Changes to the file are only applied after restart of the formDev.

example index.json
{
    "title": "Example",
    "culture": "en-US",
    "attachments": [],
    "flags": {
        "FormDev.PDFDebug": false,
        "Form.New": true,
        "Form.Delete": true,
        "Form.Copy": true,
        "Form.ReturnToGroup": true,
        "Form.CopySubmitted": false,
        "Form.View": true,
        "Feature.Picture": true,
        "Feature.Sketch": true,
        "Feature.CustomSketchTemplate": true,
        "Feature.Audio": true,
        "Feature.Map": true,
        "Feature.Document": true,
        "Form.LazyLoading": false,
        "Feature.showDetail": true,
        "PDF": true,
        "PDF.Picture": true,
        "PDF.Sketch": true,
        "PDF.Audio": true,
        "PDF.Map": true,
        "PDF.Document": true,
        "PDF.PageCounter": true,
        "Picture.ReadOnly": false,
        "Sketch.ReadOnly": false,
        "Audio.ReadOnly": false,
        "Map.ReadOnly": false,
        "Document.ReadOnly": false,
        "Listpage.SortGroupFilter": false,
        "Form.ListPageFavorites": true,
        "Form.ScanSearch": false
    },
    "catalogs": {
        "useProxy": true,
        "useOdataProxy": true,
        "host": "example.hybridforms.net"
    }
}

Property	How to use	Description
title	`"title": "Example"`	The displayed Form title in the App.
culture	`"culture": "en-US"`	Set the Form culture.
attachments	`"attachments": ['testfile.html']`	Specify all used files for the Form Template. If property is not set or the array is empty, all files are used.
flags	`"flags": { "FormDev.PDFDebug": true }`	Set Form flags for PDF debugging. Read more
catalogs	`"catalogs": { "host": "example.hybridforms.net" }`	Configure catalogs proxy. Read more

Flags

Property	Description
FormDev.PDFDebug	Start a headful chromium instance after Form PDF is rendered to debug CSS stylings.
Form.New	Allow users to create new Forms in the HybridForms App.
Form.Delete	Allow users to delete Forms in the HybridForms App.
Form.Copy	Allow Form copying in the HybridForms App. A new Form is created and populated with the data. If several stages are defined, the new Form is created in Stage 1.
Form.ReturnToGroup	Enable "Back to group" function for Forms in the HybridForms App.
Form.CopySubmitted	Allow copies of approved Forms in the HybridForms App. A new Form is created and populated with the data. If several stages are defined, the new Form is created in Stage 1.
Form.View	Enabling Form preview in the HybridForms App. The preview shows how the Form will look like in the PDF version. Note: This is a developer feature and should be disabled in the production environment.
Feature.Picture	Enable the Picture feature in the HybridForms App.
Feature.Sketch	Enable the Sketch feature in the HybridForms App.
Feature.CustomSketchTemplate	Enable the option to use images from the Picture and Maps feature as sketch templates.
Feature.Audio	Enable the Audio feature in the HybridForms App.
Feature.Map	Enable the Maps feature in the HybridForms App.
Feature.Document	Enable the Document feature in the HybridForms App.
Feature.showDetail	After creating or uploading an image/sketch/audio/map/file element in the HybridForms App, the detail page opens. If not active, e.g. several photos can be taken one after another without a detail dialog.
PDF	Enable PDF creation.
PDF.Picture	Images with the detailed information are attached to the Form pages in the PDF by default.
PDF.Sketch	Sketches with the detailed information are attached to the Form pages in the PDF by default.
PDF.Audio	Audio detail information is appended to the Form pages in the PDF by default.
PDF.Map	Maps with the detailed information are attached to the Form pages in the PDF by default.
PDF.Document	Document detail information is appended to the Form pages in the PDF by default.
PDF.PageCounter	Activate page numbering in the PDF file.
Picture.ReadOnly	Disable the camera/upload and editing features in the Picture feature.
Sketch.ReadOnly	Disabling the ability to draw and edit in the Sketch feature.
Audio.ReadOnly	Disabling the recording and uploading option in the Audio Feature.
Map.ReadOnly	Disabling the ability to create and edit in the Maps feature.
Document.ReadOnly	Disabling the upload option in the Document feature.
Listpage.SortGroupFilter	Enabling Form sorting feature, grouping feature, filtering feature and action submenu on Form listing page in HybridForms App.
Form.LazyLoading	Show Form as soon as first page is available.
Form.ListPageFavorites	Creation of favorites for the presentation of the objects on the Form listing page of the HybridForms App.
Form.ScanSearch	Enable use of barcode scans for search function on Form listing page.

Mimic APP Settings Server Configurations - appSettings.json

The appSettings.json file is located in the root folder of the formDev environment. This file allows you to configure App settings which are typically provided by the server and managed by the Admin UI in Core Server > App Settings. We include a default appSettings.json file within the formDev build. You can modify or add additional settings as needed. After changing the appSettings.json file, make sure to terminate the current formDev session and restart it to apply the updates.

Default APP Settings in formDev
{
    "googleMapsApiKey": {
        "label": "Google Maps Key",
        "placeholder": null,
        "value": "[GOOGLE_MAPS_API_KEY]",
        "visibility": "ok"
    },
    "hfMap-MapLibreBaseMap": {
        "label": "MapLibre BaseMap",
        "placeholder": null,
        "value": {
            "provider": "MapLibreGL",
            "mapConfig": {
                "center": [15.439504, 47.070713],
                "zoom": 14
            },
            "features": {
                "setMarkers": true,
                "toggleLayerVisibility": true,
                "directions": true,
                "drawing": true
            },
            "controls": {
                "geolocation": true,
                "mapNavigation": true
            }
        },
        "visibility": "ok"
    }
}

Catalogs

Property	How to use	Description
host	`"host": "example.hybridforms.net"`	Set the host server for the reverse proxy server from which to retrieve the catalogs. More details
useProxy	`"useProxy": true`	Enable/disable catalogs from proxy for ComboBox and DropDownList with `url` property set. Default value is `false`
useOdataProxy	`"useOdataProxy": false`	Enable/disable catalogs from proxy for ComboBox and DropDownList with OData source. Default value is `true`

Proxy

The formDev service allows the use of a reverse proxy to make requests against a real HybridForms Backend. It can be helpful to retrieve online catalogs.

Usage

To use the reverse proxy, the request URL must look like this:
http://localhost:8182/proxy/<HybridForms host>/<request url>

Most of the time an authentication is required. The credentials to achieve this must be placed in a credentials.json in the root of the project. It must contain an accountName and password field with a base64 encoded password.

Very Important

The file is ignored by Git by default.
Never check in credentials and login information to a repository.

Stages

All stages specified in a stages.json are processed. This means all conditions are working correctly and the currently active stage is set in the Form object.

Note

Server workflows are partially supported! condition, setstatus, setcurrentstatus, setfield and stagechange are processed on Form approve.

Mimic Form Template Server Configurations - index.json​

Flags​

Mimic APP Settings Server Configurations - appSettings.json​

Catalogs​

Proxy​

Usage​

Stages​