# WebDAV CGI - The Simple View Documentation

## About: The Simple View

This is the new default view for the WebDAV CGI web interface. The Simple view uses jQuery and a lot of jQuery plugins for a more convenience user interface. It supports some new interesting features:

- Drag&Drop support: drag and drop files from a window manager to the web interface or files and folders inside the file list.
- AJAX based file actions and folder navigation.
- Simplifies customization of menus and templates.
- Fast client site file list sorting.
- Extension support

## Template Hooks: Add Your Own Sidebar Entries

You can add your own menu entries in the sidebar menu if you create some custom template files. Look for include statements in the page template (`templates/simple/page.tmpl`), e.g.: `$INCLUDE(apps)`

1. Create a custom template `templates/simple/apps.custom.tmpl` to add a new menu entry
2. and add a list item to the custom template (see `page.tmpl` for examples):

       <li title="Home">
         <a class="home-button action changeuri" href="/afs/.cms.hu-berlin.de/user/$eval@substr($REMOTE_USER,0,1)@/$USER/" accesskey="1">
           <span class="label">Home</span>
         </a>
       </li>

Overview of existing page template hooks (template file name pattern: `templates/simple/[hook name].custom.tmpl`):

- `htmlhead` - included in the HTML head tag (for your own script or CSS tags)
- `header` - included in the page header
- `apps` - included after the Files/Folders menu item
- `nav` - included between application and preferences menu
- `pref` - included before views option menu items
- `help` - included before about menu item

### Example 1: Add a Home Button

1. Create a custom template: `vi templates/simple/apps.custom.tmpl`
2. Add HTML code to the new template (change href value to your preferred URL):

       <li title="Home">
         <a class="home-button action changeuri" href="/.cms.hu-berlin.de/user/$eval@substr($REMOTE_USER,0,1)@/$USER/" accesskey="1">
           <span class="label">Home</span>
         </a>
       </li>

### Example 2: Add a Logout Button, a Contact Button, and a Help Button

1. Create a custom template: `vi templates/simple/help.custom.tmpl`
2. Add HTTML code to the new template (change href values to your preferred URLs):

       <li title="Help">
         <a class="help-button" target="_blank" href="link_to_my_help" aria-label="Get Help" accesskey="6">
           <span class="label">Help</span>
         </a>
       </li>
       <li title="Logout">
         <a class="logout-button" aria-label="Logout" href="/logout">
           <span class="label">Logout</span>
         </a>
       </li>
       <li title="Contact">
         <a class="contact-button" href="mailto:contact@mydomain.org?subject=WebDAV%20CGI" aria-label="E-Mail Contact" accesskey="9">
           <span class="label">Contact</span>
         </a>
       </li>

## Template Overlay: Modify Templates

You should not modify an existing view template to simplify version upgrades of WebDAV CGI. It is possible to overlay an existing template file by adding a custom template file.

1. Copy the template file, e.g. `cp templates/simple/page.tmpl templates/simple/page.custom.tmpl`
2. Modify the new template file, e.g. `vi templates/simple/page.custom.tmpl`

## Styles: Modify CSS Styles

The preferred way to change CSS styles:

1. Create the custom template `header`: `templates/simple/header.custom.tmpl`
2. Add a style tag to the custom template:

       <style></style>

3. Add your style changes ...

## Templates: The Features

Take a look at the Simple view templates for examples (`templates/simple/*.tmpl`).

- Include other templates: `$INCLUDE([template name])` (replace `[template name]` with the template name without .custom or .tmpl suffixes)
- Functions:
  - `$config([param])` - include the value of the WebDAV CGI configuration parameter
  - `$eval[sep][Perl code][sep]` - replaced by the return value of the executed Perl code
  - `$cgiparam([param])` - replaced by CGI query parameter values
  - `$env([variable])` - replaced by environment variable value
  - `$each[sep][hash|array variable][sep][template (file)][sep][filter][sep]` - iterates over the given hash/array elements and renders the template for each element ($v, $k can be used in the template for hash keys and hash values)
  - ... take a look at the template files for all others.
- Variables:
  - ... take a look at the template files for variables or into the `renderTemplate` subroutine of the Renderer module (`lib/perl/WebInterface/View/simple/Renderer.pm`)
- IF statement: `<!--IF([Perl expression])--> [HTML] <!--ELSE--> [HTML] <!--ENDIF-->`
- IF statements inside IF statements:`<!--IF#[level]([Perl expression])--> [HTML] <--ELSE#[level]--> [HTML] <--ENDIF#[level]-->` (replace `[level]` by a unique number)

## Troubleshooting

1. Take a look at your Apache error log.
2. Open the Web console and/or the error console of your Web browser.
3. Use the W3C® Markup Validation Service to check the HTML output.
4. Use the W3C® CSS Validation Servcie to check your CSS styles.
5. Ask the author

© ZE CMS, Humboldt-Universität zu Berlin | Written 2011-2015 by Daniel Rohde