Preview API allows the user:

  • to call the preview of an object or a collection of items

  • to add custom extensions to be included in a preview

  • to perform specific actions

  • to invoke "popinfo" of specific elements

  • to determine the elements which are to be shown immediately, and those to be shown after a specified amount of time

  • to choose which template has to be shown for each object type.

First, we are going to see how to configure the preview.

Preview configuration

As everything else in the Webclient, preview can be configured via the configuration file. The following example contains a complete example of preview configuration.

<preview>
    <options>  (1)
        <lazyLoadDelay>500</lazyLoadDelay>
    </options>
    <template type="image">picture.html</template>
    <template type="pdf">picture.html</template>
    <template type="graphic">picture.html</template>
    <template type="wirestory">story.html</template>
    <template type="wirestory::editor">story.html</template>
    <template type="eom::folder">folder.html</template>
    <template type="eom::compoundstory">story.html</template>
    <template type="eom::compoundstory::editor">story-editor.html</template> (2)
    <template type="eom::story">story.html</template>
    <template type="eom::story::editor">story-editor.html</template>
    <template type="text">text.html</template>
    <template type="eom::webpage">dwp.html</template>
    <template type="eom::mediagallery">gallery.html</template>
    <template type="eom::compoundmediagallery">gallery.html</template>
    <template type="error">error.html</template>
    <template type="regular">default.html</template>
    <template type="web::content">externalwebpage.html</template>
    <template type="web::news">externalwebpage.html</template>
    <template type="web::image">picture.html</template>
    <template type="wireimage">picture.html</template>
    <template type="externalwebpage">externalwebpage.html</template>
    <template type="eom::user">user.html</template>
    <template type="eom::task">task.html</template>
    <template type="eom::task::widget">task.html</template>
    <template type="eom::workflowtask">task.html</template>
    <template type="eom::workflowtask::widget">task.html</template>
    <template type="eom::topicitem">task.html</template>
    <template type="eom::topicitem::widget">task.html</template>
    <template type="eom::mail">mail.html</template>
    <template type="emptypreview">emptypreview.html</template>
    <template type="eom::maps">gmaps.html</template>
    <template type="video">picture.html</template>
</preview>
1 See the following paragraph for a detailed list of all the options.
2 The :: notation is internally used to determine the context of the preview. It is recommended not to change the context, while instead the template can be easily customized.

To each type, a template file is associated. Different types can share the same template file. See 'Preview Templates' section for a detailed explanation on the template creation and management process.

Preview configuration options

  • lazyLoadDelay (number, integer): the number of milliseconds of delay from the first load (transientLoad, see 'Preview Templates' section) and second load (lazyLoad). Default value is 500ms.

  • legacyDocumentPreview (false [default], true): by leaving the default value, the preview html content for stories and galleries will support also offline, system variables and picture desk images. Note that, this change could break the compatibility with some preview customizations. To use the legacy preview, set this option to true.

Preview templates

Templates are stored in the following folder:

{SWING-APP}/app/config/templates/preview

Object previews can be configured outside {SWING-APP}. See the paragraph How to configure object preview in external folder for some tips in how to take advantage of this new configuration option.

Templates file are standard HTML files. For example, let’s include the standard 'story.html' template file.

<load id="content"/>
<load id="userInfo"/>

<p class="preview-title"><%=data.title%></p>
<div class="transientLoad">
  <h4 class="emui-fgcolor-black">
    <strong>Summary</strong>
  </h4>
  <p><%=data.system_attributes.summary%></p>
  <span class="emui-loading">
    <i class="icon-spin icon-spinner"></i>
  </span>
</div>

<div class="lazyLoad append">
  <%=data.content%>
</div>

Preview uses Underscore template engine ( Syntax and docs ).

Within the template, properties of the object can be accessed via the data object.

So, to include the file name, just write:

<%=data.name%>

CSS configuration : transientLoad, lazyLoad, classes and animations

There are essentially 3 zones in the HTML template: preview-title , transientLoad , and lazyLoad .

preview-title appears at the top and usually contains the file name or the title.

transientLoad is loaded immediately, without delay. For instance, when the user navigates quickly within the File Explorer, he only sees the transientLoad.

lazyLoad is loaded after the aforementioned lazyLoadDelay option. If nothing else is specified, the when the "lazy" content is loaded, it replaces the transientLoad . To append the content (instead of replacing), it is necessary to add an "append" class to the html element (e.g. <div class="lazyLoad append"> ).

N.B. lazyLoad should be used to load server-side or custom content. Please see the following Load components section.

