The Shells Module implements the HTML5 Viewer's three interfaces ("shells") that enable the Viewer to work on different types of device. The three shells are:
Desktop: For running the Viewer on desktop computers.
Tablet: For running the Viewer on tablets.
Handheld: For running the Viewer on handheld devices like smartphones.
The shells control the layout and the layout's behavior on the different types of device. A shell is a view that hosts a number of regions, along with some behavior to handle resizing and layout concerns.
If you want to change the style settings for viewer elements, you need to update the CSS files contained in a Resources\Styles\Custom location as described in the following information.
Update the CSS Files
To change the style settings for viewer elements, update the CSS files contained in a Resources\Styles\Custom directory.
The Resources\Styles\Custom directories are located in:
inetpub\wwwroot\<viewer-directory>\, where
<viewer-directory> is the location where the viewers are installed during the post-installation process. The default location is inetpub\wwwroot\Html5Viewer\.
The VertiGIS installation location within each site’s Viewer directory under
...Sites\<site-name>\Viewers\<viewer-name>\VirtualDirectory\.
The following table summarizes the effect of changing the CSS files in the inetpub directory or in a site's viewer directory.
Note that styles specified in the Management Pack for viewer elements take precedence over any updates for the equivalent elements in the CSS files.
| To... | Update... | Located In... |
|---|---|---|
| Define styles for all interfaces in all sites. | common.css | Resources\Styles\Custom within the inetpub directory path. |
| Define styles for a specific interface (desktop, handheld, or tablet) in all sites. |
The respective: Desktop.css Handheld.css Tablet.css |
Resources\Styles\Custom within the inetpub directory path. |
| Define styles for all interfaces in a specific viewer within a site. | common.css | Resources\Styles\Custom within the ...Sites\<site-name>\... directory path. |
| Define styles for a specific interface (desktop, handheld, or tablet) for a specific viewer within a site. |
The respective: Desktop.css Handheld.css Tablet.css |
Resources\Styles\Custom within the ...Sites\<site-name>\... directory path. |
The advantage of making style changes in the CSS files in the Resources\Styles\Custom folder is that they are not overwritten when updating the HTML5 Viewer.
Upgrade Considerations
If you are upgrading from an earlier version of the Viewer to version 4.14.0, and viewer styles have been customized, complete the following steps:
Ensure that all customized CSS files are backed up.
If the Upgrade Viewer Template dialog box opens during the upgrade process:
Select Keep Existing to preserve modified Desktop.css, Handheld.css, and Tablet.css files in Resources\Styles\Custom located within the inetpub directory,
or,
Select Overwrite to reset the modified CSS files back to their defaults.
If the Upgrade Viewer Template dialog box does not open, continue with the upgrade process.
After upgrading the HTML5 Viewer, update the css property settings in the Shells module as described above.
Module
css: A list of file paths to the CSS files for this shell.
Each interface has its own CSS file to manage the differences in screen size and shape. The files are Desktop.css, Tablet.css, and Handheld.css. Configured by default for each interface is the path Resources/Styles/Custom/common.css. Also configured by default for the respective interfaces are the Resources/Styles/Custom/ paths for Desktop.css, Handheld.css, and Tablet.css. See Customizing the Viewer for more information.
homePanelVisible: When this property is set to true, the region that hosts the Home Panel, HomePanelContainerRegion, is visible when the viewer launches. If you want the user to be able to see the Home Panel when the viewer launches, set this property to true. The default is false.
To open the Home Panel when the viewer launches In the Desktop and Tablet interfaces, you must also set the ShellViewModel configuration property, dataFrameOpenByDefault, to true. This is not necessary for the Handheld interface.
Views
ShellView:
resizeShell: Set to true for the Handheld interface. This parameter does not apply to the Desktop or Tablet interfaces.
DataFrameViewContainer: No configuration properties
ModalViewContainerView: No configuration properties
ResultsRegionViewContainerView:
resizableParentRegion: The resizable parent region. The default is BottomPanelRegion.
resizeY: To allow the container to be vertically resized, set to true. The default is true.
FeatureEditingContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true. The default is true.
LayerDataContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true. The default is true.
HomePanelContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true. The default is true.
DataFrameResultsContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true. The default is true.
ProjectContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the user to resize the container horizontally, set resizeX to true. If you do not want users to be able to resize the container horizontally, set resizeX to false. The default is true.
SimpleQueryBuilderContainerView: No configuration properties
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true. The default is true.
SimpleFilterBuilderContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true. The default is true.
OfflineMapsContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true; otherwise, set to false. The default is true.
CoordinatesContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true; otherwise, set to false. The default is true.
TimeSliderContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true; otherwise, set to false. The default is true.
ProjectContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true; otherwise, set to false. The default is true.
LayerAdditionContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true; otherwise, set to false. The default is true.
DrawingOrderContainerView:
resizableParentRegion: The resizable parent region. The default is LeftPanelRegion.
resizeX: To allow the container to be horizontally resized, set to true; otherwise, set to false. The default is true.
BottomPanelViewContainerView: (Handheld interface only) No configuration properties
ResultsViewContainerView: (Handheld interface only) No configuration properties
MiscContainerView: (Handheld interface only) No configuration properties
ModalContainerView: (Handheld interface only) No configuration properties
View Models
ShellViewModel:
minWidth: (Desktop and Tablet interfaces only) The minimum width to which the Data Frame can be resized. The default width is 200 pixels. Alternatively, you can specify the amount as a percentage string, for example, "10%".
maxWidth: (Desktop and Tablet interfaces only) The maximum width to which the Data Frame can be resized. The default width is 500 pixels. Alternatively, you can specify the amount as a percentage string, for example, "50%".
dataFrameWidth: (Desktop and Tablet interfaces only) The width of the Data Frame in pixels. The default width is 350 pixels. Alternatively, you can specify the amount as a percentage string, for example, "25%".
Specifying the amount as a percentage string ensures the panel size remains in proportion to the browser window until the user resizes the panel.
dataFrameOpenByDefault: Controls whether the Data Frame is open when the viewer launches. The default is false.
bottomRegionHeight: (Desktop and Tablet interfaces only) The height of the ResultsRegion in pixels. The ResultsRegion hosts the FeatureDetailsView and ResultsTableView by default. The default is 300 pixels. Alternatively, you can specify the amount as a percentage string, for example, "25%".
Specifying the amount as a percentage string ensures the panel size remains in proportion to the browser window until the user resizes the panel.
openToMaximum: (Handheld interface only) To have the bottom panel open to the maximum size by default, set to true. The default is false.
bottomPanelHeightPercent: (Handheld interface only) The height of the bottom panel as a percentage. The default is 75.
DataFrameViewContainerViewModel:
defaultViewIcon: The path to the icon to use if the view's iconUri is not specified.
containerRegionName: The name of the region in which this view container is hosted. The default is DataRegion.
headerIsVisible: Specifies whether or not the header in the view is visible. The default is false.
showHeaderForStandaloneViews: Specifies whether or not to display the header if the view is a stand alone view. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is false.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is true.
showHostedViews: Whether or not to display the views hosted in this view model. The default is false.
resizeX: To allow the container to be horizontally resized, set to true. The default is true.
footerInsertMarkup: Is the URI of the markup file to be hosted in the footer of a view container.
footerInsertType: The view type to be hosted in the footer of a view container.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
DataFrameResultsContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is DataFrameResultsContainerRegion.
statusRegionName: The region to use for status messages in the Results List. The default is DataFrameResultsStatusRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is false.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is false.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
LayerDataContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is LayerDataContainerRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is false.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is false.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
HomePanelContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is HomePanelContainerRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is false.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is false.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
FeatureEditingContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is FeatureEditingContainerRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is true.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is false.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
ModalViewContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is ModalWindowRegion.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is false.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is true.
CloseOnEscape: Whether or not the view closes when the user presses the Esc key. The default is true.
ResultsRegionViewContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is ResultsRegion.
statusRegionName: The region to use for status messages in the Results Table. The default is ResultsStatusRegion.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering).
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is true.
showMaximizeButton: When set to true, the maximize button is displayed. When set to false, the maximize button is not displayed. The default is true.
resizeY: To allow the container to be vertically resized, set to true. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
SimpleQueryBuilderViewContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is SimpleQueryBuilderContainerRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is true.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is true.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
SimpleFilterBuilderViewContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is SimpleFilterBuilderContainerRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is true.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is true.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
OfflineMapsContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is OfflineMapsContainerRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is true.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is false.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
CoordinatesContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is CoordinatesContainerRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is true.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is true.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
TimeSliderContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is TimeSliderContainerRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is true.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is true.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
ProjectContainerViewModel:
containerRegionName: The name of the region in which this view container is hosted. The default is ModalWindowRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When backButtonOnRootView is set to true, the back button displays on the root view (the view with the value of 0 configured inside the node ordering). The default is false.
showBackButtonAsX: When showBackButtonAsX is set to true, the back button has X on it. When showBackButtonAsX is set to false, the button is displayed with Back written on it. The default is true.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
LayerAdditionContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is LayerAdditionContainerRegion.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is true.
showBackButtonAsX: When set to true, the back button has X on it.
When set to false, the button is displayed with Back written on it. The default is true.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.
DrawingOrderContainerViewModel:
containerRegionName: Defines the name of the region in which this view container is hosted. The default is DrawingOrderContainerRegion.
containerManagedTitle: Defines the title of the bottom tab used when the Drawing Order panel is active in the viewer. The default value is a text key, @language-layerDrawingOrder-tabTitle.
headerIsVisible: Defines whether or not the header in the view is visible. The default is true.
backButtonOnRootView: When set to true, this parameter displays the back button on the root view (the view with the value of 0 configured inside the node ordering). The default is true.
showBackButtonAsX: When set to true, the back button has X on it. When set to false, the button is displayed with Back written on it. The default is true.
showHostedViews: Whether or not to display the views hosted in this view model. The default is true.
ordering: A mapping of views and their order ranking starting with 0. A view with the rank of 0 is the root view of a particular view container.