Add Another Tab to the Geoportal Interface

Add Another Tab to the Geoportal Interface

The steps below outline how to add another tab to your Geoportal Interface. In these steps, we add a (example) tab called Links that could possibly host a webpage, integrating with a content management system. These same steps can be used to add other tabs according to your Geoportal's specifications.

Note:

This topic assumes that you understand the geoportal web application jsp page tile structure, as described in Geoportal web application layout and tiles.

1. Create the folder and JSP pages to which your new tab will navigate
   • First, you will create the folder that will house your new tab's functionality. Navigate to the \\geoportal\catalog directory, and create a new folder in that catalog directory. In this example, we name our new folder quicklink.
   • Now you will create the parent jsp page that will house your new tab's body.jsp page. Create a new text file, and give it a name. Save it with a .jsp file extension. In our example, we create quicklink.jsp.
   • Paste the following code into the new empty .jsp file, replacing quicklink in the code with your new folder name. Note that the tiles: put name value parameter will reference the body jsp, which we'll create next:

     <% // quicklink.jsp - Link pages (tiles definition) %>			
     <%@taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>			
     <%@taglib uri="http://www.esri.com/tags-gpt" prefix="gpt" %>						
     <% // initialize the page %>			
     <gpt:page id="catalog.quicklink.home"/>			
     <tiles:insert definition=".gptLayout" flush="false" >			
     	<tiles:put name="body" value="/catalog/quicklink/quicklinkBody.jsp"/>			
     </tiles:insert>
     			

   • Now, you will create the body page that will hold the real content of your new tab. Create another blank .jsp file in your new folder, and name the file the same as you named the .jsp you just created, except with Body appended to the file name. In our example, this will be quicklinkBody.jsp. In this new file, paste the following code. The example below references web content specified in the iframe id src attribute. This uses an IFrame with javascript to render an imported page in proper browser window size. In our example, the imported page is http://www.esri.com.

     <% // quicklinkBody.jsp - Links page (JSF body) %>
     <iframe id="frame" src="http://www.esri.com" style="overflow-y:auto;overflow-x:hidden"  width="100%" frameborder="0" marginheight="0" marginwidth="0" height="100%" >
     </iframe>
     
     <script type="text/javascript">
     function resizeIframe() {
         var height = document.documentElement.clientHeight;
         height += document.getElementById('frame').offsetTop;
         height -= 20; /* whatever you set your body bottom margin/padding to be */    document.getElementById('frame').style.height = height +"px";};
     document.getElementById('frame').onload = resizeIframe;
     window.onresize = resizeIframe;
     </script>
     

2. Create the new tab and reference it
   • Navigate to the \\geoportal\catalog\skins\tiles folder and open the primaryNavigation.jsp file in a text editor.
   • Paste the following code near the bottom of the file, just above </h:form>, editing the pasted code according to match the names you've given to your jsp pages and folder. Note that the id quicklinkHome is a unique id that you assign to this tab. The action catalog.quicklink.home sets this link to open files in the folder you created earlier, the \\geoportal\catalog\quicklink folder. The value attribute is the bean that references the name that will appear to the user on the new tab, as set in the gpt.properties file which we will update later. The styleClass is a reference to the tab styling. Make sure to change the [catalog.quicklink] in the styleClass attribute to reference the same folder that you referenced in your action attribute. Use the example below as a guide.

     <h:commandLink 
             	id="quicklinkHome" 
             	action="catalog.quicklink.home" 
             	value="#{gptMsg['catalog.quicklink.home.menuCaption']}" 
           	styleClass="#{PageContext.tabStyleMap['catalog.quicklink']}"/>
     

   • You will need to define the new page opened by your tab in the gpt-faces-config.xml file. Navigate to the \\geoportal\WEB-INF folder and open gpt-faces-config.xml in a text editor. Paste the following code just below the navigation-rule for <!-- Extract pages -->. Edit the from-outcome parameter to reference the action attribute from the previous step. The to-view-id parameter references that first jsp page you created:

       
     <!-- link page -->
       <navigation-rule>
         <navigation-case>
           <from-outcome>catalog.quicklink.home</from-outcome>
           <to-view-id>/catalog/quicklink/quicklink.jsp</to-view-id>
           <redirect/>
         </navigation-case>
       </navigation-rule>
     

3. Update the gpt.properties file
   • Navigate to the \\geoportal\WEB-INF\classes\gpt\resources folder and open the gpt.properties file in a text editor.
   • Update the file by entering in the new key value you referenced from the primaryNavigation.jsp. The term you specify in the bean will display as the text on the new tab. The caption entry below the menuCaption entry will display at the top of the page after clicking your new tab and navigating to the page. The example below shows the two new entries for a tab called Links and the welcome text displayed just underneath the tab when a user clicks it.

      
     # quicklink page ###################
     catalog.quicklink.home.menuCaption 	= Links
     catalog.quicklink.home.caption = Welcome to the Link Page
     

4. Save the files you have modified and restart your geoportal web application. Your new tab should appear on the homepage.