Layout i386

This example will introduce you to custom layout creation for Vtiger 7.

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 7 should be installed on your server (assuming you are developing the layout for Vtiger 7)

  • 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 7 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>7.0.0</vtiger_version>
                <vtiger_max_version>7.*</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 (v7)