From dispage wiki
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 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 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.
(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.
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.
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.
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.
Sorting and Grouping actions may be combined as in Figure 6 to better fit any reporting requirement.
(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.
Input fields of filter bar are different according to the input type:
- To search for a value of a Text-like field, simply type it in the filter field and the search will starts after a few moments.
- To search for a value of a Enum field, a Checkbox or a Related field linked to Users module, select the filter value from the dropdown in the filter field.
- To search for a Date / Datetime field, select the date from the calendar picker that appears clicking the filter field or manually type it.
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.
This bottom-bar button can be used to reload records without having to reload all the page.
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.
From 1.1 release, each user can set/unset this option independently from the others.
(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.
User can enter field values in Easy Forms from the same type-specific inputs that he uses while Inline Editing.
Adding new Records
(FULL) Click the New button in the bottom bar to create a new record through an Easy Form.
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.
(FULL) Click the Edit inline icon in the Actions column to edit the corresponding record from an Easy Form.
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.
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.
More selection actions are available in the Select Records prompt that appears clicking the "more" icon on the right of the "Select All" checkbox:
- Select this page: selects all the loaded records, like checking "Select All" checkbox.
- Select All: selects all the records in the result set, that is all the records selected with the current SugarCRM Search parameters. Records filtered out by Filter Bar are selected with this action even if they do not appear in the grid.
- Deselect All: reset all record selections.
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.
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.
Records can be navigated by clicking the navigation arrows or the up/down keyboard arrows exactly as on Editing.
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.
Delete inline icon
(FULL) Single records can be deleted clicking the Delete inline icon in the Actions.
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.
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.
Text fields are changed into input fields (Figure 21), whereas TextArea fields are converted into Textareas (Figure 22).
Emails can be entered from a common text field: before updating an email field a format checking is performed.
Enum and User fields can be selected from a dropdown.
MultiSelect fields are turned into multiple selection dropdowns.
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.
A datetime picker widget is available for Datetime fields.
When a Relate field is clicked, a popup opens to select a record from the related module.
Checkbox fields are displayed with Yes/No labels, and can modified from a checkbox.
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.
A user must have the List View permission on a module to access to ModuleSurfer grid, exactly like the corresponding SugarCRM ListView page.
(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.
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.
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.