The UDD-viewer lets you access all UDD-screens and corresponding documentation (description, design priciples and accessibility principles) in your browser.

The black stripe on the top contains the navigation for the UDD-viewer.

From left:

The close icon hides the info panel (B). Re-open with the menu-icon when closed.
The language dropdown lets the user choose which language should be used in the UDD Viewer. In addition, there is a special "MOCK" language that is used by the development team to determine the maximum length of the various text fields. Shortcut SPACE+L.
The "D01" dropdown lets you choose which UDD you want displayed in the main area (C). You can also open the dropdown with shortcut SPACE+U. Scroll or use the type-as-you-go filter for quick access. The type-as-you-go filter can be used to:
- filter the list of available dialogues by name. Typing "D0" will remove all dialogues except those starting with a "D0".
- filter the list by typing in one of the following tags: "password", "otp", "userid", "auth", "sign", "pay".
The link-icon opens a full-screen version of the current UDD-screen in a new tab. This may be useful when displaying the screen on another device, such as a smartphone. Access the url on the device you want to test on.
Options menu. (Primarily for developers)
- Auto focus on/off. Sets the inputfield in focus (only on desktop).Disable this if you want to use keyboard to flip through UDD-screens (Alt-arrow up/down).
- Notify focus on/off. Shows an info box at the bottom, containing information about the focused element.
- Edit Password on/off. Sets the UDD in edit password-mode. Eks. Change password option in the UDDs menu will be disabled in this mode.
- Challange R. (ms) – input field. Time to wait for challenge response to be retrieved (in ms.)
- Password (ms) – input field. Time to wait for show password to be hidden (in ms.)
On the top right there are options to change the UDD size with device defaults or type custom size and switch rotation.

B - Info panel

On the left side you will have description for the shown UDD. These are divided into 4 parts and contain general and UDD-specific information:

Dialogue DescriptionUDD specific Information (similar to JAVA-UDD), Startup behavior, Operation details and Layout elements.
Design principlesGeneral details on Client size, Responsive behavior, Animation, Colors, Icons, Fontsizes and Other sizes.
Accessibility principlesGeneral details on WCAG 2.0 and Funka Nu guidelines, UU-Measures taken, Tab order and Reading order.
Relevant documents
Pull the handle on the middle-right to adjust the width of the panel.

C - Main content

Here you can see and use the displayed UDD, you are also able to resize the UDD using the handles below, right-bottom-corner and right to the client. The active size is reflected in the top right corner.

You can use PAGE UP/DOWN or ALT+ARROW UP/DOWN to browse to next or previous UDD in the list (Disable autofocus first).

Browser not supported