How to Add a Custom Floating Frame In SugarCRM

Sugar relies on a single page architecture (SPA) for the Sidecar framework. But when a user navigates across the Sugar application (for example, when switching to another Sugar module) while the page is not refreshed, you will find that the majority of the HTML on the page is still re-rendered based upon the newly selected layout. This is done to not only change the style or configuration of the view (ex. List View → Record View) but also to update the context and configuration for the dashboard panel.

But not everything changes — the footer and header of the application remain fixed so they can serve as navigational anchors for Sugar users. This is an important use case, but there are certainly others.

Telephony Integration Scenarios

A common set of integrations that are built for Sugar involve integrating a phone system for use by customer service organizations. This can vary from simple "click to dial" softphone functionality to full-blown multi-channel call center capability where an agent handles phone, SMS, and e-mail inquiries at the same time.

A typical inbound call process follows:

Step 1) A customer calls support desk with an inquiry

Step 2) The call is routed to an available support agent desktop

Step 3) The agent desktop displays current customer information

Step 4) The service agent handles customer inquiries

Step 5) The interaction details are logged to the customer record

While the call is active, it is typically necessary to have a persistent display of the call's status and caller information. The service agent may need to be able to review CRM data across multiple modules without losing the call's context.

This need is not addressed by customizing standard Sidecar Record or List layouts because they aren't fixed. An alternative could be to open a pop-up window, but that is a pretty crappy user experience.

There are better alternatives. Users expect to be able to work within the Sugar application and this can be accommodated by adding a floating frame to the Sugar user interface that will serve our needs.

Floating Div Action Building Block

We have created a package that provides a prescribed pattern for handling persistent content within the Sugar UI using a floating frame. This frame can be configured to iframe web content from an external system or as a basis for a native Sidecar component. There are multiple SugarCRM telephony integration solutions in the Sugar ecosystem that use variations on this approach.

We will dig into some of the code below.

Footer Contribution via Sidecar Extension

We can add the Call button seen in the screenshot above using a Sidecar Extension for a new custom Sidecar View. We will talk about this new click-to-call view

(ClickToCallView) later.custom/Extension/application/Ext/clients/base/layouts/footer/addClickToCallAction.php

<?php// Copyright 2016 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license.//  Append new View to Footer layout's list of components$viewdefs['base']['layout']['footer']['components'][] = array (    'view' => 'click-to-call',);

The ClickToCallView Toggle Button

The toggle button that appears in the footer is implemented as part of our new custom ClickToCallView within custom/clients/base/views/click-to-call/click-to-call.js and custom/clients/base/views/click-to-call/click-to-call.hbs. Since this Sidecar View is attached to the footer, it will be persistent as the user navigates. We can conveniently use it to manage the lifecycle of our "popup" frame to ensure it is only loaded once. Instead of removing the pop-up frame completely when a user closes it, we will simply hide it from view so that it does not need to be recreated later.

...    events:{  
   //On click of our "button" element        'click   [  
      data-action=open_phone
   ]   ': '   togglePopup',

},
// tagName attribute is inherited from Backbone.js.    
// We set it to "span" instead of default "div" so that our "button" element is displayed inline.    
tagName:"span",
// Used to keep track of Popup since it is not attached to this View's DOM    
    $popup:undefined,
    /**     * Toggle the display of the popup.  Called when the phone icon is pressed in the footer of the page.     */    
    togglePopup:function (){  
        //Toggle active status on button in footer       
        var $button = this.$('   [  
        data-action="open_phone"
   ]   ');        $button.toggleClass('   active');        
//Create popup if necessary, otherwise just toggle the hidden class to hide/show.        if (!this.$popup)   {  
      this._createPopup();
   }   else   {  
      this.$popup.toggleClass('hidden');
   }
},
...

<button data-action="open_phone" class="btn btn-invisible" aria-label="{{str "Call"}}" role="link" type="button">    
    <i class="fa fa-phone icon-phone"></i>
    <span class="action-label"> 
    {{str "Call"}}
    </span>
</button>

The Floating Frame

Sugar does not provide a popup frame component out of the box, so we can create one from scratch with our own Handlebars templates for the HTML and necessary CSS. We also use the Draggable jQuery UI plug-in that is already included with Sidecar to allow users to reposition the frame as they want.