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.
Changes to the file are only applied after restart of the formDev.
{
"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. |
| 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.
{
"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.
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.
Server workflows are partially supported! condition, setstatus, setcurrentstatus, setfield and stagechange are processed on Form approve.