Adding a new popup view in Sugar 7.x Record View

Shijin Krishna —  January 18, 2016

Here is a guest post from Shijin Krishna from BHEA, an Elite SugarCRM Partner, and active member of the Sugar Developer community.

Are you interested in posting on the Sugar Developer Blog? Contact with your idea.

In this post we are going to see how we can add a quick create pop-up view for related modules in record view. This idea is taken from Sugar Portal which comes with Sugar Enterprise, Ultimate and Corporate editions. Sugar Portal’s detail view for Bugs and Cases modules includes an action to add a note to the bug or case. In this post, we are going to see how we can create a similar quick create pop up on the base Sugar 7 web client which will be shown at the click of a button.

We will use Cases and Notes modules as our basis.  We shall place a new ‘Add a Note’ button in Cases record view.  This button will be wired to display a pop-up create view for adding notes on the current case record.

The terms modal and popup are sometimes used interchangeably in Sugar 7 codebase and documentation. A modal dialog requires that a user interacts with it before they can continue. In many frameworks such as Bootstrap, modals are implemented as a child frame that “pops up” on the application screen.  In Sugar 7, Drawers are more commonly used than popups.

Adding a new Record View button

The following steps will create a new custom button on the Cases module’s Record View and wire it to a JavaScript callback function. These steps has been taken from Matt’s blog post on Leveraging Backbone Events in Sugar.

Step 1: Insert Button Metadata

We need to add Button metadata to the existing Cases record view using a Sidecar Extension. This defines the Sidecar Event to be triggered as well as the target object for the event.


Step 2: Defining the Sidecar Event to be triggered on click of the button

To define the event to be triggered on click of our custom button, we will override the record view controller for Cases.



Adding a new Quick Create View for Notes Module

Our next step is to create a new custom quick create popup view for Notes module. We will extend our custom view from the Baseeditmodal view.

File Structure

We’re going to create a folder in custom/modules/Notes/clients/base/views/ called “quick-create“. Inside that folder we will create 3 files:

  • quick-create.php
  • quick-create.js
  • quick-create.hbs

Your file system should look something like the following screenshot.


Step 1: Implement the Quick Create View Metadata (.php file)

The following metadata can be modified according to your needs. If you wish to see more fields in the quick create popup then you can add those fields as well to the fields array.


Step 2: Implement the Quick Create View Controller (.js file)

Here is the JavaScript controller for our quick create view. We will extend our view from BaseeditmodalView.


Step 3: Implement the Quick Create View Template (.hbs file)

Below is the Handlebars template for our custom quick create view. We need to add some CSS style for the popup to make it look better. We have added a new CSS class ‘quick-create’ for the modal element so that we can selectively apply new styling to our quick create popup without affecting the style of other modal popups being used elsewhere in Sugar.

The template has a form which contains the fields and buttons defined in view metadata. We have used a book icon in the modal header from FontAwesome. If you are trying this example in any sugar version prior to 7.6.x then you may need to make sure you are using a different FontAwesome class name for this icon. Refer to this blog post for more details.

You can find the available list of icons in Sugar Styleguide accessible from the Administration panel of your Sugar instance.


Step 4: Add custom CSS style for our Popup (.less file)

Feel free to change the style as you wish!


Step 5: Define the display labels for our new UI

Our final step is to define the display label for the custom record view button and for the quick create pop up header.


Step 6: Quick Repair and Rebuild

Finally, you will need to run Quick Repair and Rebuild in order to build your new extensions. You will also need to do a hard refresh of the browser page in order to load the updated JavaScript and CSS files.

After this, you will be ready to use your new quick create popup dialog. Visit the Cases module and click the Add a Note button and you should see a dialog like this one below.


Shijin Krishna


Shijin is a Certified SugarCRM Developer / Instructor. He has been working on SugarCRM platform for the last three years.

