DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Protect Your Invariants!
  • Build Live Video Mobile Apps With Flutter
  • Using Machine Learning To Detect Railway Defects
  • Java Threads: Are They Memory Efficient?

Trending

  • New Free Tool From Contrast Security Makes API Security Testing Fast and Easy
  • Decoding the Differences: Continuous Integration, Delivery and Deployment
  • Message Construction: Enhancing Enterprise Integration Patterns
  • Unleashing the Power of Microservices With Spring Cloud

How to Add a Custom Floating Frame In SugarCRM

Let's look at a tutorial that explains how to add custom floating frame in SugarCRM and also explore telephony Integration scenarios.

Shikha Chaudhary user avatar by
Shikha Chaudhary
·
Updated Sep. 19, 18 · Tutorial
Like (2)
Save
Tweet
Share
5.01K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Frame (networking)

Opinions expressed by DZone contributors are their own.

Related

  • Protect Your Invariants!
  • Build Live Video Mobile Apps With Flutter
  • Using Machine Learning To Detect Railway Defects
  • Java Threads: Are They Memory Efficient?

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: