Editing with Webdav - Documentation topics on: css,css/js editing with webdav,editing,js,vtl,webdav,.

Editing with Webdav

DotCMS supports WebDAV, which allows you to edit text, css, js and vtl files from your favorite text editor.

When Should I Use a Webdav Connection?

  • Any time you are uploading more than one or two files at a time
  • Editing .vtl files that are being parsed from widgets, containers, templates, etc. Editing .vtl files thru webdav allows webmasters to use their favorite local text editor to work on any HTML/CSS, Velocity, Javascript or any other programming code file of moderate length/complexity that will need to be revisited/revised repeatedly for testing/quality assurance.

What are the Advantages of Using a WebDAV Connection?

  • Repeated code file changes can be made much faster than re-opening the CSS, Javascript, HTML/Velocity files on the backend of dotCMS
  • Open and saving files directly to dotCMS from your favorite web editor makes modifying/updating existing files much faster and easier
  • Mass file uploading/replacement is faster and more efficient
  • Multilingual file uploading is supported - see the Uploading Multilingual Files via WebDAV documentation.

Files that have been uploaded to the dotCMS file system are easily edited by opening them from the Site Browser tab. However, many webmasters may prefer to work on more complex file types, such as CSS, Javascript, Velocity/HTML (.vtl), files in their own preferred local editor than on dotCMS.
The WebDAV documentation shows how to establish a webdav connection on a Windows, MAC, or Linux OS environment.

Tutorial: Editing .vtl Files Using Webdav

This tutorial assumes you have already completed the Creating a Simple Dynamic Listing tutorial and the Parsing a .vtl File tutorial. In this tutorial you will edit the SimpleStaffListing.vtl file you created in the previous tutorials via a WebDAV connection.

  1. In Finder on OS X, select “Go” and “Connect to Server” (On PC use a third party WebDAV client such as Cyberduck)

  2. Address the complete path to the domain of your dotCMS managed site using the following format: “http://{yourdomain.com}/webdav/{live or working}/{languageid}“. The live parameter will publish the file(s) - as long as the user has permissions to publish. The working parameter sets up a connection that attempts only to save the file(s) in draft state.
    The language id should be a whole number that represents the language identifier you'd like to use to upload files of that language version. Ex: English = 1, Spanish = 2, etc.
    The image below shows the “Live” (publish) webdav connection for the default language (English=1), version:

  3. Sign into your demo starter server with the default starter site admin user (U: admin@dotcms.com / P: admin)

  4. Brows the directory tree to find the “SimpleStaffListing.vtl” file you uploaded in the Parsing a .vtl File tutorial

  5. Open the “SimpleStaffListing.vtl” file using your preferred text editor

  6. Now add the following styling code to your text file to 3 column format the content

        -moz-column-count: 3;
        -moz-column-gap: 1em;
        -moz-column-rule: 1px solid black;
        -webkit-column-count: 3;
        -webkit-column-gap: 1em;
        -webkit-column-rule: 1px solid black;
    #foreach($Staff in $dotcontent.pull("+contentType:Staff +(conhost:48190c8c-42c4-46af-8d1a-0cd5db894797 conhost:SYSTEM_HOST)",10,"Staff.lastName"))
      <div id="staff-listing">
        <h3>$!{Staff.lastName}, $!{Staff.firstName}</h3>
  1. Save your .vtl file, and then visit your Staff Listing page. The style changes are not reflected and re-edits can continue to be made as long as you have a valid WebDav Connection to your file.

A Webdav connection can be used to manage the uploading/downloading of files to and from a dotCMS server, as well as managing edits to text based files, including .vtl file types. Even Sass and Less files controlling theme styling can be edited and changed via WebDAV as well, which will clear caches and reflect changes on the next page reload.