Asset Previews in Web UI

Full-screen previews of image assets, PDFs, Microsoft Office documents, and video files are available in two locations in Web UI: the Asset Preview Screen and the Asset Representation component. The Asset Preview Screen is used to view previews of referenced assets linked to product object nodes. The Asset Representation component provides these previews when viewing assets themselves.

Important: Refer to the Considerations and Limitations section at the bottom of this topic for important information.

Asset Preview Screen

The Asset Preview Screen supports configurable and enhanced asset previewing capabilities such as full-screen image previews and scrollable previews of Office and PDF documents, as well as viewable previews of video files. The types of references displayed on this screen are configurable in the designer by admin users. It is typically configured as a Sub Screen Tab Page on Node Details pages for product objects.

The below screenshot shows a sample Asset Preview Screen and the preview displayed when viewing image assets. Linked assets are displayed as thumbnails in the left-hand panel. The sizing of these thumbnails is controlled by selecting one of the three thumbnail size selector icons that appear below the thumbnails. When a thumbnail is selected, a larger preview of the asset appears in the right-hand panel. Below the asset preview, a configurable selection of description attributes that are valid for the selected asset object type can be added.

Using the Asset Preview Screen

To navigate between assets, click on the left and right arrow icons directly beneath the asset preview in the right panel. Alternatively, you may use the left and right arrow keys on your keyboard.

To resize the preview, move the horizontal drag handle below the preview up or down, and/or move the vertical drag handle left or right. To view a full-screen preview (pictured below), click on the 'full screen' icon below the preview.

Previews of PDF, Microsoft Office, and Video Files

Previews of PDFs, Microsoft Office documents (Word, PowerPoint, and Excel), and video files (such as MP4s) work in the same fashion on the Asset Preview Screen as previews of standard image assets, though with additional dynamic functionality.

First-page thumbnails for MS Office and PDF documents display in the thumbnail gallery in the left-hand panel. For Excel, the thumbnail representation is of the first sheet of the workbook. Selecting a thumbnail will generate a larger preview of the first page / first sheet in the right panel. Pictured below is a preview of a PDF document.

Click the full-screen icon below the asset to view a full-screen readable and scrollable preview of the entire document. Click outside of the displayed item or on the X button in the upper right corner to close the image.

Video files display a generic thumbnail and right-panel preview, but once the magnifier icon is clicked, the video displays in a full-screen, playable preview.

Creating an Asset Preview Screen

In order to create an Asset Preview Screen, a new screen must be created using the Asset Preview screen type.

1. Open the Designer and click on New. An Add screen dialog displays.
2. Select Asset Preview Screen from the list, then enter an ID for the new screen in the Screen ID field. (In this example, the ID provided for the screen is Asset Preview Screen.)

3. The Asset Preview Screen Properties dialog displays.

4. In the Asset Details field, click Add... to launch the Select Node(s) dialog for attributes and attribute groups.

5. Browse to or search for the metadata attributes or attribute groups that you would like to display beneath the asset preview in the right-hand panel. (Typically, these will be system attributes such as asset.size, asset.extension, and asset.filename, as shown in the following screenshot.) Hold Shift or Ctrl to multi-select while making your choices.
6. Click OK to complete and close the Select Node(s) dialog.

7. In the mandatory References Types field, click the Add... button to launch the Select Node(s) dialog for choosing the reference types.

8. Browse to or search for the asset reference types that you would like to display on the Asset Preview screen. Hold Shift or Ctrl to multiselect while making your choices.
9. Click OK to complete and close the Select Node(s) dialog.
10. Leave the Show Title parameter enabled if the Asset Preview Screen should display the title. Disable the parameter to hide the title and its associated white space.
11. If a title should display, determine if the default title should remain, or if a custom title is necessary. The default title will display as 'Asset Preview' on the screen in the top left corner (an example is shown in step 13)

12. The Asset Preview Screen Properties dialog closes and users can add any needed Actions under the Child Components.

13. Under Child Components, select the actions to display above the gallery of asset thumbnails (left panel of the Asset Preview screen) when assets are selected. In this example, there is the 'Create Collection Action.'

14. In the designer, click Save to save all configurations, then click Close to exit the designer.

Previews Using the Asset Image Value and Asset Mid Sized Components

Asset Representation can also be configured to view large and scrollable previews of referenced assets, PDF, and Microsoft Office documents, as well as playable previews of video assets.

Asset Image Value

The Asset Representation component can be configured to view large, scrollable previews of assets by setting the Pop Up Representation parameter to FULL.

When the asset thumbnail is clicked, the full-size popup representation displays a scrollable preview (or, in the case of a video asset, a playable preview).

Considerations and Limitations

• There is a 50MB Office Preview limit for all Microsoft Office documents, and only the first page used for the thumbnail will convert.
• The Asset Preview Screen can only be used on product object nodes; it cannot be configured to view referenced assets on classification or entity nodes.
• A PDF reader plugin must be activated in your browser in order to display previews of PDFs, MS Office documents, and video files.
• Document previews (regardless of Web UI component) may not always be accurate down to fonts, image placement, etc., but they provide users the option to review the contents of the documents to ensure that they are the correct assets for the product in question.
• Though not strictly required for image previews to function, it is highly recommended to enable asset caching functionality in order to optimize performance when loading screens with large numbers of images. This ensures that the various image sizes used by the preview components are cached and available on-demand. For more information on asset caching, refer to the Event Processors section of the System Setup documentation here.
• Enhanced and scrollable Office document and PDF previews are only available on STEP systems in which a portable version of LibreOffice, the third-party library that STEP uses to generate the previews, has been installed. LibreOffice is not installed as part of STEP, and to use the functionality, customers will need to do their own install of LibreOffice. Users also need the Office Preview (officepreview) add-on component installed on their system to use LibreOffice.

The LibreOffice distribution is approximately 700 MB on Linux and 500 MB on Windows. Because this installation takes up such a large amount of disk space, it is optional. Without the installation, asset previews of Office and PDF documents will function as follows: a plain DOCX thumbnail will display for Word documents and a generic ‘image’ thumbnail will display for PDFs. Limited popup preview functionality will be available for the first page of PDF documents, and configurations can be applied to open PDFs in a new browser tab, but Office documents can still only be downloaded to the users' local computer.

• When using LibreOffice for asset previews, users may experience some Word documents that do not open and/or that do not render exactly like they would render in Microsoft Word. This functionality is for user convenience, and since STEP uses LibreOffice, STEP cannot be guaranteed to make an accurate display of the document as it would look in Word or in print.

• MS Office, PDF, and video assets uploaded to the STEP system before the installation of the LibreOffice patch will not present enhanced previews. Only documents uploaded to the STEP system after the LibreOffice installation will have the appropriate document preview / thumbnail.