Skip to main content

Toolbars

Configuration for toolbars is located in separate json files under the following folder structure:

dynamic-app
β”‚
└───samo-demo\configuration
β”‚
└───map
β”‚
└───toolbars
| └───search-forms
β”‚ | └───mainPipelineAddress.json
| | └───note.json
| └───default-toolbar.json
└───samo-lids-browser.json

The default tools are defined in default-toolbar.json, which also reads configuration of search-forms, if they are defined in separate files. In specific browser contexts (or in the default context - samo-lids-browser.json), definition of toolbars can be further extended. This is usually the case, if we are using specific tools only in selected browser contexts (Agendas' Map Viewers).

Available tools​

List of available tools
// default tools
{​​​​
"layersControl":{​​​​​​​​​​​
"type": "sm-layers-control",
"externalContainer": true, // content will be displayed in right drawer
"hideAddLayers" : true,
"addLayersConfiguration": {​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"tabs": [
{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​"type": "sm-set-definition-tree"},
{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​"type": "sm-layers-from-filter", "entitiesGroup": "_all"}, //configure entities group for selecting featuretypes
{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​"type": "sm-layers-from-file"}
]
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​,
"backdropsControl":{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"type": "sm-backdrops-control",
"externalContainer": true // content will be displayed in right drawer
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​,
"geolocation":{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"type": "sm-geolocation"
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​,
"zoomControl":{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"type": "sm-zoom-control"
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​,
"navigationHistory":{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"type": "sm-navigation-history",
"hideBackButton" : true,
"hideForwardButton" : true,
"hideHomeButton" : true
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​,
"select":{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"type": "sm-select"
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​,
"measurement":{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"type": "sm-measurement"
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​,
// custom tools
"print":{​​​​​​​​​​​​​​​​​​​​
"type": "sm-print"
},
"printLPS": {
"type": "sm-lps-print"
}​​​​​​​​​​​​​​​​​​​​,
"sketching": {
"type": "sm-sketching"
},
"search": {
"type": "sm-search"
},
"newFeature": {
"type": "sm-new-feature"
},
"crossSection": {
"type": "sm-cross-section"
},
//for error reporting functionality incl. sending e-mail. Needs configuration in Business Metadata and individual form definition for the functionality. Documentation will follow later
"errorReporting": {
"type": "sm-error-reporting",
"formSections": [ ... ],
"action": { ... },
"urlAttribute": "at_errorReport_url"
}​​​​​​​​​​​​​​​​​​​​

Default toolbar​

By default, each browser has the following tools: layers control, backdrops control, geolocation, zoom control, measurement, select and navigation history. Other tools, that are common for all browser contexts should be defined in default-toolbars.json.

Default tools - configuration example
{
"layout": { //there are four different tool placements: rightHorizontal, leftHorizontal, rightVertical, leftVertical
"rightHorizontal": {
"extendItems": [ //configuration of tools, that should be appended to the toolbar after the default ones
"search", //this tools' configuration is specific for each browser context and is defined there
"searchForm"
]
}
},
"configuration": {
"searchForm": {
"type": "sm-search-form",
"icon": "spu-icons:cadastre-search",
"searchForms": [ //see chapter Search Forms
"knOnlineParcela"
]
},
"sketching": {
"type": "sm-sketching" //this tool is used only in specific browser contexts, but has same configuration, which can be therefore defined here
},
"print": {
"type": "sm-print"
}
}
}

Custom toolbar​

Custom toolbars can be different for each browser contexts.

Custom tools in Water Browser context
{
"toolbarsConfiguration": {
"extends": "default-toolbar",
"layout": {
"leftHorizontal": {
"extendItems": [
"sketching",
"newFeature"
]
}
},
"configuration": {
"newFeature": {
"type": "sm-new-feature",
"featureTypes": [ //reference to the featureTypes of objects that can be created by user
"ft_waterObjectsPoint",
"ft_waterObjectsLine",
"ft_waterObjectsPolygon"
],
"layers": [
"water"
]
}
}
}
}

Custom tools​

Search Forms​

Search forms can be defined in separate files and referenced afterwards in different browser contexts using the file name.

Referencing search-forms tools - configuration example
"toolbarsConfiguration": {
"configuration": {
"searchForm":{​​
"type": "sm-search-form",
"icon": "samo-icons:list",
"searchForms":["note", "mainPipelineAddress"]
}​​​​​​​​​
}
}

The definition of form which is used for search input is following. The most important properties are "submit" and "form".

Search Form definition note.js - configuration example
{​​
"title": "Notes",
"responseTitle": "Notes",
"icon": "samo-demo-icons-eam:catalogue",
"description": "notes inside water objects",
"submit": {​​​​​​​​​
"action": {​​​​​​​​​
"type": "feature-api",
"request": {​​​​​​​​​ //Feature api request is defined as feature query request from new api with combination of template strings with form datacontext.
"types": {​​​​​​​​​
"ft_5012100": {​​​​​​​​​
"filter": {​​​​​​​​​
"type": "wildcard",
"operator": "equal",
"query": "*{​​​​​​​​​get:#note}​​​​​​​​​*",
"operand": {​​​​​​​​​
"type": "property",
"property": "at_5010006"
}​​​​​​​​​
}​​​​​​​​​
}​​​​​​​​​
}​​​​​​​​​
}​​​​​​​​​
}​​​​​​​​​,
"showLayers": [
"cat_5010000"
],
"form": {​​​​​​​​​
"module": {​​​​​​​​​
"type": "component:dynamic-app/modules/forms/key-value-form",
"elements": [
{​​​​​​​​​
"label": "Note",
"placeHolder": "text inside note",
"property": "note"
}​​​​​​​​​
]
}​​​​​​​​​
}​​​​​​​​​
}​​​​​​​​​
}​​​​​​​​​

Form can be defined as standard Dynamic App forms with all posibilities. But this requires the Entity metadata.

Search Form defined as LIDS Form - configuration example
"form": {​​
"module": {​​​​​​​​​
"type": "component:entity-modules/form/samo-entity-properties-form",
"entityType": "ft_5012100",
"propertyGroupId": "fmx_50121"
}​​​​​​​​​
}​​​​​​​​​

Submit action can be also defined as BS action.

Submit action as BS action - configuration example
"submit": {
"action": {
"type": "serviceAction",
"serviceGroup": "ap_cadastre",
"service": "cadasrte",
"actionId": "generateCadastreReport",
"responseProperty": "entities", //response is returned and application navigates to newly created feature
"openFilesProperty": "files" //response is returned and application downloads generated (pdf) file
}
}

Google Like Search refers to the possibility to define fulltext search, which returns best matched search results in the dropdown. The style of returned results can be defined as well as the number of results and their priority (order).

Google Like Search - configuration example
"configuration":{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"search":{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"type": "sm-search",
"searchEntities": [
{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"featureType": "ft_taiAddrPoint",
"titleString": "{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​get:#at_taiBase_description}​",
"subtitleString": "{​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​get:#at_taiAddrPoint_strassenname}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​",
"searchProperty": "at_taiAddrPoint_strassenname",
"priority": {​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"1": "^([^0-9]*)$",
"0": "\\d"
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​,
"resultsCount": {​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"2": "\\d",
"4": "^([^0-9]*)$",
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​,
"aggregations": {​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
"field": "at_taiBase_description"
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
],
"highlighResult": true,
"minResolution": 0.1400000756
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
}

New Features tool​

New Features tool enables user creating new isntances of given featureTypes.

New Features tool - configuration example
"newFeatures":{​​​​​​​​
"type": "sm-new-feature",
"featureTypes": [
"ft_5081000",
"ft_5082000",
"ft_5083000"
],
"layers": [
"my-sketchings" //layers to turn on for sketching
]
}​​​​​​​​

Print​

Currently there are two printing options, that can be defined for new samo-lids-browser. The simple one, which uses only the browser engine, and more sophisticated one, that requires LIDS Publication Server (LPS).

Simple print control - configuration example
"print":{​​​​​​​​ ​​
"layouts": {​​​​​​
"type": "manual",
"values": [
{​​​​​​
"width": 277,
"height": 170,
"format": "a4",
"label": "A4 - Landscape",
"orientation": "l"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"width": 190,
"height": 257,
"format": "a4",
"label": "A4 - Portrait",
"orientation": "p"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"width": 400,
"height": 257,
"format": "a3",
"label": "A3 - Landscape",
"orientation": "l"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"width": 277,
"height": 380,
"format": "a3",
"label": "A3 -Portrait",
"orientation": "p"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"width": 574,
"height": 380,
"format": "a2",
"label": "A2 - Landscape",
"orientation": "l"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"width": 400,
"height": 554,
"format": "a2",
"label": "A2 - Portrait",
"orientation": "p"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"width": 821,
"height": 554,
"format": "a1",
"label": "A1 - Landscape",
"orientation": "l"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"width": 574,
"height": 801,
"format": "a1",
"label": "A1 - Portrait",
"orientation": "p"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"width": 1169,
"height": 801,
"format": "a0",
"label": "A0 - Landscape",
"orientation": "l"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"width": 821,
"height": 1149,
"format": "a0",
"label": "A0 - Portrait",
"orientation": "p"
}​​​​​​​​​​​​​
]
}​​​​​​​​​​​​​,
"scales": {​​​​​​​​​​​​​
"type": "manual",
"values": [
250,
500,
1000,
2500,
5000,
10000,
25000,
50000,
100000,
250000,
500000,
1000000,
2500000
]
}​​​​​​​​​​​​​,
"rotations": {​​​​​​​​​​​​​
"type": "manual",
"values": [
0,
45,
90,
135,
180
]
}​​​​​​​​​​​​​,
"format": [
{​​​​​​​​​​​​​
"id": "PDF",
"label": "PDF",
"value": "PDF"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"id": "JPG",
"label": "JPG",
"value": "JPG"
}​​​​​​​​​​​​​,
{​​​​​​​​​​​​​
"id": "PNG",
"label": "PNG",
"value": "PNG"
}​​​​​​​​​​​​​
]
}​​​​​​​​​​​​​

For LPS printing, also some configuration of Business Server is needed. Following just the configuration part of samo-lids-browser module with the assumption, all names/id's are the same as in the business server metadata example.

The plotlayouts must be predefinedPlotLayout (plotLayout, displayModel, position), not only plotLayout. Basically with some extension it's possible to plot a predefinedPlot with its saved coordinates and displayModel or just with its displayModel (as it is defined below) or with some on the fly defined displayModel.

LPS print control - configuration example
{
"printLPS": {
"type": "sm-lps-print",
"serviceGroup": "lps",
//includ just the format you want to provide. For DWG, DXF, DGN, SHP, the value must be <format>.zip
"format": [
{
"id": "PDF",
"label": "PDF",
"value": "PDF"
},
{
"id": "JPG",
"label": "JPG",
"value": "JPG"
},
{
"id": "PNG",
"label": "PNG",
"value": "PNG"
},
{
"id": "DXF",
"label": "DXF",
"value": "DXF.ZIP"
},
{
"id": "DWG",
"label": "DWG",
"value": "DWG.ZIP"
},
{
"id": "DGN",
"label": "DGN",
"value": "DGN.ZIP"
},
{
"id": "SHP",
"label": "SHP",
"value": "SHP.ZIP"
},
{
"id": "PDF",
"label": "PDF",
"value": "RASTER-PDF"
}
],
"service": "lps-service",
"disableExcludedSets": true,
"actions": {
"createPlotTask": "createPlotTask",
"getPlotTaskState": "getPlotTaskState",
"getPlotFiles": "getPlotFiles"
},
"layouts": {
"values": [
{
"id": "id_8445349217983132"
},
{
"id": "id_8444249706355356", //A3 landscape with legend
"variables": { //variables property is object -> for each key will be generated input with special templating of the value
"Text2": "Hallo Welt: {get:#Text2}",
{
"AutorField": "{user:#firstName} {user:#lastName}"
}
},
"additionalInfoModule": { //if additionInfoModule is defined, inputs will not be generated automatically, but dedined module will be used
"type": "component:dynamic-app/modules/forms/key-value-form",
"scope": "requestBody",
"elements": [
{
"label": "{tr:title}",
"property": "text2"
}
]
}
}
]
}
}
}

Customization of default tools​

Layers control​

Layers control is the action dialog, which is used for adding custom layers. By default it consists of three tabs, but this can be overriden by following configuration (if you remove undesired tab):

Overriding Layers control configuration
{
"layersControl": {
"type": "sm-layers-control",
"externalContainer": true, // content will be displayed in right drawer
"addLayersConfiguration": {
"tabs": [
{
"type": "sm-set-definition-tree" //for adding setdefinition layers from store
},
{
"type": "sm-layers-from-filter", //for adding features defined in metadata, possibility to define filters
"entitiesGroup": "_all"​​​​​​​​​​​​​​​​​​​​, //configure entities group for selecting featuretypes
},
{
"type": "sm-layers-from-file" //for adding layers from external files (.shp, .csv, .gpx)
}
]
}
}
}

The possibility to add custom layers can be completely disabled by:

Disable adding custom layers
"layersControl": {
Β  Β  Β  "type": "sm-layers-control",
"hideAddLayers": true
}