Navigation:  Development > System Definition > Interface Builder

Interface Builder helps to create Menu and Render a new page in Admin Panel. This User Interface of Admin Panel generates base on XML file that we called Interface Builder Definition File. Generally we save all files in below location:
 
/development/definition/interface_builder
 
Interface Builder Definitions are combination of one or more Navigation Tag (<navigation>). Each Navigation has a two basic parts to contain top menu(<parent>) and a set of Left menus information(<child>). See below area of configuration in Navigation Tag.

 

 

Tab Name

Each tab has a name that we define in navigation tag. See below example:
 

<navigation name="tab_name"></navigation>
 
For example:
 

<navigation name="blog"></navigation> 

 

Base Action:

We set default page URL in Action.  See below Example:
 
<parent>
  <action>/category/manage/blog-cat</action>
</parent>

Tab Icon

We can assign a Icon path to display in Tab Menu. See below example:
 
<icon>/themeroot/admin/images/icons/developer.png</icon>

 

Sub Menu:

A tab can have a list of drop down menu. It is recommended to add all Sub Menu in left menu definition also to manage user access correctly.  See below example:
 

<submenu>
  <!-- Single Menu --> 
  <item>
    <title>Manage Orders</title>
    <link>/appstore/manageorders</link>
  </item>
  <!-- Multiple Menu -->
  <item type="multiple">
    <title>Products</title>
    <link>/information/manage/product</link>
    <!-- Second Level Child Menu -->
    <child>
      <childitem>
        <title>Manage Products</title>
        <link>/information/manage/product</link>
      </childitem>
      <childitem>
        <title>Product Categories</title>
        <link>/category/manage/product-cat</link>
      </childitem>
    </child>
  </item>
  <item>
    <title>Payment Settings</title>
    <link>/admin/config/paymentmethod</link>
  </item>
  <item>
    <title>Store Settings</title>
    <link>/admin/config/appstoresettings</link>
  </item>
</submenu>

 

Left Menu:

Left menu contain the list of left menu with links. See below example
 
<child>
  <menu>
      <title>Blog Posts</title>
      <items>
          <item>
              <title>Add Post</title>
              <link>/information/manage/blogpost/add</link>
          </item>
          <item>
              <title>Manage Post</title>
              <link>/information/manage/blogpost</link>
          </item>
      </items>
      <adminicon>
          <type>FilePath</type>
          <location>/component/blog/interface_builder/post.jpg</location>
      </adminicon>
  </menu>
  <menu>
      <title>Blog Categories</title>
      <items>
          <item>
              <title>Add Category</title>
              <link>/category/manage/blog-cat/add</link>
          </item>
          <item>
              <title>Manage Categories</title>
              <link>/category/manage/blog-cat</link>
          </item>
      </items>
      <adminicon>
          <type>FilePath</type>
          <location>/component/blog/interface_builder/category.jpg</location>
      </adminicon>
  </menu>
</child>

We create a batch of menu in <child> tag. Each <menu> tag can contain a list of <item> tag contain a menu item. Each menu item has a title and link of the page to load in admin panel.

 

Menu Icon:

A menu list can have a menu icon to show in dashboard. See below example:
 
<adminicon>
  <type>FilePath</type>
  <location>/component/blog/interface_builder/category.jpg</location>
</adminicon>

 

 

ACL

All Menu and Sub Menu available in User Creation area in Admin Panel to restrict the access.
 

Tips

1.You can see example in : /development/definition/interface_builder  to see some patterns and try to create new menu.

2.Clear Cache after changing the XML

3.See the User Permission in admin update page (Admin Panel > User Management > Administrators)

 

See a full example:

 

<?xml version="1.0" encoding="utf-8"?>
<InterfaceBuilder>
    <navigation name="catalog">
        <parent>
            <title>Store</title>
            <action>/appstore/manageorders</action>
            <submenu>
                <item>
                    <title>Manage Orders</title>
                    <link>/appstore/manageorders</link>
                </item>
                <item type="multiple">
                    <title>Products</title>
                    <link>/information/manage/product</link>
                    <child>
                        <childitem>
                            <title>Manage Products</title>
                            <link>/information/manage/product</link>
                        </childitem>
                        <childitem>
                            <title>Product Categories</title>
                            <link>/category/manage/product-cat</link>
                        </childitem>
                    </child>
                </item>
                <item>
                    <title>Payment Settings</title>
                    <link>/admin/config/paymentmethod</link>
                </item>
                <item>
                    <title>Store Settings</title>
                    <link>/admin/config/appstoresettings</link>
                </item>
            </submenu>
            <acl>
                <group>superadmin</group>
            </acl>
            <sort_order>7</sort_order>
            <icon>/component/appstore/interface_builder/blog.jpg</icon>
        </parent>
        <child>
            <menu>
                <title>Orders</title>
                <items>
                    <item>
                        <title>Manage Orders</title>
                        <link>/appstore/manageorders</link>
                    </item>
                </items>
                <adminicon>
                    <type>FilePath</type>
                    <location>/component/appstore/interface_builder/orders.jpg</location>
                </adminicon>
            </menu>
            <menu>
                <title>Product Categories</title>
                <items>
                    <item>
                        <title>Add Category</title>
                        <link>/category/manage/product-cat/add</link>
                    </item>
                    <item>
                        <title>Manage Categories</title>
                        <link>/category/manage/product-cat</link>
                    </item>
                </items>
                <adminicon>
                    <type>FilePath</type>
                    <location>/component/appstore/interface_builder/product-cat.jpg</location>
                </adminicon>
            </menu>
            <menu>
                <title>Products</title>
                <items>
                    <item>
                        <title>Add New product</title>
                        <link>/information/manage/product/add</link>
                    </item>
                    <item>
                        <title>Manage Products</title>
                        <link>/information/manage/product</link>
                    </item>
                </items>
                <adminicon>
                    <type>FilePath</type>
                    <location>/component/appstore/interface_builder/products.jpg</location>
                </adminicon>
            </menu>
            <menu>
                <title>Store Settings</title>
                <items>
                    <item>
                        <title>Common Settings</title>
                        <link>/admin/config/appstoresettings</link>
                    </item>
                </items>
                <adminicon>
                    <type>FilePath</type>
                    <location>/component/appstore/interface_builder/orders.jpg</location>
                </adminicon>
            </menu>            
        </child>
    </navigation>
</InterfaceBuilder>