How Module Layout Works in Joomla

Depending on the needs of the site webmasters may want different ways of displaying the output from your module. This can be accomplished through module layouts. Let's give our webmasters a selection of layouts to choose from.

First let's go to the XML which we have created in earlier tutorial and add an additional field for the configuration.

  1. <field
  2. name="layout"
  3. type="list"
  4. default="default"
  5. label="Layout"
  6. description="Layout to use for displaying places">
  7. <option value="default">Plain List</option>
  8. <option value="ordered">Ordered List</option>
  9. <option value="paragraphs">Paragraphs</option>
  10. </field>

You'll notice a few things, first the name of this parameter is different from the other parameter. This one is called Layout well in the previous tutorial one is called message and this one is a list parameter rather than a text parameter. This is because we want to provide a list of values that the admins can choose from and we don't want them just entering in whatever text they want. We want them to choose just from these values.

  1. default="default"

Next we have a default value that is one of the values that is available from the list, so that way it's already selected and people don't have to worry about setting a value already, it'll just be there.

  1. label="Layout"
  2. description="Layout to use for displaying places">

And then we have a label and a description for the field that will display just like the other parameter.

  1. <option value="default">Plain List</option>
  2. <option value="ordered">Ordered List</option>
  3. <option value="paragraphs">Paragraphs</option>

Finally, we have three options one for a Plain List which is the current layout that we use, and then we have an Ordered List and Paragraph Tags as other options for layouts.

So now let's create tmpl folder into the mod_noidacity folder on the site.

Create tmpl folder

If you go into the tmpl folder you'll notice there is default, ordered and paragraphs and these are the three layouts that we are going to offer webmasters as choices.

three layout files

  1. //default.php
  2. <?php defined( '_JEXEC' ) or die; ?>
  3. <p><?php echo $params->get('message'); ?></p>
  4. <ul>
  5. <?php foreach($rows as $row): ?>
  6. <li><?php echo htmlspecialchars($row->place_name); ?></li>
  7. <?php endforeach; ?>
  8. </ul>

So if you go to default.php it's the same output that we have in the current module. Notice that the defined JEXEC or die statement is still up at the top and this is necessary because this is a php file and we don't want people going directly to this file, we want people to only load this file through Joomla.

  1. // ordered.php
  2. <?php defined( '_JEXEC' ) or die; ?>
  3. <p><?php echo $params->get('message'); ?></p>
  4. <ol>
  5. <?php foreach($rows as $row): ?>
  6. <li><?php echo htmlspecialchars($row->place_name); ?></li>
  7. <?php endforeach; ?>
  8. </ol>

ordered.php is similar except we're putting everything within an ordered list rather than an unordered list.

  1. //paragraphs.php
  2. <?php defined( '_JEXEC' ) or die; ?>
  3. <p><?php echo $params->get('message'); ?></p>
  4. <?php foreach($rows as $row): ?>
  5. <p><?php echo htmlspecialchars($row->place_name); ?></p>
  6. <?php endforeach; ?>

And then paragraphs.php again just cycles over all the records, but this time it puts each of them in paragraph tags rather than as a part of a list.

Now before we attempt to display this on the front end we still need to make one more adjustment. We need to adjust mod_noidacity.php to choose from one of these layouts rather than trying to display all the output itself.

open module noida city

Now replace all the following output content

  1. <p><?php echo $params->get('message'); ?></p>
  2. <ul>
  3. <?php foreach($rows as $row): ?>
  4. <li><?php echo $row->place_name; ?></li>
  5. <?php endforeach; ?>
  6. </ul>

to this require statement this JmoduleHelper call will make it possible for Joomla to select from one of the layouts rather than attempt to do all of the output here from the php file.

  1. require JModuleHelper::getLayoutPath('mod_noidacity', $params->get('layout'));

this will allow us to get all of the output from one of the layouts rather than do it right here in the php file.

Now there is one more thing we want to do before we display this on the front end, we want to go back to the back end and make sure that these values are set, so that Joomla displays them appropriately.

Opening module manager

And now let's go to Know More About Noida City and set this Layout. We have Plain List that's set as the default, so let's just keep it there and click Save and this brings us back to the editing screen. We are going to come back and do some other settings here so, keep this handy.

Plain Text Layout

Go back to the front end and hit Refresh and you'll notice that the Know More About Noida City module still displays the same as it did before.

Plain Text Layout Frontend

Now let's choose one of the other Layouts let's go back and choose Ordered List as one of layouts and hit Save and then go back to the front end and hit Refresh and you'll notice now that the module numbers all of the items that are being output.

Order list in backend joomla

ordered number list

Finally, let's try the Paragraph Tags Layout. Select Paragraph Tags from the list, click Save, then hit Refresh and you'll notice that the same list appears as before only they are in Paragraph Tags, so you have a little bit of clearance between the different items.

With Paragraphs

So module layouts make it possible for us to give webmasters a variety of layouts. Additionally they help separate the presentation of your module away from the data logic. With started out as a simple PHP script is becoming a powerful and flexible reusable mighty module.