Footer Module

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:

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:

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.

Configuration Properties

Module

Views

View Models

Example 1 - Show Text Hyperlinks in the Footer

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
    }
  }
  ...

Example 2 - Show a Menu of Image Items in the Footer

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
    }
  }
  ...

Example 3 - Show the Scale Bar and Map Coordinates in the Footer

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.