WebDAV CGI - The Simple View Documentation

Content of this topic:
Back to the WebDAV Documentation page.

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:

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 accesskey="1" tabindex="0" 
        class="home-button action changeuri" 
        data-uri="/afs/.cms.hu-berlin.de/user/$eval@substr($REMOTE_USER,0,1)@/$USER/">
      <div class="label">Home</div>
    </li>
    
Overview of existing page template hooks (template file name pattern: templates/simple/[hook name].custom.tmpl):

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 accesskey="1" tabindex="0"
        class="home-button action changeuri" 
        data-uri="/.cms.hu-berlin.de/user/$eval@substr($REMOTE_USER,0,1)@/$USER/">
      <div class="label">Home</div>
    </li>
    

Example 2: Add a logout button, a contact button, a external link button, and a help button

  1. Create a custom template: vi templates/simple/help.custom.tmpl
  2. Add HTML code to the new template (change href values to your preferred URLs):
    <li class="logout-button" data-href="/logout" role="button" aria-label="$tl(logout)">
      <div class="label">$tl(logout)</div>
    </li>
    <li class="contact-button" accesskey="9" 
        data-href="mailto:contact@mydomain.org?subject=WebDAV%20CGI" role="button" "aria-label="$(contact)">
      <div class="label">$tl(contact)</div>
    </li>
    <li class="link-button" data-href="https://google.com/" data-target="_blank" role="button" aria-label="Google">
      <div class="label">Google</div>
    </li>
    <li class="help-button" accesskey="6" data-target="_blank" data-href="link_to_my_help" role="button" aria-label="$tl(help)">
      <div class="label">$tl(help)</div>
    </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).

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 Service to check your CSS styles.
  5. Ask the author
© ZE CMS, Humboldt-Universität zu Berlin | Written 2011-2015 by Daniel Rohde