ModuleSurfer Grid

From dispage wiki

Jump to:navigation, search

All the SugarCRM and custom modules (with the exceptions of the calendars, Employees, Projects and Reports) are converted into a jQuery grid with ModuleSurfer installed.

Figure 1 is an example of how Contacts module is rendered by ModuleSurfer 1.1 FULL on SugarCRM 6.1.0RC3 Professional.

Modulesurfer contacts.png

Figure 1


Surfing Modules

ModuleSurfer keeps all the SugarCRM functionalities, plus adding new ones.

The main advantage is that such functionalities have been rebuilt in AJAX: this allows to save the time and bandwidth that would be wasted in reloading the entire HTML page each time an action is performed.

All-in-one View

All records can be viewed in one screen thanks to the All-in-one View.

As List View of a module is displayed, a number of records (configurable from Rows retrieved on scrolling option) is retrieved. Records are initially loaded until the visible area of the grid window is entirely covered. Then, as the vertical scrollbar is moved to a position where an empty space becomes visible, that empty space is filled with another load of records.

The goal of this method is to minimize the page loading latency.

Modulesurfer grid all one.png

Figure 2

Paged View

(FULL) View mode can be switched to Paged View by clicking the Auto Load button of Layout Customization Panel.

If activated, Paged View allows to view records in pages. Number of records per page can be set from Rows per page option.

Modulesurfer grid paged view.png

Figure 3

Page navigator at the bottom center of the grid can be used to move across pages.

Grouping by a column

(FULL) This is a new feature which has no match in the SugarCRM ListView: records can be grouped by any column in a click.

To group or ungroup by a column, click the Group or the Ungroup icon on the left of each column header.

Modulesurfer grid group.png

Figure 4

Once records are grouped by a column, each group can be expanded/collapsed with the Expand/Collapse icons on the left of the grouping value.

Modulesurfer grid collapse.png

Figure 5

To expand/collapse all the groups at once, click the All Groups button on the bottom left of the grid.

Sorting by a column

Column whose values are eligible to be sorted by are marked with two sort arrows on the right of their headers.

Click the arrows or anywhere in the column header (except the grouping icons) to sort by that column.

Modulesurfer grid sort.png

Figure 6

Sorting and Grouping actions may be combined as in Figure 6 to better fit any reporting requirement.

Filter Bar

(FULL) A Filter Bar is available below the column headers to filter records.

It is an alternative method to the SugarCRM Basic / Advanced Search that allows to quickly filter the result set without reloading the page.

Modulesurfer grid filter.png

Figure 7

Input fields of filter bar are different according to the input type:

Filtering may be combined with Sorting and Grouping as shown in Figure 7.

To clear the filter values and then refresh the recordset, click the Clear Filter button in the bottom bar of the grid.

Filter Bar may be toggled from the Toggle Filter button on Layout Customization panel.

Refresh recordset

This bottom-bar button can be used to reload records without having to reload all the page.

Modulesurfer grid refresh button.png

Figure 8

The current grouping, sorting and filter parameters are kept after reloading. To reset filter parameters, use the Clear Filter button described in the previous section instead.

Disable ModuleSurfer for this module

User can decide to enable/disable ModuleSurfer for any specific Module by checking this option at the bottom of the grid.

Modulesurfer grid disable modulesurfer.png

Figure 9

From 1.1 release, each user can set/unset this option independently from the others.

CRUD Interface

Easy Forms

(FULL) A practical alternative to SugarCRM EditView is the ModuleSurfer Easy Form: the advantages of Easy Forms are the ease of use and the time/bandwidth saving.

Easy Forms are JavaScript prompts including all the fields (visible or hidden) of the module ListView, except the fields with the Editing property set to Deny. Administrator can configure SugarCRM and ModuleSurfer to include a field in the Easy Form and exclude it from the grid: to achieve this, the field must be added to SugarCRM ListView Layout of that module and must be hidden with the ModuleSurfer Hide option.

User can enter field values in Easy Forms from the same type-specific inputs that he uses while Inline Editing.

Modulesurfer grid easy form.png

Figure 10

Adding new Records

(FULL) Click the New button in the bottom bar to create a new record through an Easy Form.

Modulesurfer grid new button.png

Figure 11

The just-created record is immediately available in the grid without reloading all the other records, saving time/bandwidth one more time. If some error occurs during the field creation, an error message appears in the form and the related SugarCRM error screen is displayed in a popup window.

Editing Records

(FULL) Click the Edit inline icon in the Actions column to edit the corresponding record from an Easy Form.

Modulesurfer grid edit icon.png

Figure 12

Easy Forms can also be used to navigate records with the navigation arrows at the bottom left of the form or by pressing the up/down keyboard arrows. As in Adding new Records, any error messages that might occur on saving are reported in the form and detailed in a popup window.

If the Ask before saving form option is enabled, a confirmation is required to the user before submitting changes.

Selecting Records

