Managing XMod Templates

Templates constitute one the two components used in creating solutions with XMod. Users enter data in your solution via data-entry forms (see the Manage Forms topic). Once that data has been stored, you need a way to display it to your end-users. That's where templates come in. They describe how you want that data to be presented to the user and usually include HTML (though it's not required) to make the results more pleasing to the eye. Templates come in several flavors (detail, list, and grid), but have one thing in common: they describe how XMod should display a single record. When the template is a list or grid, XMod will apply your template to all records in the list/grid (and will create the HTML necessary to display that list or grid).

 

XMod 4 completely revamps the user interface for managing templates used in previous versions. In this new iteration, we've tried to make the process of creating display templates much simpler while still allowing power users the freedom and flexibility they enjoyed in previous versions. XMod 5 expands on that interface by adding a new Rich Text editor for editing your templates.

Shortcuts:
Starting Panel

General Tab

Template Settings Tab

Item Settings Tab

Editor Tab

 

Starting Panel


When you open the Manage Templates page, you'll see a list of all the templates available for management. If no templates have yet been created, this list will be blank. To the right of the list box you'll see the three actions you can take:

 

 

Below the list you'll see a drop-down list that allows you to choose which editor you want to use to edit the template. This is a new feature in XMod 5.0. You're choices are the Plain Text editor that came in earlier versions and the new Rich Text editor which gives you more of a a WYSIWYG view of your template.

 

Back to Top

General Tab

 

Manage Templates: General Tab

 

When creating or editing a template, you'll be presented with a view similar to the one above. The primary difference is that the Template Type is read-only when you're editing.

 

 

Back to Top

Template Settings Tab

 

This tab is only visible for List and Grid templates. Depending on the type of template you select, your options may differ somewhat.

 

Back to Top

 

Item Settings Tab

Item Settings Tab

 

The Item Settings Tab is only available if you've chosen a List or Grid template type. This tab allows you to adjust the properties for the different components of the template: the Search Bar (which also contains sorting), Header, Footer, Item (each row in the template), Alternating Item (every other row in the template), and Pager (the page navigation control supplied by XMod). You navigate to each component by clicking on the item in the row of tabs directly below the main row of tabs.

 

Most of the components share a styling section that contains many of the styling properties found on the Template Settings Tab:

 

 

The Search Bar Style tab includes the following additional properties

 

 

Each item defines the CSS Class to be applied to a specific part of the Search Bar. Those parts are identified below:

 

Search Bar Components

 

 
The Pager Style tab includes the following additional properties:

 

Pager Style Tab

 

The Pager is shown below, with labels of each component.

 

Pager Navigation Bar

Buttons
Pager Template

The pager template allows you to define how the paging information will be formatted and displayed to the user. You can use HTML and two special placeholders which allow you to position the paging information: {Page} represents the current page and {PageCount} represents the total number of pages.

Info Panel

 

Back to Top

 

Editor Tab

The editor tab is where you actually define your template. Templates are a mix of plain text, HTML, and special XMod tags. The XMod tags allow you to position your data. They also package additional functionality like Javascript-based collapsible panels.

 

XMod 5 comes with two types of editors for working with templates - The Plain Text Editor, which is historically what has come with XMod, and the Rich Text Editor - a new addition starting with 5.0 - which provides you with a more word-processor-like approach to creating templates. The editor you see on the Editor tab is determined by the selection you made on the first page of the Manage Templates page. Each editor is covered below

 

Rich Text Editor

 

The rich text editor is a word processor-like user interface that is integrated with a toolbar for inserting XMod tags.

 

 How Do I Insert XMod Tags? How Do I Insert My Form's Data?

Let's quickly walk through the process of creating an XMod tag, using the tag you'll probably be using the most as you work on positioning your form's data in your template: the <xmod:field> tag

 

  1. Make sure you've selected your form on the General tab. This isn't required but it saves you some typing.

     
  2. Select <xmod:field> from the Template Tag drop down list box and click the Add button.





     
  3. A tag designer will then pop-up for the selected tag. If no designer pops-up, ensure that you haven't blocked pop-ups for the site. The designer will be different based on which tag you select. Here's the tag designer for the <xmod:field> tag.







    All tag designers are formatted similarly. In the left column is the property's name and the right column is where you specify the property's value. Some properties have pre-set values. Others allow you to type in the value. In the case of <xmod:field> if you've selected an associated form (on the General Tab), you'll see a list of all the controls (also called fields) from the form. For details about what each property does, look up that tag in this help file.



     
  4. When you click the "Apply" button, your changes will be inserted into the editor.


  5. Editing or Removing a Tag: First click inside the tag with your mouse to select it. Below the editor, you'll see the tag name in a gray bar. Click that tag name and you'll see options to Remove the Tag and Edit the Tag. Click the appropriate link for your needs.

 

Plain Text Editor

 

Beginning in XMod 4, we've devoted a lot of time and effort into enhancing the editor to make it easier for new users while also preserving the ability of existing users to craft more advanced solutions. XMod tags are generated by selecting them from the "Template Tag" drop down list box and clicking the Add button.

 

XMod 4 also allows you to insert "XMod Constants" into your display templates. These are placeholders that are replaced at run-time by various bits of environmental data. Some examples include: the current time, the current user's ID, the portal's ID, the current user's IP address, and much more. Insert XMod Constants by selecting them from the"XMod Constant" drop down list box and clicking the Add button.

 

Finally, off to the right, just above the editing area, you'll see a Search link. Click that to bring up the Search tool. This tool allows you to quickly find words or phrases within your template, making it much easier to work with longer templates. This tool is new to XMod 5.0.

 

How Do I Insert XMod Tags? How Do I Insert My Form's Data?

 

Let's quickly walk through the process of creating an XMod tag, using the tag you'll probably be using the most as you work on positioning your form's data in your template: the <xmod:field> tag

 

  1. Make sure you've selected your form on the General tab. This isn't required but it saves you some typing.
     
  2. Select <xmod:field> from the Template Tag drop down list box and click the Add button.


     
  3. A tag designer will then pop-up for the selected tag. If no designer pops-up, ensure that you haven't blocked pop-ups for the site. The designer will be different based on which tag you select. Here's the tag designer for the <xmod:field> tag.



    All tag designers are formatted similarly. In the left column is the property's name and the right column is where you specify the property's value. Some properties have pre-set values. Others allow you to type in the value. In the case of <xmod:field> if you've selected an associated form (on the General Tab), you'll see a list of all the controls (also called fields) from the form. For details about what each property does, look up that tag in this help file.

     
  4. When you click the "Apply" button, your changes will be inserted into the editor.

    XMod Editor with the XMod Field Tag Inserted
     

 

Once you've finished creating or editing your template, click the "Save Template" button to save your changes. If you want to start over, click the "Cancel" button.

 

Back to Top