User Interface

In this Article we'll learn:

  • Which elements of the Workflow interface are important
  • How the central area is displayed
  • How Editors function in the Workflow

In this article, we introduce the Workflow User interface and the individual elements and their functions. For a detailed description, please continue reading our articles: User Interface Overview, Layout of the Central Area and Editors.

1. Elements of the User Interface

Using the Production Job menu item as an example, elements of the User Interface are described below in overview. The most important elements are:

  • Menu List [1] yellow – This is where the user navigates to various parts of the Workflow.
  • Action Bar [2] magenta – Content in the action bar is context dependant, i.e. only certain options are available based on the menu item chosen.
  • Breadcrumbs [3] green – The breadcrumb displays the"Path" to current page.
  • Filter Bar [4] orange – Filter options are displayed where ever there are lists in the Workflow.
  • Central Area [5] cyan – This area is the "meat and potatoes" of the Workflow. Content is displayed as lists, overview pages and/or selection areas.
  • Footer [6] red – Additional information relevan to the currently selected area, license information and the Workflow version number are visible here.

Figure 1: The Workflow User Interface, showing the Production Job menu item selected as an example.

The Menu List is located on the left side of the screen and contains the main menu items such as Articles, Order, Production Jobs, Automation, Color and Administration, as well as the user picture/avatar of the logged in person.

The menu bar is available in two different views:

  • Standard View (left)
  • Thumbnail View (right)

Figure 2: The Menu List in two forms: Standard View or Thumbnail View.

PMS WebGui :: Color Book

1.2. Action Bar

The Action Bar is located at the top of the screen. It provides access to System Status, Activities, Clear Cache, Logout, and Language. The following display options can be seen within the Action Bar:

  • Status and Activities [7]: The Action Bar provides a clear overview of the System Status and the Workflow server load. Yellow and red numbers attached to the icons indicate errors or warnings that have occurred even if the respective windows are not displayed.
  • System Status [8]: In System Status you can find out the runtime stats for your system and the license status (with or without a maintenance contract) currently in the Workflow.
  • Process [9]: Various Processes can be executed by clicking on their entries/symbols. If there are several possibilities for an Process, they are available in the Process drop-down menu. To ensure that the user knows which element (e.g. Order, Order Item or Print Item) an action is executed, the corresponding descriptions are also displayed in these menus.
  • Flush Cache [10]: If display problems occur in the browser or if the browser is currently using lots of processor power, you can empty the browser cache here. By emptying the cache, the browser requests all content from the server again, which should solve certain display problems.
  • Logout [11]: The Logout button disconnects the logged in user from the system. The login window will appear again and a new session can be opened, this is also possible to login as a different user. Further information can be found in the article: Log in to start the Workflow.
  • Language [12]: The last symbol in the Action Bar is the selection of the user interface language.

Figure 3: The Action Bar of the Workflow.

The footer is located at the bottom of the screen and contains only one active element:

  • The Toggle Side Navigation arrow [14] which allows the user to switch between Standard and Thumbnail View.
  • Copyright Information [15]
  • License Information [16]

Figure 4: The Footer in the Workflow.

2. Elements of the central area

The central area can contain: Overview Pages, various Action dialogs for information acquisition, Settings areas, step-by-step instructions and Lists.

2.1. Page Overview

Overview pages are available for the following menu items: Articles, Orders and Production Jobs. They contain a central area for viewing, managing and editing the information contained in the selected menu item.

There are two distinct areas:

  • General Information – Distinguishable by color, according to the area.
  • Detailed Information – Displayed on a white background.

2.1.1. General Information

Articles

If an Article is selected, the following article-related details are displayed in the General Information area:

  • Name [17] – this includes: the name of the Article, a unique Internal id and an External id, which is used to identify the Article in an ERP system, for example.
  • Info [18] – Displays additional information about the Article.
  • Customer [19] – Name of the company assigned to the Article (can be empty)
  • Collection [20] – If the Article is assigned to a Collection (can be empty)
  • Status [21] – Shows the status of the Article

