Page tree
Skip to end of metadata
Go to start of metadata

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:
https://qa01.enterprisewizard.com/gui2/sso.jsp?autoLogin=true&project=Demo_02a&State=Main&euiURL=/eui2template/main.php

For Google SSO, the link would look like:
https://qa01.enterprisewizard.com/gui2/sso?project=Demo_02a&State=Main&euiURL=/eui2template/main.php

Chat

Launch a chat session from the custom portal with the #ew_chat() macro. See EUI Macro Reference to learn how this macro is used. The macro only creates the URL to launch the chat session; this should also be added to a button or menu item. You must also configure Chat to obtain a $sessionHash under Setup > Chat.

The best way to implement chat depends on the specific needs of the client. You may want to make multiple types of chats available to different users based on group membership, or you may need just a simple chat button to show up for just one user group, such as the Customer group.

Simple Chat Setup Example

This example describes how to set up a Sales chat button to users in the Customer group. This will require you to work in the EUI Templates table and in the Chat wizard. You will add a Chat tab and page to the EUI, then customize the sessionHash.

  1. Edit menu.htm in the EUI Templates table. 

    // Popup window code function

  2. Locate the following line of commented code: <!--<li id="chat"><a href='#ew_forward("chat.html")'>$ewText.get("menu.chat")–>. This would create a tab called Chat in the EUI. Simply un-commenting this will not work because there is no defined chat.htm EUI template. Replace it with the following code: 

     Chat tab example
    <script type="text/javascript">
    // Popup window code function 
    function newPopup(url){
    popupWindow = window.open(url,'popUpWindow','height=500,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=no')
    }
    </script>
    #if
    ($ewUser.isInGroup("Customer"))
    <li id="chat"><a href="JavaScript:new-Popup('#ew_chat("46326e7a79564f5a3271376f4257786b5945344e46413d3d")')">
    $ewText.get("menu.chat")</a></li>
    #end


    1. The script portion is a commodity piece of JavaScript that is defined for later use in the link definition below it.  It allows you to open up a new window as a small popup rather than as a full-fledged window (HTML by itself does not have that control). The conditional text below it is the Agiloft-defined Velocity macro.

    2. $ew-Text.get("menu.chat") provides the name of the tab (in this case, Chat) from the localization record that provides the names of all elements in the language that you chose when setting up your knowledgebase.
    3. #if ($ewUser.isInGroup("Customer"))... #end - this portion prevents the link from being shown to anyone who is not in the Customer group.
  3. Copy the sessionHash: The long parameter provided after #ew_chat is the $sessionHash, a unique number that identifies the chat configuration. You will need to copy the sessionHash from the HTML tab of the Chat wizard.
    1. Navigate to Setup > Chat to copy it. If you do not see the HTML tab, select the "Web page outside the program" option on the General tab, then click Next to make the tab appear.


    2. In the HTML tab of the Chat wizard, copy the string after sessionHash= from the HTML box, then paste it into the $sessionHash.

  4. Go back to the chat.htm EUI Template and copy the sessionHash into the #ew-chat macro.

  5. Save this EUI template and log in as anyone in the Customer group. You will see the new Chat tab.

Complex Chat Setup Example

While the example above provides a basic setup for one available type of Chat, if you wanted to have more types of Chat available, it would not be convenient to add separate tabs for each - Sales Chat, Support Chat, and so on. This is best handled with this Menu.htm code:

<li id="chat"><a href='#ew_forward("chat.html")'>$ewText.get("menu.chat")</a></li>

In this code, chat.html refers to the page which should be first set up to show multiple chat options, which can optionally be hidden using the #if..#end Velocity macro options. For instance, a company might have internal 'Customers' who might want to chat with support staff or HR staff. In that case you would set up a separate HTML page as an EUI Template record called chat.html. To do this, perform the following steps:

  1. Copy the body of the newsupport_case.htm EUI Template into chat.html.

     Newsupport_case.htm example
    <!DOCTYPE HTML>
    <html>
    <head>
      <title>$ewText.get("newsc.title")</title>
      <meta name="description" content="" />
      #ew_include("meta.htm")
    </head>
    <body>
      <div class="wrapper">
        <div class="top-space"></div>
        <div class="main">
          #ew_include("header.htm")
          <div class="content">
            <h2>$ewText.get("newsc.header")</h2>
            #ew_status()
            <div id="main_frame">
             
     <iframe src='#ew_create_record("case" "/eui2template/main.php" 
    "parent")' name="content_frame" id="frameres" width="100%" 
    frameborder="0"></iframe>
            </div>
          </div>
          #ew_include("footer.htm")
        </div>
        <div class="bottom-space"></div>
      </div>
      <script src="#ew_forward('iresize.js')"></script>
    </body>
    </html>
  2. Edit the <title> from $ewText.get("newsc.title") to $ewText.get("menu.chat").
  3. Edit the <h2> from $ewText.get("newsc.header") to Available Chat Teams. This bypasses the localization feature of $ewText.get() but keeps the explanation short.
  4. Replace the <div id="main_frame"> contents with your new code:
 Main_frame code example
<script type="text/javascript">
//
Popup window code function newPopup(url) {
popupWindow = window.open(url,'popUpWindow','height=500,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=no')
}
</script>
#if ($ewUser.isInGroup("Customer"))
<li id="Supportchat"><a href="JavaScript:newPopup('#ew_chat("46326e7a79564f5a3271376f4257786b5945344e46413d3d")')">Chat With Support</a></li>
<li id="Saleschat"><a href="JavaScript:newPopup('#ew_chat("4e773175324f65514f64376674436a546c476e366f413d3d")')">Chat With a Sales Rep</a></li>
#end
#if ($ewUser.isInGroup("Guest"))
<li id="Saleschat"><a href="JavaScript:newPopup('#ew_chat("4e773175324f65514f64376674436a546c476e366f413d3d")')">Chat With a Sales Rep</a></li>
#end


This will provide two different chat sessions for users in the Customer and Guest group - those who are in the Guest group will only see the Sales Chat option. This setup requires that you have set up a second chat definition in the Chat wizard at Setup > Chat and have copied the SessionHash number in the #ew_chat() macro for the appropriate chat definition.

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:

 Menu.htm example
jQuery(document).ready(function($){
$("li.submenu").hover
( function(){
$('ul', this).css('visibility','visible');
$('ul', this).css('position', 'absolute');
},
function(){
$('ul', this).css('visibility','hidden');
}
);
$("li.submenu ul li").hover( 
function(){
$(this).css('background','#5F76A3');
$('a', this).css('color', 'white');
},
function(){
$(this).css('background','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:

 List item example
<li id="submit" class="submenu"><a href='#' style="cursor: default">New Ticket</a>
<ul>
<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>
#end
</ul>
</li>

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

 Style.css example
#menu li.submenu ul { 
visibility: hidden; 
list-style: none; 
margin: 0;
padding: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)'>$text.eui.login.name.text2</a>
  2. Add the following code, following the logout link:

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

    #if($request.getParameter("language"))
    #ew_locale($request.getParameter("language"))
    #end

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>