Adding badges to application menu

ASP.NET, PHP, PHP Code Generator, Tutorials

In this post we’ll show how to spice up your application menu drawing attention to new and important items. For this purpose we’ll be using so called menu badges.


These badges can be text, images or numbers. You can add this functionality to your project in two easy steps.

1. Custom CSS

Add the following code to ‘Custom CSS’ section of Style Editor.

.badge-green {
background-color: #1ab394;
}

.badge-blue {
background-color: #23c6c8;
}


.badge {
    color: #FFFFFF;
    font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    padding: 2px 8px;
    text-shadow: none;    
    border-radius: .25em;
    float: right!important;
}

2. MenuItemModify event

PHPRunner

$title = $menuItem->getTitle();

if ($title=="Categories") {
       // display some text
	$title.="<span class='badge badge-green'>NEW</span>";
  $menuItem->setTitle($title);
}
if ($title=="Shippers") {
	$title.="<span class='badge badge-blue'>SPECIAL</span>";
  $menuItem->setTitle($title);
}
if ($title=="Suppliers") {
       // display some image
	$title.="<span class='badge'><img src='images/cal.gif'></span>";
  $menuItem->setTitle($title);
}
if ($title=="Orders") {
       // display numbers of today's orders
	$count = DBLookup("select count(*) from orders where DATE(OrderDate) = CURDATE()");
	$title.="<span class='badge badge-blue'>".$count."</span>";
  $menuItem->setTitle($title);
}
return true;

ASPRunner.NET

string title = menuItem.getTitle();
if (title == "Carscars") {
	title+="<span class='badge badge-green'>NEW</span>";
	menuItem.setTitle(title);
}
if (title == "Carsmake") {
	title+="<span class='badge'><img src='../images/cal.gif'></span>";
	menuItem.setTitle(title);
}
if (title == "Carsmodels") {
	string count = tDAL.DBLookup("select count(*) from Carsmodels");
	title+="<span class='badge badge-green'>" + count + "</span>";
	menuItem.setTitle(title);
}
return true;

ASPRunnerPro

title = menuItem.getTitle()
  if title="Carscars" then
                       ' display some text
			title = title & "<span class='badge badge-green'>NEW</span>"
      menuItem.setTitle_p1(title)
  end if
  if title="Carsform" then
                       ' display some image
			title = title & "<span class='badge'><img src='images/cal.gif'></span>"
      menuItem.setTitle_p1(title)
  end if
  if title="Orders" then
                       ' display some text
			count=DBLookup("select count(*) from orders where DATE(OrderDate) = CURDATE()")
			title = title & "<span class='badge badge-blue'>" & count & "</span>"
      menuItem.setTitle_p1(title)
  end if

ModifyMenuItem = true

7 thoughts on “Adding badges to application menu

  1. very well, i mix this with a table, so i can control all from parameters in my db.

    the table code is

    CREATE TABLE `menu` (
    `ID` INT(11) NOT NULL AUTO_INCREMENT,
    `titulo` VARCHAR(100) NULL DEFAULT NULL,
    `texto` VARCHAR(50) NULL DEFAULT NULL,
    `color` VARCHAR(15) NULL DEFAULT NULL,
    `imagen` TEXT NULL,
    PRIMARY KEY (`ID`)
    )

    $titulo = $menuItem->getTitle();

    global $conn;
    $strSQLExists = “select * from menu where menu.titulo = ‘”.$titulo.”‘”;
    $rsExists = db_query($strSQLExists,$conn);
    $data=db_fetch_array($rsExists);
    if($data)
    {
    if ($data[‘color’]==”green”)
    {
    $titulo.=””.$data[‘texto’].””;
    $menuItem->setTitle($titulo);
    }

    if ($data[‘color’]==”blue”)
    {
    $titulo.=””.$data[‘texto’].””;
    $menuItem->setTitle($titulo);
    }
    }

    return true;

  2. Can this same technique be used on a form that has multiple tabs, so the badge appears on the tab?

Leave a Reply

Your email address will not be published. Required fields are marked *