The tabs below, show detailed information for the Article which are grouped by topic.

Figure 5: The General Information area using an Article as an example.

Orders

There are two levels for Orders: General Information and Order or Order Item Information, where the content of the Order is displayed.

General Information

If an Order is selected, the following order-related details are displayed in the General Information area:

  • Order [22]Name and the Order Number
  • Tags – Displays any Tags assigned to the Order
  • Order Item [23] – The Order Item is separated by a line above it and displays the Order Items contained in an Order. Use the paging arrows to switch between Order Items [24]
  • Due Date [25] – Displays the selected date for which the Order Item should be complete.
  • Status [26] – Represents the status of the Article.

In the tabs below, both the Order or Order Item information is displayed and grouped by topic.

Figure 6: The General Information area of an Order.

Order and Order Item Information

Since an Order can consist of several Order Items and this information can be very extensive, the area for reading the Order and Order Item information is displayed below the General Information area.

Four tabs are displayed:

  • Print Item [27] – This tab displays all Print Items that are assigned to an Order Item. In the tabs [31] below, detailed information for the selected Print Item is displayed in grouped tabs.
  • Report [28] – This tab contains all approval Reports that have been created for Print Items contained in the Order Item.
  • Additional Files [29] – Any additional documents added to the Order Item are displayed here. You can also upload additional documents in this tab.
  • Order Information [30] – While general information about the Order is already displayed in the header area, detailed information about the Order such as Company, Contact Persons, etc., is displayed here. In addition, you can also upload additional documents to the Order.

Figure 7: The Order and/or Order Item information for an Order.

Production Jobs

There are two information levels for Production Jobs: General Information and Production Parameters, where content for the Production Job is displayed.

General Information

When a Production Job is selected, the following production-relevant details are displayed in the General Information area:

Production Job [32] – The Name of the Production Job plus the unique internal ID as well as the external ID, which is used, for example, to identify the Production Job in a leading ERP system.

  • Tags – Displays Tags assigned to a Production Job.
  • Production Date [33] – The date and time of the production.
  • Shipping Date [34] – Displays the shipping date for the Production Job.
  • Status [35] – Displays the status of the Production Job.

In the tabs below, Production Parameters for the Production Job are displayed.

Figure 8: The General Information section of a Production Job.

Production Parameters

In addition to General Information about the Production Job, Production Parameters show more detailed production-relevant information. Information relating to the printing process plays an important role here. The Production Parameters as well as statistical data are split amongst six tabs:

  • Print Item [36] – All Print Items that are used for the Production Job are displayed here. In the tabs [43] below, detailed information for the selected Print Item is displayed in tabs which are grouped by topics.
  • Output Configuration [37] – Here you can select your: Printer, Substrate, Substrate Definition as well as in which quality the output should have. Assigning an Output Configuration is essential for production.
  • Impose [38] – Here you can open the Impose Editor to create impositions from the Print Items in the Production Job. Imposing Print Items is not a mandatory step here. If you want to optimize the amount of printed area for each Print Item than creating an imposition is necessary.
  • User-defined Fields [39] – User-defined Fields that have been created by the uer can be accessed here, User-defined Fields can be created under the Administration menu item.
  • Files [40] – Provides access to all internal files: preview files, impose specs, variable data info, etc. Files under this tab are required when creating impositions for example but can also contain additional files which are relevant for print production.
  • Protocol [41] – The Protocol tab provides information for all processes that have been applied to the Production Job.
  • Print Statistics [42] – Shows ink consumption for the specific job and how often the Production Job has been printed.

Figure 9: The Production Parameters section of a Production Job.

Detailed Information

Depending on the selected tab in the General Information area or in the Production Parameters area of a Production Job, the Detailed Information area will look different. For example, the detailed information of the Print Data tab is described below. Detailed information for specific functions can be explored further in the article Print Data Analysis.

