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

Shijin Krishna —  January 18, 2016 — 19 Comments

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 developers@sugarcrm.com 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.

custom/Extension/modules/Cases/Ext/clients/base/views/record/add_note_button.php

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.

custom/modules/Cases/clients/base/views/record/record.js

add_note_button

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.

file_structure

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.

custom/modules/Notes/clients/base/views/quick-create/quick-create.php

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.

custom/modules/Notes/clients/base/views/quick-create/quick-create.js

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.

custom/modules/Notes/clients/base/views/quick-create/quick-create.hbs

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

Feel free to change the style as you wish!

custom/themes/custom.less

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.

custom/Extension/modules/Cases/Ext/Language/add_note.en_us.lang.php

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.

notes_quick_createview

Shijin Krishna

Posts

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

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

  1. 

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

  2. 

    Thanks Shajin for sharing such good development.

  3. 

    Great post! Thank you for taking the time.

    – Julian
    Senior Director, Products
    SugarCRM

  4. 

    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?

    Cheers

  5. 

    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

    $(‘.datepicker’).css(‘z-index’,’20000′);

    just after the line

    “this.$(‘.modal’).modal(‘show’);”

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

    Thanks!

  6. 

    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?

  7. 

    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!

  8. 

    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.

    Thanks!

  9. 

    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?

  10. 

    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?

  11. 

    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.

      Thanks!

  12. 

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

  13. 

    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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s