Page tree

EUI Setup Tips

This topic provides some additional configuration tips for EUI scenarios such as chat and drop-down menus. 

Single Sign-On (SSO)

If your users are using SSO, the system will tell the admin what URL to use. This base URL will take end users to the Legacy EUI. To make sure the end users are directed to your customized Portal, add &euiURL=/eui2template/main.php to the end of the SSO link. If main.php is not your main entry page, change the reference accordingly.

The completed link will look like:

For Google SSO, the link would look like:

Drop-down Menus

This section explains how to add drop-down menus in the EUI. This uses JavaScript, not Agiloft macros, and can enable users to create more complex menus in the EUI. Newer default installations include drop-down menus by default.

Edit menu.htm in the EUI Templates table by adding the following to the JavaScript section:

( function(){
$('ul', this).css('visibility','visible');
$('ul', this).css('position', 'absolute');
$('ul', this).css('visibility','hidden');
$("li.submenu ul li").hover( 
$('a', this).css('color', 'white');
$('a', this).css('color', '#07315b');

This code causes submenus to be revealed on mouse-over. This and the CSS below require that the menu items with drop-down menus be in a list with an ID of submenu.

The following example displays one of the list items from a menu. It contains a separate list which is the drop-down items:

<li id="submit" class="submenu"><a href='#' style="cursor: default">New Ticket</a>
<li><a href='#ew_forward("submit_repair.html")'>New Equipment Repair</a></li>
<li><a href='#ew_forward("submit_swi.html")'>New System Issue</a></li>
#if ($ewUser.isInGroup("Vendor") || $ewUser.isInGroup("admin"))
<li><a href='#ew_forward("submit_maintenance.html")'>New Maintenance Request</a></li>

To set the appearance of the drop-down menus, edit style.css and add something like the following:

#menu li.submenu ul { 
visibility: hidden; 
list-style: none; 
margin: 0;
position: absolute;
border: 1px solid #5F76A3; 
border-top: none;
z-index: 598;
margin-top: -19px !important;
 margin-left: -19px !important;
#menu li.submenu:hover > ul { 
visibility: visible;
#menu li.submenu:hover { 
position: relative;
z-index: 599; 
cursor: default;
#menu li.submenu ul li, #menu li.submenu ul li a  { 
padding: 0;
margin: 0; 
background: none;
#menu li.submenu ul { 
margin: 0; 
padding: 3px; 
background: white;
#menu li.submenu ul li { 
padding: 5px 10px 5px 15px; 
width: 150px;
#menu li.submenu ul li:hover { 
background: #5F76A3;
#menu li.submenu ul li:hover a { 
color: white;
#menu li.submenu ul li a {
color: #07315b;
font-weight: normal; 
text-align: left;

Language Selection for End Users

End users, like power users, can use Agiloft with a Localized interface in their chosen language. This requires that at least one of the user's teams is provided with language access, and that you modify certain EUI templates to provide a way to select the language.

  1. First, edit the header.htm record in the EUI Tempates table. The default template contains a logout link given by <a href="'#ew_logout($exitURL)'>$</a>
  2. Add the following code, following the logout link:

    <a href='#ew_logout($exitURL)'>$</a>
    #ew_languages("lang" "onLangChange(this.value)" "")
    function onLangChange(lang) {
    window.location= "#ew_forward('main.php')?language=" + lang;
  3. Next, edit the main.php template. Add the following code at the top, within the <head></head> tags:


The result is a drop-down control with the languages available for the current user. It is added to the header on all pages, as shown in the screenshot.

Enabling Browser Pop-ups

In custom EUI templates, browser pop-ups which are triggered by rules or actions, such as system notifications and messaging, can be enabled with the following code:

<iframe src="#ew_url("/do/ticker")" style="display:none"></iframe>