FRAD: features and screenshots

FRAD allow you to develop application.
An application has a menubar, a theme and a set of modules.
Each module can put items into the application menubar.

A module provide access to a dataprovider (a table or a query) and allow a certain amount of CRUD operation on it, like:

• change wich columns are displayed;
• filtering data using a pre-built system;
• sorting data clicking on a column header;
• searching the data;
• add, modify, display, delete a record from the data;
• display connected data (like a parent item);
• display sub-details data (like child items);

In addition to built-in CRUD operation you can create your own processing functions.

CMS Front Office

This website, www.badpenguin.org, is a FRAD application; the index.php uses the “webpublic” module to display:

• contents from the content database table;
• ATOM and RSS2.0 feed;
• Google sitemap XML;
• Bad Penguin custom theme;

Instead below you see screenshot from the “webprivate” module that is used to handle the admin interface and from a small ERP i developed.

Login screen

Each module can have his own ACL, if you are not logged in and if you don’t have the ACL to access the module then the login screen is displayed. You can notice that the menubar is almost empty in this example.

Module navigation screen

The module navigation screen, click to enlarge it, is very rich of features, i’ve added red number to identify them:

1. since this is the CMS admin module the “CMS” menu appear into the menubar;
2. the filter combo box allow to apply custom filter conditions to the data;
3. the view combo box allow to choose wich column should be displayed in the rendered table;
4. the search box allow to filter data according to your search string;
5. the navigator allow you to move between different pages of data and also display the current page, the last page and the total number of record into the table;
6. the add button is just an example of the “ExtraButton” class, indeed this modules has also the “Preview WebSite” extra button;
7. clicking on an header will allow to sort the data according to the choosed arrow: ascending or descending;
8. mouse row are highlighted with a different color and clicking on a row will bring to a default action, i.e. show detail or edit;
9. each row can have different actions, in this module: delete, detail, preview, edit;
10. this theme has a side box with all the active modules;
11. the “X” button, temporary name ^_, will reset all the filter condition applied, unlike vTiger the filter conditions are persistent when you re-enter modules;
12. since you logged in the “login” menù changed in favour of the “logout” menù;

Into this screenshot all the rows uses the same background, you can customized the row background to show different image or colors according to field values.

The detail screen

The detail navigation screen, click to enlarge it, display the detailed information about a record and all the connected child items:

1. in this example, a small ERP, you can see more modules;
2. this is a breadcrumb navigation that allow you to go back to parent items;
3. the title display the name of the item, in this example it is the product serial number;
4. all the fields are grouped into “tabs”, you can navigate through them clicking on the specific tab or the next (») button;
5. those field allow you to click and go directly to the linked item, for instance you can go directly to the linked product page;
6. this is the tab with child item, into the example we show the order in wich this serial number is involved (there can be more orders for the same product serial number since we handle used items too g);

The accordion detail screen

The detail navigation screen, click to enlarge it, can also use vertical tabs (accordion); this kind of display is usefull if you have a very large amount of fields and tabs that are often unused.

The edit screen

The edit screen display different fields type while editing a record:

1. combo box from database;
2. combo box from static array;
3. spin numeric button;
4. read-only label fields;
5. data-time special fields;

In this screenshot the special field “Keyword density” is used to display wich keyword are used mostly into your textarea with the content of the document (its a CMS example);