How To Change the Tabs

GeoMOOSE 2 now features a flexible tabbing capability. This allows administrators to have any number of tabs available to the user in the interface. This document will show how to take a svn-derived instance of GeoMOOSE and reduce the tabs down to two (‘Layers’ and ‘Information’).

Step 1: Define the Tabs in the HTML

HTML from SVN will typically look like this:

<div id="tab-container">
        <div id="catalog-tab">
        </div>

        <div id="search-tab">
                SEARCH TAB
        </div>

        <div id="results-tab">
                No Results Yet!
        </div>

        <div id="service-tab">
                Form Information Goes Here.
                <div style="width: 400px; height: 20px; background: red">
                        abcdef
                </div>
        </div>
</div>

This HTML exists as it serves to test a number of Javascript and CSS configuration parameters. This interface is not what is useful to deliver to users. The first task is to cut down the tabs to only the ones we want to display:

<div id="tab-container">
        <div id="layers-tab"></div>
        <div id="information-tab"></div>
</div>

If you were to reload the geomoose.html page then you would see an entirely broken interface. This is because we need to adjust the configuration parameters to support this change.

Step 2: Change the Configuration

As with most configuration changes with GeoMOOSE this requires changing the mapbook. We need to specify some basic information about where specific content should be place in the interface.

Step 2(a): Define the Tabs

GeoMOOSE uses the “tabs” configuration parameter to define the mapping of tab-names and div-ids in the interface. The default mapping looks like this:

<param name="tabs"><![CDATA[
 {
         'Catalog' : 'catalog-tab',
         'Search' : 'search-tab',
         'Services' : 'service-tab',
         'Results' : 'results-tab'
 }
 ]]></param>

With the changes made to geomoose.html earlier we now need to add this to the <configuration> section of the mapbook to map our new Div’s to Tab names:

<param name="tabs"><![CDATA[
 {
         'Layers' : 'layers-tab',
         'Information' : 'information-tab'
 }
 ]]></param>

Step 2(b): Define What is in the Tabs

Some tabs will have custom content. This can be a custom form or a special copyright message. In this case, the HTML can be left in the tab and none of these settings will have an effect. However, there are very important settings for targetting where specific content will be placed.

• default_tab - This is the tab that will be selected when the interface is opened.
• catalog_name - This is the name of the tab that will contain the catalog.
• show_service_settings_in - The name of the tab where all service settings will be shown. Service settings are the options that are presented to the user when they click on a service like “Select” or “Print.”
• show_results_in - This sets the name of the tab that will contain the results from services.

To make this example work we would need to add the following to the <configuration> section of the mapbook:

<param name="default_tab">Layers</param>
<param name="catalog_name">Layers</param>
<param name="show_service_settings_in">Information</param>
<param name="show_results_in">Information</param>