Layout i386
This example will introduce you to custom layout creation for Vtiger 6.
The steps to create a new layout are illustrated through this exercise of building a 1980’s type layout (terminal based UI) for managing Leads in the CRM.
Note
Demo setup - click here (credentials: admin/admin)
Pre-requisites
- Vtiger 6.4 should be installed on your server (assuming you are developing the layout for Vtiger 6.4)
- You must be familiar with content covered in module development docs: Develop Extensions For Vtiger and Internals(on UI)
Terminology
- <vtigercrm> - root-directory / document root where Vtiger 6 is installed.
- http://<vtigercrm> - web entry access.
Note
You can download “i386Layout-v1.zip” from here.
Step 1: Create files
Switch to your working directory (say.. Desktop) and create the following files.
manifest.xml
layouts/i386/libraries/jquery/jquery.min.js
layouts/i386/libraries/bootstra.386
layouts/i386/skins/application.css
layouts/i386/skins/application.js
layouts/i386/modules/Vtiger/Header.tpl
layouts/i386/modules/Vtiger/Footer.tpl
layouts/i386/modules/Settings/Vtiger/ConfigEditorDetail.tpl
layouts/i386/modules/Users/Login.tpl
layouts/i386/modules/Vtiger/dashboards/DashBoardPreProcess.tpl
layouts/i386/modules/Vtiger/dashboards/DashBoardContents.tpl
layouts/i386/modules/Vtiger/ListViewPreProcess.tpl
layouts/i386/modules/Vtiger/ListViewPostProcess.tpl
layouts/i386/modules/Vtiger/ListViewContents.tpl
Step 2: manifest.xml
Edit manifest.xml and fill in basic information required for getting the extension installed in Vtiger.
<?xml version="1.0"?>
<module>
<type>layout</type>
<name>i386</name>
<label>i386 UI</label>
<version>1.0</version>
<dependencies>
<vtiger_version>6.0.0</vtiger_version>
<vtiger_max_version>6.*</vtiger_max_version>
</dependencies>
</module>
Step 3: Basic Files
Overview of files that need to be implemented for basic layout to work.
| File | Description |
|---|---|
| layouts/i386/libraries/jquery/jquery.min.js | recommended. |
| layouts/i386/libraries/bootstra.386 | bootstra.386-latest-v2.zip for 1980’s look and feel. |
| layouts/i386/skins/application.css | our custom styles. |
| layouts/i386/skins/application.js | our ui and data interaction implementation. |
| layouts/i386/modules/Vtiger/Header.tpl | default pre-process template (unless overridden by the view). preamble (<html>...<body> is recommended here) |
| layouts/i386/modules/Vtiger/Footer.tpl | default post-process template. epilogue (...</body></html> is recommended here) |
| layouts/i386/modules/Settings/Vtiger/ConfigEditorDetail.tpl | required to ensure continuity of work after choosing this layout (post configuration edit save from previous layout). |
| layouts/i386/modules/Users/Login.tpl | default view presented when user has not logged in. |
Step 4: Home View Templates
Post Login when a URL visit is made without specific module/view parameter, (module=Home, view=Dashboard) is defaulted. So it is essential to start implementation with linked templates.
| File | Description |
|---|---|
| layouts/i386/modules/Vtiger/dashboards/DashBoardPreProcess.tpl | pre-process template. |
| layouts/i386/modules/Vtiger/dashboards/DashBoardContents.tpl | process template. |
Step 5: List View Templates
Although, our is focus of this layout is around Leads ListView. We are implementing the template files as generic (fallback) in modules/Vtiger.
| File | Description |
|---|---|
| layouts/i386/modules/Vtiger/ListViewPreProcess.tpl | pre-process template. |
| layouts/i386/modules/Vtiger/ListViewPostProcess.tpl | process template. |
| layouts/i386/modules/Vtiger/ListViewContents.tpl | post-process template. |
Step 6: Package files
zip -r i386Layout-v1.zip manifest.xml layouts/
Refer to Package Structure
Step 7: Install in Vtiger
You can import through Module Manager UI.
The layout is now installed and ready, you can set it as default from Configuration Editor
Note
After switching to this layout, in case you would like to revert back - please edit config.inc.php and update $default_layout value to (vlayout)