The following information is displayed for the selected Print Item [44] under the Print Data tab [45]:

  • Preview [46] – A preview is displayed below the Print Item Name. individual PDF Page Geometry Boxes and the ImageBox or the Expected Bleed can be displayed under the preview by hovering over the appropriate button.
  • Document Information and User-defined Fields [47] – Displays all the information about this file as determined by the check-in process.

Figure 10: The upper section of the Print Data tab.

  • Production Information [48] – All information that is used for production is displayed.
  • Fonts [49] – This area shows all fonts used in the PDF file including their status.
  • Process Colors [50] – This area displays all Process Colors used in the PDF file.
  • Spot Colors [51] – This area shows all Spot Colors used in the PDF file.
  • Technical Colors [52] – This area shows all Technical Colors used in the PDF file. Technical Colors are omitted in the color calculation for the output and are therefore not printed.
  • Separations [53] – This area shows a preview of all separations from the PDF file.

Figure 11: The lower section of the Print Data tab.

2.2. Action dialogs

Action dialogs almost always consist of a header and an input area:

  • In the header area [54] the name with a short description is displayed.
  • The appearance and layout in the Input Area [55] are context dependent and change based on the requirements of the respective process step. The input area can consist of further setting areas, as shown in the example below using Force Print.

Figure 12: An action dialog using Force Print as an example.

2.3. Lists

In addition to overview pages, information can also be displayed in the central area in the form of Lists. Typical List examples can be seen in Articles, Orders and Production Jobs. However, Lists can also be found in other cases as well in the Workflow.

Figure 13: List view of the central area using the Order menu item as an example.

A List generally consists of: Pagination, the List Header and the Listed Entries.

  • Pagination [57] – Displays the current page of the list from the total number of list entries found. The amount of entries listed [56] on one page can be selected by the user.
  • List header [58] - Displays the column headings. The columns that are displayed in the list, and in which order the columns should be displayed and sorted can be individually set by the user via the configuration menu on the right side of the List Header.
  • List Entries [59] – An entry in the list represents an Order if we are using Orders as an example. Note the arrows at the end of a list entry.
    • Down arrow – If you click on this arrow, the items contained in the Order are displayed.
    • Arrow facing right – If you click on this arrow, a detailed view for the Order Item is opened (when using Orders). A double click on the Order Item executes the same command.

3. Editors

Editors are independent applications that have been integrated into Workflow to create a seamless experience when processing Print Files. The Editors have been developed as independant modular systems which could in theory be integrated into other systems and workflows.

In the Workflow, Editors will be used in the following places:

  • Impose Editor – The Impose Editor is used to create space optimizing impositions for a multitude of print items and production methods, including repeats.
  • VDP Editor (still in development) – Used for attaching variable elements such as: images, text, graphics, color areas, barcodes, QR codes, etc.
  • PDF Editor (still in development) – For cropping or changing the page geometry  and general pdf editing.
  • PDF Approval Editor – (still in development) for adding notes or annotations to an approval report.

The following description of the structure and functionality of specific areas is based on the Impose Editor.

3.1. Impose Editor User Interface overview

The User Interface of the Editor is composed of different areas, which can may change depending on the usage. A distinction is made between the following areas:

  • Work Area [64] green – Shows the Artboard(s) as a grey rectangle on a white mounting surface. This is where the imposition takes place.
  • Toolbar [63] cyan – Here you will find all the tools that are available to you in the Workflow.
  • Header [60] yellow The header is used to select the Impose Mode with an Impose Template and the size of the Artboard.
  • Settings Area [65] magenta – Here all relevant settings for the imposition can be entered here.
  • File Manager [61] blue – The File Manager allows you to select individual or multiple print items from either Articles, Orders or Production Jobs.
  • Footer [62] red – Displays status information as well as various boxes and be enabled or disabled.