ModuleSurfer allows to select multiple records exactly like in SugarCRM ListView.

Records can be selected one-by-one by checking the selector checkboxes in the column on the left of the grid. A "Select All" checkbox is located in the header of the selector column: if checked it selects all the loaded records. This means that it checks all the records that have been loaded in the grid if in All-in-one view, or all the records in the current page if in Paged View.

Modulesurfer grid select records.png

Figure 13

More selection actions are available in the Select Records prompt that appears clicking the "more" icon on the right of the "Select All" checkbox:

Link to Edit View

Records can be modified from the classic SugarCRM EditView page, too.

Even multiple pages can be opened at one time: it is enough to check the selectors of the records to edit and click the Edit button in the bottom bar.

Modulesurfer grid edit button.png

Figure 14

In BASIC version, EditView can also be accessed from the Edit inline icon placed in the Actions column of each record.

Quick View Records

(FULL) Click the View inline icon in the Actions column to quick-view the record.

Modulesurfer grid view icon.png

Figure 15

Records can be navigated by clicking the navigation arrows or the up/down keyboard arrows exactly as on Editing.

Modulesurfer grid quick view.png

Figure 16

Link to Detail View

Classic SugarCRM DetailView can be accessed by clicking any link in the grid: Name fields are linked to the Detail page of that record; Related fields are linked to the Detail page of the related record.

To open multiple detail pages, check the selectors of the corresponding records and click the View button.

Modulesurfer grid view button.png

Figure 17

Delete inline icon

(FULL) Single records can be deleted clicking the Delete inline icon in the Actions.

Modulesurfer grid delete icon.png

Figure 18

These icons can be disabled from the Disable Delete from "Actions" Column option.

Delete multiple records

Multiple records can be deleted at one time by checking their selectors and clicking the Delete button in the bottom bar.

Modulesurfer grid delete button.png

Figure 19

Inline Editing

Inline Editing is another ModuleSurfer key feature.

Field values can be modified inline, from the grid itself, simply clicking them. This is a great time saver, especially if only few fields at a time needs to be changed: instead of loading Edit Page, Detail Page and then again List Page, only an AJAX message of a few bytes is sent/received from the server.

If the Ask before inline saving option is set for a field, user is asked to confirm the update of the value before permanently saving the change.

All the main SugarCRM field types can be inline-edited:


Name fields in Leads and Contacts module are splitted into First and Last Name fields while editing.

Modulesurfer grid inline name.png

Figure 20


Text fields are changed into input fields (Figure 21), whereas TextArea fields are converted into Textareas (Figure 22).

Modulesurfer grid inline text.png

Figure 21

Modulesurfer grid inline textarea.png

Figure 22


Emails can be entered from a common text field: before updating an email field a format checking is performed.

Modulesurfer grid inline email.png

Figure 23


Enum and User fields can be selected from a dropdown.

Modulesurfer grid inline dropdown.png

Figure 24

Multiple fields

MultiSelect fields are turned into multiple selection dropdowns.

Modulesurfer grid inline multiple.png

Figure 25

Number / Currency

Input is also supported for all Number and Currency field types. Each type has its own specific format that is checked before updating.


Date fields can be entered from a date picker.

Modulesurfer grid inline date.png

Figure 26


A datetime picker widget is available for Datetime fields.

Modulesurfer grid inline datetime.png

Figure 27


When a Relate field is clicked, a popup opens to select a record from the related module.

Modulesurfer grid inline relate.png

Figure 28


Checkbox fields are displayed with Yes/No labels, and can modified from a checkbox.

Modulesurfer grid inline checkbox.png

Figure 29

Secure Access

ModuleSurfer provides SugarCRM Administrators a set of features to manage the secure data access. These features, among the others, interface with SugarCRM ACL permissions that are selected from Roles Admin Section.

Read Access

A user must have the List View permission on a module to access to ModuleSurfer grid, exactly like the corresponding SugarCRM ListView page.

Write Access

(FULL) If a user has no write access to a certain field, it has the same effect on that field as editing permissions set to Deny.

This setting overrides both the Editing property, specific for each field, and the Default behaviour on Editing global option.

Integration with SugarCRM

ModuleSurfer integrates with all SugarCRM features.

This is to avoid that the user is forced to switch between ModuleSurfer and classic SugarCRM ListView, which would reduce the ModuleSurfer advantages in terms of saving time/bandwidth.

Default SugarCRM Actions

Default SugarCRM Actions are available from the Actions link on the top left of the grid, like in SugarCRM ListView.

Modulesurfer grid sugarcrm action.png

Figure 30

Basic / Advanced Search Filter

Basic and Advanced Search filters (and also the Enhanced Search ones) can be used in conjunction with ModuleSurfer: the result is that, as expected, records are filtered according to the performed search.

NOTE: If the Filter Bar is used together with any other Filter, only the Filter Bar is applied and the Basic / Advanced Search parameters are ignored.

dispage support