Add new link in top menu

Discussion in 'Customization & Integration Showcase and Discussion' started by Pavel74, Feb 28, 2016.

  1. Pavel74

    Pavel74 Bit Poster

    Messages:
    6
    How can I add a new link in the CP top frame tab? And add new page, which will be available via this link?
    For example, link name "Reports", and on this page show custom repots from shop

    [​IMG]
     
    Last edited: Feb 28, 2016
    Pavel74, Feb 28, 2016
    #1
  2. dkolvakh

    dkolvakh Odin Team

    Messages:
    361
    dkolvakh, Feb 29, 2016
    #2
  3. Pavel74

    Pavel74 Bit Poster

    Messages:
    6
    I looked through all the sections, but nothing on the problem posed is not found.
    [​IMG]
    Can you tell more?
     
    Pavel74, Feb 29, 2016
    #3
  4. dkolvakh

    dkolvakh Odin Team

    Messages:
    361
    Pavel74,
    Customizing Customer Control Panel is a correct place to look inside. There is a chapter describing way to customize top navigation panel. If your custom screen located outside OBAS, it will be easy to add a new item to top panel.
     
    dkolvakh, Mar 1, 2016
    #4
  5. Pavel74

    Pavel74 Bit Poster

    Messages:
    6
    Pavel74, Mar 1, 2016
    #5
  6. dkolvakh

    dkolvakh Odin Team

    Messages:
    361
    Well, I've used SDK chapter you mention about to do a simple custom tab and screen. Result is on the screenshot.

    Custom_Tab.gif

    Steps to achieve that goal were the following.

    1. Create directory and copy original template into it:
    Code:
    # mkdir -p /var/opt/hspc-root/custom/template/HSPC/CP/Visual
# chown -R apache:apache /var/opt/hspc-root/custom/template/*
# cp -p /var/opt/hspc-root/skins/panel/template/HSPC/CP/Visual/top_frame.tmpl /var/opt/hspc-root/custom/template/HSPC/CP/Visual/top_frame.tmpl


    2. Then, I've changed custom template in the following way (new tab added):
    HTML:
    # diff -u /var/opt/hspc-root/skins/panel/template/HSPC/CP/Visual/top_frame.tmpl /var/opt/hspc-root/custom/template/HSPC/CP/Visual/top_frame.tmpl
--- /var/opt/hspc-root/skins/panel/template/HSPC/CP/Visual/top_frame.tmpl  2016-03-02 10:02:15.000000000 +0300
+++ /var/opt/hspc-root/custom/template/HSPC/CP/Visual/top_frame.tmpl  2016-03-02 11:41:37.076636915 +0300
@@ -182,6 +182,9 @@
  </li>};
  }
}
+  <li class="" id="custom_tab">
+    <a onclick="topTab(this);showButtonIndicator(this);doSubmit('/cp/custom_tab.php','main');" href="javascript:void(0)"><span>Custom Tab</span></a>
+  </li>
  </ul>
  </div> <!-- navbar -->
  </div> <!-- top-wrapper -->


    3. I've created a php file /var/opt/cp/custom_tab.php with the following content, which in most (layout, styles, headers) was taken from existing tabs:
    PHP:
    <!DOCTYPE html>
    <!--[if lt IE 7 ]><html class="ie ie6 lte9 lte8 lte7" lang="en"><![endif]-->
    <!--[if IE 7 ]><html class="ie ie7 lte9 lte8 lte7" lang="en"><![endif]-->
    <!--[if IE 8 ]><html class="ie ie8 lte9 lte8" lang="en"><![endif]-->
    <!--[if IE 9 ]><html class="ie ie9 lte9" lang="en"><![endif]-->
    <!--[if gt IE 9]><!--><html class=""><!--<![endif]-->
    <head>
    <!-- site_7 :: /var/opt/hspc-root/skins/panel/template/HSPC/CP/Menu/dash.tmpl -->
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/style/common.css">
    <link rel="stylesheet" href="/style/main.css">
    <link rel="stylesheet" href="/style/main-buttons.css">
    <link rel="stylesheet" href="/style/popup.css">
    <link rel="stylesheet" href="/style/left.css">
    <!-- CSS customization -->
    <link rel="stylesheet" href="/skins/panel/style/custom.css">

    <script language="javascript1.2" src="/javascript/loadbar.js"></script>
    <script language="javascript1.2" src="/javascript/downloadfile.js"></script>
    <script language="JavaScript"  src="/javascript/cookie.js"></script>
    <script language="JavaScript"  src="/javascript/prototype.js"></script>

    </head>
    <body class="sid-pa sid-main">
      <div id="page">
        <div id="wrapper">
          <div id="content-wrapper">
            <div id="content" class="clearfix">
              <div id="main">
                <br /><center><h1><?php echo "Hello world. I am the Custom Tab!"; ?></h1></center>
              </div> <!-- main -->
            </div> <!-- content -->
          </div> <!-- content-wrapper -->
        </div> <!-- wrapper -->
      </div> <!-- page -->
      <span class="powered-logo"><img src="/skins/panel/images/logos/powered-by-logo.png" border="0"></span>
      <div id="footer-wrapper">
        <div id="footer"><a onclick="window.open(this.href); return false;" href="http://www.odin.com">&copy; 2016 Ingram Micro Inc. All rights reserved.</a></div>
      </div>
    </body>
    </html>
     
    dkolvakh, Mar 2, 2016
    #6

Share This Page