Animations

By default, preview elements appear from the bottom up with an animation. Preview configuration supports different delays that can be applied to the various elements. To change the animation delay, add the following CSS classes:

  • emui-transition-delay-100, emui-transition-delay-200, emui-transition-delay-300, emui-transition-delay-400, emui-transition-delay-500 to delay the appearance of 100 to 500 milliseconds.

  • emui-no-animation : to disable animation.

For example:

<load id="content"/>
<load id="userInfo"/>

<p class="preview-title emui-no-animation"><%=data.title%></p>
<div class="transientLoad emui-transition-delay-200">
  <h4 class="emui-fgcolor-black">
    <strong>Summary</strong>
  </h4>
  <p><%=data.system_attributes.summary%></p>
  <span class="emui-loading">
    <i class="icon-spin icon-spinner"></i>
  </span>
</div>

<div class="lazyLoad append emui-transition-delay-400">
  <%=data.content%>
</div>

NOTE: It is recommended to adopt a coherent strategy. Using different delays for different parts is not aesthetically acceptable.

Load components

The load tag is used to load server-side or custom content within the preview. A typical load tag is styled as follows:

<load id="content"/>
<load id="userInfo"/>

The content specified in the load tag is only available in the lazyLoad section of the preview, and can be accessed as follows:

<%=data.content%>
<%=data.userInfo%>

Example of objectInfo usage to get metadata information:

<load id="objectInfo"/>

<p class="preview-title"><%=data.title%></p>
<div class="transientLoad">
  <figure>
    <div data-draggable="true" eom-id="<%=data.id%>" data-type="Image">
      <img alt="" src="<%=data.preview%>" />
    </div>
      <figcaption eom-id="<%=data.id%>" >Loading...</figcaption>
  </figure>
</div>

<div class="lazyLoad append">
<%
	if( !_.isUndefined(data.objectInfo))  {
		var metaXml = $.parseXML(data.objectInfo.attributes);
		var caption = $(metaXml).find("object_info > caption");

		if (caption) {
			$("figcaption[eom-id='"+data.id+"']").text(caption.text());
		}
	}
%>
</div>

Components included by default

Eidosmedia Webclient includes a good amount of predefined components that can be loaded within the preview.

  • dwpLinks: provides a HTML preview of a Webpage. (It makes sense only for EOM::Webpage)

  • gallery: provides a HTML preview of a Gallery. (It makes sense only for EOM::Gallery, EOM::MediaGallery, EOM::CompoundMediaGallery)

  • content: retrieves the text content ( used for EOM::Story, Text, EOM::CompoundStory )

  • objectInfo: retrieves the objectInfo of the current file.

  • userInfo: retrieves the information about the document’s creator.

  • metadata: retrieves the information about the document’s metadata. ( Returns the XML as a string so you’ll have to parse it ).

  • listLinks: lists all the page links ( makes sense only for EOM::Pages, please don’t use outside the provided cases ).

Popinfo

Popinfo are small information panels that appear when the user hovers a specified area. For example:

User popinfo
Figure 1. User popinfo

To call popinfo elements, simply include the data-toggle="popinfo", data-emtype and data-emvalue tags in a HTML element. For example:

<a data-toggle="popinfo" data-emtype="user" data-emvalue="<%=data.creator%>">Hover me</a>

There are three tags to be included:

  • data-toggle="popinfo": standard and mandatory. Please don’t change

  • data-emtype = [user|status] - the popinfo type. At the moment, we are supporting the user popinfo (show in the figure) and the status popinfo, which shows information on the workflow.

  • data-emvalue:

    • for the user popinfo, data-emvalue should contain the user name whose popinfo needs to be shown. (e.g. John, or <%=data.creator%>)

    • for the status popinfo, data-emvalue should contain id of the item whose workflow information needs to be shown (e.g. 0$1.0.226638499 )

Preview extensions

See Preview extensions for further details.

How to configure object preview in external folder

Additional object previews may be made available to Swing application by defining one or more nested components in Swing web context in server.xml. (for further details on Tomcat 9.x Resources configuration, please refer to Resources configuration).

This is an example of the external object preview configuration.

<Context docBase="com.eidosmedia.webclient.web-app"
    path="/swing" reloadable="false">
    <Resources
        className="org.apache.catalina.webresources.StandardRoot">
        <PreResources
            className="org.apache.catalina.webresources.DirResourceSet"
            base="/methode/meth01/extension/previews" readOnly="true"
            webAppMount="/config/templates/previews" />
    </Resources>
</Context>