The default Web view template provides a Menu component that you can use to create navigation tabs in a Web view.

About this task

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

  • Import the default Web view template to Orchestrator to create the Virtual Machine Manager Web view

  • Export the contents of the Virtual Machine Manager Web view to a working directory

  • 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/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>
  5. 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.

  6. Modify the new <li> entry to point to runWorkflows.html.
    1. Change the ognl:page.isCurrentPage OGNL statement to add the runWorkflows suffix to the URL.
    2. Change the <a href> link to point to ./runWorkflows.html.
    3. 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>
  7. Open the Virtual Machine Manager Web view in a browser at https://orchestrator_server:8280/vco/vmo/.

    The Workflows tab appears in the Web view. If you click the tab, you see the contents of the runWorkflows.html file.

Results

You added a tab to the Web view.

What to do next

Use the vco:WorkflowLink component to run workflows from the Workflows tab.