Table Of Contents

Previous topic

An Extension Module Example

Next topic

Uninstall Module

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)