30 responses to Adding a new popup view in Sugar 7.x Record View


    Shijin great job , it was really beautiful and well functional , thanks for sharing .


    Thanks Shajin for sharing such good development.


    Great post! Thank you for taking the time.

    – Julian
    Senior Director, Products


    Thanks a lot shijin, as usual it’s a great quality post.

    I still have a few comments though:

    – I used the view to ask the user to enter data before performing a certain action. Do you think there is a way to have a call back function like there is for drawer? So I could go back to record.js with the values of my quick-create fields.

    – One of the input on quick-create is a datepicker. When the field is cliked the calendar appears behind the view, in the record view. Any idea how could I solve this issue?



    Hello Ed

    The saveComplete() (which is being called when the note record saves) method you can use it as a callback method.

    To fixe the datepicker issue you can add the below line


    just after the line


    in the quick create controller. I have updated the code block by adding this line.



    Hi Shijin!

    thx for the tip regarding the datepicker, it works great!

    I’m not sure to understand how the saveComplete() could be used as a call back. I though it would involve more changes in the record.js on the way we’re calling the view, no?


    Hi Ed,

    Could you please tell what you are actually doing with the quick create view and what change you are looking for ? It may help me to suggest something.


      Hi Shijin!

      I have on the record view of module A a custom rowaction. In order to perform this action, the user needs to input a date. The reason why I use your quick-create view is only for the user to input this date. So I call the quick-create view from the record.js of module A, the user inputs the date, clicks ok and then I would like to be able to fetch the date from record.js of module A to continue to perform my action.

      Hope it makes sense! thanks for your help and time!


    You can probably set the date value in this.context object using this.context.set() method before closing the popup and you can get it in record.js using get() method.



    Hello Shijin,

    Thanks for this post. I am really new to sugarCRM. I want to open popup on create view. I am not getting how I can do it. I tried your way but for create view. I am unable to do it. Could you please help me out?


    Hello Shijin,
    Thank you very much for sharing. I would like to know, whether we can achieve the same in SugarCRM 6.5.x version or not. If we can, can you guide us?


    Hi Shijin, I would like to have the same popupview but from a different entry point: in the edit when user clicks on button behind the field. For example, when user clicks on his avatar picture, the pop-up form shows. How would one achieve this?

      shijin1323gmailcom August 10, 2016 at 1:31 am

      Hi Peter,

      You just need to add a new backbone event and you can call the _openNoteModal() method.



    How Can i create custom button on list view of module in sugarcrm 7.x,please help me in this.


    Hi Shijin,
    I followed the tutorial to the T. We are on SugarCRM 7.6.1 Enterprise. I can’t get the modal to work for some reason and the custom.less file seems to throw an exception after deleting the cache.


    Hi Shijin,
    Just wanted to say thanks for this tutorial, it was very useful for me.
    This was also the first time I saw how to create custom buttons without adding their metadata directly on record.php, so thank you for that too.


    This is great working example. I am new to learning sugar development. Can anyone help me to add ‘Assigned To’ field on this popup. User should also be able to add assigned user to the note when this popup comes up.


    I have successfully added the ‘assigned to’ field in popup box. Added following lines in custom/modules/Notes/clients/base/views/quick-create/quick-create.php

    3 =>
    ‘name’ => ‘assigned_user_name’,
    ‘link’ => true,
    ‘default’ => true,
    ‘enabled’ => true,
    ‘width’ => 15,
    ‘type’ => ‘relate’,
    ‘label’ => ‘LBL_ASSIGNED_TO’,
    ‘id’ => ‘ASSIGNED_USER_ID’


    Hi Shijin,

    This is a very written working article. Thank you for that.

    I am trying to use the modal popup in a slightly different use case, where I show the popup when the user edits a record and hits save.
    Is there a way that I could stop the saving process until the modal popup has been successfully saved (A note has been added)



    Hi Nabil,

    Have a look into the validationComplete method of record view.

    validationComplete: function(isValid) {
    if (isValid) {

    Here instead of calling handleSave() method you can call your custom method to open the popup.



      Thanks Shijin for your reply,

      Not sure how can I stop the flow in your solution, as I should not be saving the record unless a case has been submitted.
      I had to use the validation on the record to stop the saving flow until the popup returns a true or false and continue or not the saving.

      Kind Regards,


    Hello Nabil,

    I am not sure whether you have already found a solution or not. But anyway this reply may help others who are looking for something similar to what you are doing.

    1) Call the _openNoteModal() method within the validationComplete() method of record view controller.

    validationComplete: function(isValid) {
    if (isValid) {
    this._openNoteModal(); //this.handleSave();

    2) Make the below change in _openNoteModal().

    var context = this.context.getChildContext({
    module: ‘Notes’,
    forceNew: true,
    create: true,
    link:’notes’, //relationship name

    3) Now make the below change in your quickcreate view.

    saveComplete: function() {

    Hope it helps


    Hi i am storing “var newvar = sessionStorage.getItem(“newvalues”);” on create.js file, I want to pass variable (newvar) to create template (existing Account field value autofetch) kindly help me on this