Figure 14: The Impose Editor using Nesting Mode.

3.2. Work Area

Every editor has at least one workspace where Print Items can be attached, created or modified. Depending on the situation, the work area can have different names and can be also be displayed differently based on the editor selected. Keep in mind that you may encounter several work areas depending on the situation.

In the case of the Impose Editor, we refer to the work area as the Work Area [64].

3.3. Toolbar

The tools that are available in the editor are summarized in the Toolbar [63]. Depending on the Editor selected, the toolbar can be equipped with various tools.

In the Impose Editor, the toolbar is located on the left side of the work area. There are 10 tools available.

3.4. Header

Settings, additional functions or selection lists within an editor are offered in the Header [60]. Different features are displayed based on the Editor selected.

The following functions are available in the Impose Editor:

  • Impose Mode – This allows you to switch between Manual and Rule-based Impose Modes.
  • Impose Template – This option allows access stored templates based on the selected Impose Mode.
  • Display Quality – There are two choices here for the display quality in the Impose Editor.
  • Help – A help dialog including all the shortcuts you can use in the Impose Editor is displayed here.
  • Output files used by the Impose Editor – Provides access to all files needed for the Imposition including: the Impose Preview png, PDF Preview, and the Impose XML file.
  • Sheet Configuration – Here you can enter the size or margins for the Sheet Configuration.
  • Imposition Warnings – Here the user is shown possible warnings or errors that have occurred in the Imposition.
  • Width and Height – You can quickly change the height and width of the current sheet or automatically crop it using the Trim to Height/Width options.
  • Artboards – Use this option to select to select or add an additional Artboard. A sheet can consist of any number of Artboards.
  • Save – Saves the current state of the Imposition. This creates a PDF with the current Imposition and a preview image in the background.

3.5. Settings area

If settings can be made in the Editor, they are offered in the Settings Area [65]. Settings are almost always displayed in the form of panels. If there are a large number of settings or selection options available, panels must also be distributed over several tabs.

In the case of the Impose Editor, four tabs are available, we are using Nesting Mode as an example:

  1. Artboard Settings – This area is divided into three panels. These are:
    • Settings – Here you can define the Margin and the alignment orientation as well.
    • Nesting Options – Here you can specify the alignment, arrangement, filling, rotation and distance between the Print Items to be used for Nesting.
    • Bleed – Select the Bleed to be used for Print Items in the Nesting.
  2. Print Items – Lets the user enable or disable Print Items placed in the imposition, as well as specify the number of copies and scale per Print Item.
  3. Marks – Allows you to add Printing Marks, Captions, Grommets and Lines.
  4. Finishing – Add a Dieline and a Cutter which can also be saved in a template.

3.6. File Manager

The File Manager [60] a special area available for the Impose Editor, can be used to access Print Items in the Workflow without having to leave the Impose Editor. Print Items can be individual Articles, Print Items from an Order or Order Item or even Print Items from a Production Job.

3.7. Footer

Depending on the selected Editor or workspace, the Footer area displays important information which allows the user to determine if the current imposition needs adjustments or contains dimensional errors, etc.

In the Impose Editor, the Footer [62] displays the following information:

  • Impose Information – Here you can see the number of Print Items, the Sheet Size which includes the Area and the Printed Area.
  • Display – When working with the Impose Editor it can be helpful to display specific parts of the imposition or Print Item. If you require that a certain area should be displayed, the respective letter must be selected. The following areas can be displayed:
    • IB – Displays the ImageBox (Final or Trimmed format) in green for each individual Print Item.
    • IB + B – Displays the ImageBox plus Bleed (production format) in blue for each individual Print Item.
    • M – Shows the Margin that is applied to the Sheet.
    • A – Displays all Artboards in red.
    • S – Displays the Substrate as a gray surface.
    • PD – Indicates the printing direction for the sheet using black arrows.
    • P – This enables or disables the Preview for Print Items.