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
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.
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.
