Document Properties
Kbid2575V3
Last Modified11-Aug-2020
Added to KB14-May-2014
Public AccessEveryone
StatusOnline
Doc TypeGuidelines, Concepts & Cookbooks
Product
  • ICM 7.6
  • ICM 7.7
  • ICM 7.8
  • ICM 7.9
  • ICM 7.10

Concept - Dialog

Product Version

7.5

Product To Version


Status

final

1 Introduction

1.1 Glossary

DialogA dialog is an element used to present information to the user or ask the user for information in a separate window. Thereby the information is highlighted against the other parts of the system.
Modal dialogA modal dialog is an element used to present information to the user or ask the user for information in a separate window. Unlike a regular dialog, a modal dialog forces the acting user to interact with the system (e.g., confirm a message, fill in data, ..) before the user can return to the system main window.
Wizard

A wizard is an assistance system used to guide a user through a workflow consisting of multiple tasks. Therefore, a wizard usually consists of multiple dialogs in an ordered sequence.
In contrast to simple dialogs, wizards often provide special functionality on top, e.g.:

  • Navigation from one step to another, forward and/or backward
  • Maybe temporary storage of entered data
  • Request confirmation of the user before a window will be closed ("Do you really want to close that window, your entered data ...")
Light boxA light box is a technical artifact that can display web content to realize dialogs in the Intershop Commerce Management application.

1.2 References

2 Dialog

2.1 Usage

  • Dialogs should be used for one action on one or more objects.
  • As dialogs are modal, no other option can be performed when the dialog is open. The user has no access to data laying behind the dialog (except of viewing).
  • A dialog can be used for:
    • Selection
    • Confirmation
    • Atomic actions, e.g.:
      • Add a widget to a dashboard
      • Delete a promotion
      • Assign a product to a category
  • A dialog should not be used for:
    • Wizards (multi-step actions or processes)
    • Complex actions consisting of several tabs
In some cases where you would use a wizard, it is alternatively possible to use a dialog and offer the contents using expandable sections (accordion effect).
Long running processes should not run in a dialog, but they can be configured and triggered there.

2.2 Attributes

From a business perspective a dialog has at least the following attributes:

AttributeDescriptionSample
titletitle of the dialog (regularly: action on object)
  • Assign Product
  • Add Dashboard
  • Delete Promotion
content

all elements used in the back office can be included as content in dialog


From a technical perspective there exist some more (e.g., z-index, modal), but these are not in focus of this list.

2.3 Behavior

From a business perspective a dialog has the following methods:

MethodDescriptionComment
close

The dialog always can be closed via

  • [ESC] key
  • [x] icon in upper right corner
  • [Cancel] button



move

The dialog optionally can be moved via

  • Dragging the title bar
  • Moving the dialog
  • Drop the dialog

scroll

The dialog usually has no scroll bars (neither horizontal nor vertical).

The dialog optionally can have scroll bars (horizontal and/or vertical).



Mostly it is not recommended to fill up the dialog with masses of data, it would be hard for the user to recognize the relevant information.

Therefore, a dialog that has scroll bars directly after opening must be checked regarding user experience.

There are some exceptional cases possible:

  • Widget library - in this case (select one or more widgets out of a library) scroll bars can be used - because of the size of the library (containing thumbnails of widgets in upcoming versions)

From a technical perspective there exist some more, but these are not in focus of this list.

2.3.1 Buttons

There are two types of buttons that a dialog generally offers:

  • OK
    • Dialog is closed after clicking the button
    • Possible usages:
      • Either selection of data and adding them to the form below (without storing the information) - APPLY is necessary to store the data
      • Or: Storing of data - no APPLY is necessary
  • CANCEL
    • Dialog is closed after clicking the button
    • Entered data is discarded
  • More buttons and their custom actions can be defined

2.3.2 Model

The following figure illustrates the attributes and behavior. This is no confirmed interaction design or visual design, but just a model.

schematic figure

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Customer Support
Knowledge Base
Product Resources
Support Tickets