The Footer module implements the footer in HTML5 viewers. The footer can appear in the Desktop and Tablet interfaces only—the Handheld interface cannot have a footer. By default, the Footer module's height
property is set to 0 (zero pixels), which hides the footer. To show the footer, set the height
to a positive value.
A viewer's footer can contain different types of content:
Menus: A footer menu is an array of items, each of which can optionally run a command. An item can be:
Simple Text: For example, a copyright statement that is not clickable.
Text Hyperlink: For example, a link to a help system or website.
Simple Image: For example, a logo that is not clickable.
Hyperlinked Image: For example, an email hyperlink or social media hyperlink.
Example of an HTML5 viewer's footer with a variety of items
To configure text items in a footer menu, configure the item's text
property, but not its iconUri
property. To configure image items, configure the item's iconUri
property, but not its text
property. You may also want to use different markup—views in the Footer module have two options for the markup that they apply to menu items:
MenuView.html
: Provides formatting for simple images, hyperlinked images, and simple text.
MenuHyperlinkView.html
: Provides formatting for text hyperlinks. If you use MenuView.html
instead of MenuHyperlinkView.html
for text hyperlinks, the hyperlinks will work, but they will not look like hyperlinks.
The footer has its own regions—FooterRegion
, LeftFooterRegion
, and RightFooterRegion
. FooterRegion
is the entire footer. LeftFooterRegion
and RightFooterRegion
lie on top of FooterRegion
. The contents of the LeftFooterRegion
are left justified. The contents of the RightFooterRegion
are right justified. See Regions for a diagram of the HTML5 Viewer's regions.
By default, the Footer module has two views—FooterView
and FooterMenuView
. FooterMenuView
contains a menu of hyperlinks in the RightFooterRegion
by default.
Module
menus
: An array of menus to display in the footer.
id
: The menu's ID.
description
: A short description of the menu.
If your viewer is going to be available in more than one language, enter the text key that the description is assigned to. See Configure User Interface Text for more information on using text keys.
moduleId
: The ID of the module that the menu belongs to. The moduleId
is Footer
.
items
: An array of menu items. Menu items have the following properties:
iconUri
: The image to display for the menu item. In order for the icon to show, the view's markup
property must be set to Mapping/infrastructure/menus/MenuView.html
.
text
: The text to appear for the menu item. You can use a text key or the literal text. In order for the text to show, the view's markup
property must be set to Mapping/infrastructure/menus/MenuHyperlinkView.html
.
description
: A brief description of the menu item to appear below the text
. You can use a text key or the literal text.
command
: The command to execute when the menu item is selected. A footer menu can run any HTML5 Viewer command. For a list of commands, refer to Viewer Commands and Events.
If you set the command
property, do not set the batch
property.
commandParameter
: The parameter value to pass to the command when it runs, if it has a parameter. Parameters may either be simple strings or complex objects containing any number of parameters. For information on the parameters for a particular command, refer to the Viewer Commands and Events.
If you set the commandParameter
property, do not set the batch
property.
hideOnDisable
: If this property is set to true
and the menu item's command cannot run, the menu item does not show in the menu.
If hideOnDisable
is false
and the menu item's command cannot run, the menu item shows in the menu, but it is grayed out.
batch
: An array of objects, each with three properties: an executable command, an optional command parameter, and an optional Boolean to abort the execution of further commands if a command fails to execute. This allows multiple commands to be executed in a specified order, although some commands may trigger asynchronous actions.
The following example attempts to activate the tabbed toolbar and, if successful, proceeds to greet the user with an alert:
"batch": [ { "command": "ActivateView", "commandParameter": "TabbedToolbarView", "abortBatchOnFailure": true }, { "command": "Alert", "commandParameter": "Hello!" } ]
If omitted, abortBatchOnFailure
is false
by default.
If you set the batch
property, do not set the command
or commandParameter
properties.
Views
FooterView
: No configuration
properties
FooterMenuView
:
menuId
: The ID of the menu to display in FooterMenuView
. The menu is configured in the Footer module's menus
property.
View Models
FooterViewModel
:
backgroundColor
: A valid HTML color to use for the footer's background. For example, white or #FFFFFF.
Footer text is black and hyperlinks are dark blue, so use a light color for the background.
height
: The footer's height, in pixels. When the height is 0 (zero), the viewer does not have a footer. By default, the height is 0.
FooterMenuViewModel
: No configuration
properties
This example shows how to configure a menu of text hyperlinks.
First, define the menu. The following snippet shows the configuration for a footer menu that contains two text items.
...
{
"id": "FooterMenu",
"description": "@language-menu-footer-menu-desc",
"moduleId": "Footer",
"items": [
{
"text": "@language-menu-powered-by-geocortex",
"description": "@language-menu-powered-by-geocortex-desc",
"command": "OpenWebPage",
"commandParameter": "http://www.geocortex.com//"
},
{
"text": "Report a Problem",
"command": "RunWorkflowById",
"commandParameter": "ShowProblemReportForm"
}
]
},
...
Next, define the view. To ensure that the items appear as hyperlinks rather than simple text, set the view's markup
property to Mapping/infrastructure/menus/MenuHyperlinkView.html
. Set the region property to the region where you want the menu to appear, in this case, RightFooterRegion
. Set the menuId
property to the menu's ID, FooterMenu
.
... { "id": "FooterMenuView", "viewModelId": "FooterMenuViewModel", "libraryId": "Mapping.Infrastructure", "type": "geocortex.essentialsHtmlViewer.mapping.infrastructure.menus.MenuView", "markup": "Mapping/infrastructure/menus/MenuHyperlinkView.html
", "region": "RightFooterRegion
", "visible": true, "configuration": { "menuId": "FooterMenu
" } } ...
Finally, set the FooterViewModel
's height
property and, optionally, the backgroundColor
property.
... { "id": "FooterViewModel", "type": "geocortex.essentialsHtmlViewer.mapping.modules.footer.FooterViewModel", "configuration": { "backgroundColor": "white
", "height":40
} } ...
This example shows how to configure a menu of image items.
First, define the menu. The following snippet shows the configuration for a footer menu with three items. The first item does not run a command, so it appears as a simple (unclickable) image in the footer. The other two items run commands, so they are hyperlinks.
...
{
"id": "SocialFooterMenu",
"description": "@language-menu-social-links-menu-desc",
"moduleId": "Footer",
"items": [
{
"iconUri": "Resources/Images/Icons/logo-24.png",
},
{
"iconUri": "Resources/Images/Icons/twitter-24.png",
"command": "ShareOn",
"commandParameter": "twitter"
},
{
"iconUri": "Resources/Images/Icons/Toolbar/contact-24.png",
"command": "ShareOn",
"commandParameter": "email"
}
]
}
...
Next, define the view. Set the view's markup
property to Mapping/infrastructure/menus/MenuView.html
. Set the region property to the region where you want the menu to appear, in this case, LeftFooterRegion
. Set the menuId
property to the menu's ID, SocialFooterMenu
.
... { "id": "SocialFooterMenuView", "viewModelId": "SocialFooterMenuViewModel
", "libraryId": "Mapping.Infrastructure", "type": "geocortex.essentialsHtmlViewer.mapping.infrastructure.menus.MenuView", "markup": "Mapping/infrastructure/menus/MenuView.html
", "region": "LeftFooterRegion
", "visible": true, "configuration": { "menuId": "SocialFooterMenu
" } } ...
Next, add a new MenuViewModel
whose id
corresponds to the viewModelId
which, in the above example, is named SocialFooterMenuViewModel
.
...
{
"id": "SocialFooterMenuViewModel
",
"type": "geocortex.essentialsHtmlViewer.mapping.infrastructure.menus.MenuViewModel",
"configuration": {}
}
...
Finally, set the FooterViewModel
's height
property and, optionally, the backgoundColor
property.
...
{
"id": "FooterViewModel",
"type": "geocortex.essentialsHtmlViewer.mapping.modules.footer.FooterViewModel",
"configuration": {
"backgroundColor": "#EEEEEE",
"height": 50
}
}
...
You can show any module in a viewer's footer by setting the view's region
property to one of the footer regions.
For example, to show the scale bar in the footer, you could set the region
property in the Scalebar module's ScalebarView
to LeftFooterRegion
. If you also set CoordinatesView
's region
to LeftFooterRegion
in the Coordinates module, both the Scale Bar map widget and the Map Coordinates map widget will show in the left part of the footer. Showing the Scale Bar and the Map Coordinates map widgets in the footer reduces the number of map widgets on the map.