Overview

We would like the users to be in a position to make an informed decision for or against the use of cookies that are not strictly necessary for website technical features. If users choose to reject cookies used for advertising, they will be shown advertising that is less targeted to their interests. This will still allow them to use the complete functionality of the website. There are three groups of cookies:

Look and feel

This document outlines the basic guidelines on the design, content, and structure of a cookie dialog.

See Also:

UA Documentation - Cookie Statement for SAP BTP Trial

Cookie Statement for SAP.com

The cookie dialog allows you to easily manage the cookie settings according to the needs of the specific product. Below are the main steps that a user will follow depending on their preferences.

The cookie dialog remains on top of the page until the user interacts with it. Here the user has three options:

Interact with cookie dialog

When you want to set preferences, you can see three major groups for the required, advertising, and functional cookies. In this dialog, you can specify your preference by using the On/Off switch button. Additional information about the cookies in the groups can be found in the panel. Depending on the use case, detailed information can be shown by text or by tree table.

null

Option 1

Used in more simplified scenarios, where in the panel you have more detailed information explaining the cookie and possibly a link which leads to the specific documentation.

null

Option 2

Used in more complicated scenarios, where in the panel you have the tree table control that contains a hierarchical set of cookie data, structured in rows and columns, grouped into nodes, where the user can check or uncheck a specific cookie.

When there is no option to turn off required cookies, the switch button is in a disabled state. A message appears above all containers to inform the user.

Required cookies can't be switched off

To keep the default version of the cookies, you can click on the Cancel button and go back to the first dialog.

For the user to be able to change the cookie settings at all times, it's recommended to add a cookie settings section in the user menu or the info menu. This section calls the dialog with the three main groups.

Update cookie settings

Anatomy

Image
1
13.87; 86.50
Modal Dialog
The outermost container to hold Cookie Settings.
2
19.64; 86.75
Page
Placed inside the dialog, used for gray background of the dialog.
3
49.10; 32.75
List
Containers which hold different groups of cookies.
4
51.98; 82.88
Switch
Allows the user to set individual preferences.
5
55.48; 32.63
Panel
Container for grouping and displaying information. The content can be expanded and collapsed.
6
67.32; 32.75
Tree Table
Contains a hierarchical set of cookie data, structured in rows and columns, grouped into nodes, where the user can check or uncheck a specific cookie.

Responsiveness

Image
Cookie dialog behaves in the standard way when the width of the screen becomes too small to fit all buttons. The button Set Preferences turns into an overflow button.

To comply with the regulations governing cookies under the GDPR and the ePrivacy Directive you must:

See Also:

Cookies, the GDPR, and the ePrivacy Directive

Resources

Cookie Dialog Prototype

UI5 DemoKit Sample - Cookie Settings Dialog Pattern

Visual Design Wiki - Cookie Settings Dialog