How to Create GroupDocs Viewer Plugin for Contao CMS

This article explains the basics of creating a plugin for the Contao CMS using the Contao Viewer plugin as an example. You can download the completed plugin from Contao.

Requirements

  • Contao CMS
  • PHP 5.3
  • JavaScript

Preparation

To create a GroupDocs Viewer plugin for Contao CMS:

  1. Install Contao CMS. The installation of this CMS is a simple.
  2. Allow GroupDocs <iframe> to appear go to Admin > Setting > Security settings > Allowed HTML tags and just add <iframe> at the end.
  3. Create a folder to hold future plugin files in the root/system/modules directory of the Contao CMS installation and name it groupdocs_viewer.

Creating the Plugin

This plugin adds a button to the Admin side of the CMS above the editing block of any article. When users click the button a dialog appears. Here, users enter the file GUID from their GroupDocs account to embed and iframe with this file.

OK. Let's start creating a Viewer plugin. All operations are in the groupdocs_viewer folder.

First of all, create a ModuleGroupdocsViewer.php file. This file will contain the plugin's installation and uninstallation logic. Enter this code into the file:

The Code Line by Line

Let's take a look at the code we inserted.

The first line

says that if TL_ROOT has not been defined, the user can't access the file. This line must be in all plugin files as first line.

The next, commented, block contains information about the plugin.

Now create a basic class of our plugin which will extend the Contao CMS's Module class. This is necessary for Contao to understand that this is a module and give us access to the CMS's functions.

That creates the class. Then we have the magic that installs and uninstalls the plugin. For this purpose we create some functions. All code explanations are on the same lines of the code in the section below.

So far, we've created the basic plugin file but the plugin doesn't do anything yet. So let's add some functionality.

Completing the Plugin Declaration

Before adding functionality to the plugin, we need to set up some files and file structures.

  1. First, create a Template folder and add an empty template file to it. The Contao CMS will write data that we declare for the template to this file. The file name for is mod_groupdocsviewer - the same that we called our protected variable.
  2. Create a languages folder in the plugin's root folder and, in this folder, create one an en folder. In the enfolder, create two files which will contain a string declaration of all titles and messages for our plugin.

modules.php

The first file is named modules.php and contain basic data such as the plugin name:

As you can see, even in language files there has to be a plugin info block and a line of code that limits access. So in this file we have only one line of code which declares an array with the plugin name and transfers it to the CMS's global data.

tl_gdv.php

The second language file is named tl_gdv.php and contains all local names, titles and messages for our plugin:

Remember that all data is declared as arrays and transferred to the CMS's Global arrays. Also in this file we have JavaScript code which gets a list of sidebar elements and adds links to our plugin details:

You must write the JavaScript code as a simple text by using the 'echo' command. Also in this language file we declare all dependences and includes such as icons etc. That's the last step of the plugin declaration. Now we will add some useful functionality.

Adding Functionality

    1. Create three folders: html, config and dca.
    2. Place an icon .gif file, 16x16 pixels, in the html folder. That's all we need to do with the html folder.
    3. In the dcafolder, create two files:
        1. .htaccess
        2. tl_gdv.php

htaccess

That's all. This code gave access to this folder from ather web pages of Admin side where user can bee.

tl_gdv.php

The code for the second file:


This second file is a copy of the language file with the same name - tl_gdv.php. We do this in order that Contao CMS will have access to this file from any Admin side page where user edit the content of this page.

The Config Folder

The most important and interesting files are placed in the Config folder:

    • .htaccess
    • config.php
    • database.sql
    1. Create these three files in the config folder.
    2. The .htaccess file is a copy of .htaccess file created in the dca folder. We need this file here for the same purposes.
    3. The config.php file contains all the plugin's usefull logic. You'll find the code below.

As you already know, we have the basic plugin info block. Then let's take a look at the code. This block inserts the icon file:

Contao uses the TinyMCE editor so we can use this as the starting point to get the position for where to place our button, and recognize if a user turns on page editing or not. Here is the code:

As I mentioned, we must use JavaScript as simple text and include it to the page by using echo or print commands. This JavaScript receives the button position and creates the button:


We've created a button and added its function. Then we have a function that generates a dialog window and places an iframe in the editor.


That's it. We created a GroupDocs Viewer plugin for Contao CMS.

The Final Plugin

This is the plugin in action:

Plugin structure

Plugin structure

Button

Button

Dialog

Dialog

Iframe

Iframe

That's all for today. See you in the next article.

Share and Enjoy:

    Back to top