4.1

Table Of Contents
Create a Web View Tab by Using the Menu Component
The default Web view template provides a Menu component that you can use to create navigation tabs in a Web
view.
The VMMBorder component that the default Web view template uses to render its layout includes a reference to
the Menu component. Any changes you make to the Menu component appear in the Web view.
Prerequisites
n
Import the default Web view template to Orchestrator to create the Virtual Machine Manager Web view
n
Export the contents of the Virtual Machine Manager Web view to a working directory
n
Configure Orchestrator in Web view development mode
Procedure
1 Create an HTML file called runWorkflows.html and save it at the root of your working folder.
The runWorkflows.html file defines the body of the new tab.
2 Add a reference to the MyBorder component, a title, and some text to the runWorkflows.html file.
<vco jwcid="@layout/VMMBorder" section="literal: home" title="Run Workflows">
<p style="margin-left: 16px; margin-top: 5px; margin-bottom: 5px;">Click a workflow to run
it.</p>
</vco>
3 Rename the \component\Menu.html Web view template file to \component\VMMMenu.html.
If you run more than one Web view in the same Orchestrator server, all components must have a unique
name.
4 Open the \component\VMMBorder.html Web view template file in an HTML editor.
5 Change the reference to the Menu component to VMMMenu.
jwcid="@layout/VMMMenu
6 Open the \component\VMMMenu.html Web view template file in an HTML editor.
The Menu.html file contains an unordered list with one <li> entry that links to the home page of the Web
view.
<ul id="sectionMenu" class="menu">
<li jwcid="@Any" class="ognl:page.isCurrentPage(webview.urlFolder + '/default')?
'selected':''">
<a href="./">Home</a></li>
</ul>
7 Copy and paste the <li> entry to create a second menu tab.
You create menu tabs in the Web view by adding <li> entries to the unordered list.
8 Modify the new <li> entry to point to runWorkflows.html.
a Change the ognl:page.isCurrentPage OGNL statement to add the runWorkflows suffix to the URL.
b Change the <a href> link to point to ./runWorkflows.html.
c Change the <a href> text to Workflows.
<li jwcid="@Any" class="ognl:page.isCurrentPage(webview.urlFolder + '/runWorkflows')?
'selected':''">
<a href="./runWorkflows.html">Workflows</a></li>
Chapter 9 Developing Web Views
VMware, Inc. 323