The dialog element opens up as a modal in order to prompt the user for information or for a response. It forces a decision or a confirmation that needs sign-off from the user. It shouldn't be used for extensive data entries, use forms therefore instead.

When to use a dialog

Not sure if you should use a dialog or a form? As mentioned above, forms are suitable for extensive data entry. Consider using dialogs if the user spends little time on the report and if it requires little screen real estate.


Dialog components

Various types of UI Components can be placed in the dialog container (which is in Jedox actually built as a report):

  • Label and text elements
  • Text input controls, like input field and text area
  • Selection controls, like checkbox, combo box, date picker, radio button, select
  • Icons
  • Links

Dialog attributes

  • Give the dialog an adequate title and group related information.
  • Order the dialog content in a logical manner from a user’s perspective.
  • A label is not a help text - Assign to each field a meaningful label. Labels should be to the point, descriptive and short.
  • If an input element is in an error or warning state, choose a meaningful message for the user.
  • Less is more - try to minimize the number of labels and their corresponding fields to only the necessary.
  • Provide interaction buttons such as “Cancel” and “Save” buttons on user input dialogs to reduce user’s uncertainty when leaving the page or entering data.
  • Avoid scrollbars in dialogs (You'll need to create a frameset in Jedox and set the frame without scrollbars).

Label attributes and alignment

  • All labels should have the same font attributes and should be placed uniformly (and according to the Jedox Measure System).
  • Label should be aligned to the right of the value. Right-aligned labels minimize the gap between label and field so the user’s eyes can scan along one line and which avoids unnecessary eye movements. Keep in mind that label size can vary when translating them into another language.


Simple dialog

Dialog with error validation


Spacing of elements in a dialog

Spacing of elements in a dialog

Dialog Stylesheet

Dialog elements

Definitions Dialog Style

No. Element Text Width Height Background Color Borders
1 Section Header Segoe UI, regular, 12pt, ink (#212A36) - - - -
2 Section Separator - 370px 1px Light Gray (#F5F5F8) -
3 Select Element - single column Segoe UI, regular, 8pt, ink (#212A36) 230px 20px - -
4 Validation/ Error Hint - 230 for one-column element, 110px for two-column element 3px primary red (#DE3618) -
5 Validation/ Error Message Segoe UI, regular, 9pt, primary red (#DE3618) - - - -
6 Label top aligned Segoe UI, regular, 8pt, ink (#212A36) - - - -
7 Input Field - single column Segoe UI, regular, 8pt, ink (#212A36) 230px 20px Light Gray (#F5F5F8), Input Indicator ink (#212A36) -
8 Input Field - two columns Segoe UI, regular, 8pt, ink (#212A36) 110px 20px - -
9 Description Text Segoe UI, regular, 8pt, lightest ink (#919EAB) 230px depends on content - -
10 Checkbox Segoe UI, regular, 8pt, ink (#212A36) - - - -
11 Primary Button Segoe UI, regular, 9pt, white (#FFFFFF) depends on content 22px normal state: primary blue (#057ACE), hover state: dark blue (#094E8A), pressed state: ink (#212A36) Color: no color, border-width:1, border-radius:3
12 Secondary Button Segoe UI, regular, 9pt, primary blue (#057ACE) depends on content 22px normal state: white (#FFFFFF); hover state: lightest gray (#F9FAFB), pressed state: light gray (#F5F5F8) Color: primary blue (#057ACE), border-width:1, border-radius:3

See also