sdi_appstate-ui

This bundle contains the components for the user interface of map.apps SDI app state management.

Usage

App states are saved in the map.apps SDI database on the server, so it is required to install and configure the map.apps SDI savestate backend web application on the application server. You can find detailed installation instructions in the map.apps SDI product documentation.

Configuration Reference

The following sections describe the configurable components and properties.

Tools

FilteredAppStateStore

If the listOwnSharedAppStates property is true, only the app states for the currently logged-in user are shown in the list.

{
    "sdi_appstate-ui": {
        "FilteredAppStateStore": {
            "listOwnSharedAppStates": false
        }
    }
}

StateController

Property askBeforeLoading

The askBeforeLoading property can be used to control whether a confirmation dialog should be shown before an app state is loaded.

The default value is true.

NOTE: When loading an app state from the list in map.apps Manager, a confirmation dialog is never displayed. The app will always open in a new browser tab.

Example

{
    "sdi_appstate-ui": {
        "StateController": {
            "askBeforeLoading": true
        }
    }
}

Configure the width of the app state details dialog window

The detailWindowWidth property can be used to control the width of the state details dialog window. If not specified, a default value is used.

Example:

{
    "sdi_appstate-ui": {
        "StateController": {
            "detailWindowWidth": 800
        }
    }
}

Configure the height of the app state details dialog window

The detailWindowHeights property can be used to control the height of the state details dialog window. The value is an array with five entries. Each entry describes the height of the dialog under a certain condition. The exact conditions when a certain height value is used and the default values can be inferred from the following code:

if (!showPermissionsMatrix && createNewState) {
    return detailWindowHeights[0] || 265;
} else if (!showPermissionsMatrix && !createNewState) {
    return detailWindowHeights[1] || 335;
} else if (showPermissionsMatrix && !showRolePermissions && !createNewState) {
    return detailWindowHeights[2] || 500;
} else if (showPermissionsMatrix && showRolePermissions && createNewState) {
    return detailWindowHeights[3] || 620;
} else {
    return detailWindowHeights[4] || 685;
}

Example:

{
    "sdi_appstate-ui": {
        "StateController": {
            "detailWindowHeights": [265, 335, 600, 720, 785]
        }
    }
}

Configure role-alias and aria-labels for StateDetail Widget

The StateDetails widget for editing an app state includes a matrix for setting the user permissions on that app state. You can configure the labels of the user roles in that permission matrix, that means how the roles "public", "private", and all other roles that the current user possesses, are denoted.

You can change the labels by overriding the corresponding properties in the internationalization (i18n) files of the sdi_appstate-ui bundle.

For that add i18n to your app.json at first:

{
    "properties": {
      ...
    },
    "load": {
        "i18n": [
        " bundle"
        ],
        "allowedBundles":
          [...]
    }
}

After that create or change bundle.js files to override the labels and and take a look at the example below.

Hint: You can create/edit new files like /nls/bundle.js also in the map.apps manager.

The following example from a custom /nls/bundle.js file demonstrates the configuration of new labels for the special roles _public_ and _private_, as well as for the roleXY.

define([], function () {
    return {
        "sdi_appstate-ui": {
            "stateDetails": {
                "permissions": {
                    "roleAlias": {
                        "_public_": "Owner",
                        "_private_": "Everyone",
                        "roleXY": "Role YZ"
                    },
                    "ariaLabels": {
                        "viewCheckbox": "${role} may view",
                        "editCheckbox": "${role} may edit"
                    }
                }
            }
        },de: true
    };
});

The following example from a custom /nls/de/bundle.js file demonstrates the configuration of new labels for the special roles _public_ and _private_, as well as for the roleXY for German language.

define([], function () {
    return {
        "sdi_appstate-ui": {
            "stateDetails": {
                "permissions": {
                    "roleAlias": {
                        "_public_": "Besitzer",
                        "_private_": "Alle",
                        "roleXY": "Rolle YZ"
                    },
                    "ariaLabels": {
                        "viewCheckbox": "${role} darf lesen",
                        "editCheckbox": "${role} darf editieren"
                    }
                }
            }
        }
    };
});

As you can see in the example, you can also modify 'aria-labels'. These define what a screen reader will read when the user tabs over the view and edit checkboxes.

Follow the documention in map.apps to learn more about i18n.

StateDetailsModelFactory

The visibilityOptions property controls the options that will be displayed in the permission matrix.

• Options must be defined as an array
• Supported array entries are PUBLIC, PRIVATE, ROLES, VIEW, EDIT, and *
• Default value is [*] to show all available options

The allowedRoles property controls the user roles that a state can be shared with.

• The property value must be an array
• The array entries are the roles that should be visible in the permission matrix, or the wildcard * to show all available roles.
• Default value is [*], to show all available roles.

The enableUpdateMapChanges property controls whether users could update the app state data when edit an app state.

• The property must be a boolean
• Default value is true, so users can edit the data of an app state.

{
    "sdi_appstate-ui": {
        "StateDetailsModelFactory": {
            "visibilityOptions": [
                "PUBLIC",
                "PRIVATE",
                "ROLES",
                "VIEW",
                "EDIT"
            ],
            "allowedRoles": [
                "role1",
                "role2"
            ],
            "enableUpdateMapChanges": true
        }
    }
}