Skip to content

chore: add Scroll-wrap terms consent sample in Acknowledgment pattern #12092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

chore: add Scroll-wrap terms consent sample in Acknowledgment pattern #12092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c860af8
feat: add new sample
GDamyanov Aug 7, 2025
828b8a1
refactor: refactor sample
GDamyanov Aug 7, 2025
a444152
feat: enhance sample
GDamyanov Aug 8, 2025
d5e6d2c
feat: enable button only when user has scrolled till the bottom
GDamyanov Aug 8, 2025
f6c3f47
feat: refactor logic
GDamyanov Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/Scroll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import html from '!!raw-loader!./sample.html';
import js from '!!raw-loader!./main.js';
import css from '!!raw-loader!./main.css';

<Editor html={html} js={js} css={css}/>
47 changes: 47 additions & 0 deletions packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
body {
background-color: var(--sapBackgroundColor);
height: 800px;
}

[ui5-panel]::part(content) {
background-color: #eaecee;
}

.checkbox-wrapper {
display: flex;
align-items: center;
}

.checkbox-wrapper [ui5-text] {
flex: 1;
}

#termsPanel {
max-height: 400px;
overflow: auto;
border: 1px dashed #000;
border-radius: 0.25rem;
background-color: #eaecee;
}

.text {
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}

.footer {
display: flex;
justify-content: flex-end;
width: 100%;
align-items: center;
gap: 0.25rem;
}

[ui5-icon] {
color: var(--sapInformativeElementColor);
vertical-align: middle;
margin-left: 0.1rem;
margin-right: 0.1rem;
width: 0.8rem;
height: 0.8rem;
}
53 changes: 53 additions & 0 deletions packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import "@ui5/webcomponents/dist/Dialog.js";
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Text.js";
import "@ui5/webcomponents/dist/CheckBox.js";
import "@ui5/webcomponents/dist/Link.js";
import "@ui5/webcomponents/dist/Panel.js";
import "@ui5/webcomponents/dist/Icon.js";

const dialog = document.getElementById("dialog"),
acceptButton = document.getElementById("acceptButton"),
termsPanel = document.getElementById("termsPanel"),
checkbox = document.getElementById("termsCheck");
let hasScrolledToBottom = false;

dialog.open = true;

acceptButton.addEventListener("click", function (event) {
if (!hasScrolledToBottom) {
event.preventDefault();
alert("Please scroll to the end of the terms before continuing.");
return;
}

if (!checkbox.checked) {
event.preventDefault();
alert("Please accept the terms and conditions to continue.");
}
});

checkbox.addEventListener("mousedown", (event) => {
if (!hasScrolledToBottom) {
event.preventDefault();
alert("Please scroll to the end of the terms before accepting them.");
}
});

checkbox.addEventListener("change", () => {
acceptButton.disabled = !(hasScrolledToBottom && checkbox.checked);
});

termsPanel.addEventListener("scroll", function () {
const scrollTop = termsPanel.scrollTop,
clientHeight = termsPanel.clientHeight,
scrollHeight = termsPanel.scrollHeight,
atBottom = scrollTop + clientHeight >= scrollHeight - 1;

hasScrolledToBottom = false;
acceptButton.disabled = true;

if (atBottom) {
hasScrolledToBottom = true;
}
});
105 changes: 105 additions & 0 deletions packages/website/docs/_samples/patterns/AIAcknowledgement/Scroll/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./main.css">
<title>Sample</title>
</head>

<body>
<ui5-dialog id="dialog" state="Information" header-text="Information">
<br>
<ui5-text>
Please read the following information carefully and accept these terms and conditions:
</ui5-text>
<br>
<ui5-title level="H5">Terms of use</ui5-title>
<br>
</ui5-text>
<ui5-panel id="termsPanel" expanded>
<ui5-text class="text"><strong>SAP AI TERMS</strong></ui5-text>
<ui5-text class="text">These SAP AI Terms (“Terms”) apply to artificial intelligence features and technologies provided with SAP</ui5-text>
<ui5-text class="text">Cloud Services (“AI Technology”). “Output” means any content generated by AI Technology as output,</ui5-text>
<ui5-text class="text">based on the data provided to AI Technology, including Customer Data, and data used to train AI</ui5-text>
<ui5-text class="text">Technology.</ui5-text>
<ui5-text class="text">1. <strong>ACCEPTABLE USE</strong></ui5-text>
<ui5-text class="text">1.1. Customer will use AI Technology responsibly, safely, in a legally compliant manner, and in accordance</ui5-text>
<ui5-text class="text">with the Documentation, and will not use AI Technology to:</ui5-text>
<ui5-text class="text">(a) Promote or facilitate illegal activities or unlawful actions;</ui5-text>
<ui5-text class="text">(b) Facilitate fraudulent actions;</ui5-text>
<ui5-text class="text">(c) Attempt unauthorized access to a system, property, or information;</ui5-text>
<ui5-text class="text">(d) Generate content that contains or promotes violence, hate speech, or harassment, or insults or</ui5-text>
<ui5-text class="text">demeans a person;</ui5-text>
<ui5-text class="text">(e) Generate sexually explicit content;</ui5-text>
<ui5-text class="text">(f) Distribute malware or spam;</ui5-text>
<ui5-text class="text">(g) Contravene regulatory safety policies;</ui5-text>
<ui5-text class="text">(h) Track people without consent;</ui5-text>
<ui5-text class="text">(i) Falsely impersonate an individual; or</ui5-text>
<ui5-text class="text">(j) Mine cryptocurrency.</ui5-text>
<ui5-text class="text">1.2. SAP may limit or suspend access to Output or AI Technology in the event these Terms are violated or for</ui5-text>
<ui5-text class="text">non-compliance with Documentation.</ui5-text>
<ui5-text class="text">1.3. Customer will not circumvent or bypass protective measures made available by SAP or a third-party,</ui5-text>
<ui5-text class="text">including, but not limited to, those intended to help prevent copyright infringement, data breaches, or</ui5-text>
<ui5-text class="text">security incidents.</ui5-text>
<ui5-text class="text">1.4. Customer will not <ui5-icon name="information" accessible-name="Info" title="More info"/> use AI Technology or Output to develop, train, or improve other AI services or AI</ui5-text>
<ui5-text class="text">models, unless explicitly permitted by SAP, or (ii) use web scraping, web harvesting, or web data extraction</ui5-text>
<ui5-text class="text">methods to extract data from AI Technology or Output.</ui5-text>
<ui5-text class="text">2. <strong>OUTPUT</strong></ui5-text>
<ui5-text class="text">2.1. Notwithstanding any recommendation contained within Output, reliance on Output is in Customer’s</ui5-text>
<ui5-text class="text">discretion. Customer will assess Output (including by code scanning, security scanning, human review,</ui5-text>
<ui5-text class="text">and human oversight and correction) before using or relying on the Output for any purpose. Customer will</ui5-text>
<ui5-text class="text">also utilize any review tools and filtering options that SAP makes available.</ui5-text>
<ui5-text class="text">2.2. AI Technology consists of emerging technologies and, given the nature of such technologies, their use</ui5-text>
<ui5-text class="text">may result in incorrect, biased, unfair, or inaccurate Output and/or Output that may be nonsensical or</ui5-text>
<ui5-text class="text">untruthful in relation to certain sources.</ui5-text>
<ui5-text class="text">2.3. In addition Output may not qualify for intellectual property protection; similar or the same Output may be</ui5-text>
<ui5-text class="text">produced by AI Technology to similar requests from different customers, and Customer’s rights to Output</ui5-text>
<ui5-text class="text">may not be enforceable against other users of AI Technology. Customer’s ownership in Output is subject</ui5-text>
<ui5-text class="text">to SAP’s and/or its licensor’s ownership rights in the Cloud Service, SAP Materials, and data used to train</ui5-text>
<ui5-text class="text">AI Technology (“Pre-Existing Materials”). Customer is granted a right to use, and only will use, Pre-</ui5-text>
<ui5-text class="text">Existing Materials in Output to the same extent as Customer is permitted to use the Cloud Service.</ui5-text>
<ui5-text class="text">3. <strong>ADDITIONAL TERMS</strong></ui5-text>
<ui5-text class="text">The legal framework applicable to and the interpretation of competent courts and authorities regarding the</ui5-text>
<ui5-text class="text">use of AI technologies is evolving. If a change in law or the interpretation of a competent court or authority</div>
<ui5-text class="text">results in <ui5-icon name="information" accessible-name="Info" title="More info"/> SAP’s inability to offer an AI Technology or (ii) Customer’s inability to use an AI Technology</ui5-text>
<ui5-text class="text">in a legally compliant manner, SAP may reduce the scope of use (e.g., if the use of an AI Technology</ui5-text>
<ui5-text class="text">becomes prohibited, SAP may cease offering such AI Technology in a given country ) or remove such AI</ui5-text>
<ui5-text class="text">Technology altogether. The same applies where SAP can no longer provide an AI Technology provided</ui5-text>
<ui5-text class="text">by a third-party, because such third-party discontinues availability of such AI Technology or changes its</ui5-text>
<br>
<br>
<br>
<ui5-text class="text">SAP AI Terms enMEE.v.10-2024 Page 2 of 2</ui5-text>
<ui5-text class="text">service terms or documentation in contradiction to the Agreement or another way that prevents SAP from</ui5-text>
<ui5-text class="text">further offering such AI Technology.</ui5-text>
<ui5-text class="text">3.2. AI Technology may include AI models, technologies or features licensed from third-parties that require</ui5-text>
<ui5-text class="text">SAP to pass through additional terms. Customer will comply with such pass-through terms as made</ui5-text>
<ui5-text class="text">available by SAP at https://www.sap.com/about/trust-center/agreements.html, within the Documentation,</ui5-text>
<ui5-text class="text">or otherwise. When SAP introduces new AI Technology, SAP may provide additional terms or make</ui5-text>
<ui5-text class="text">updates to the terms, that apply to Customer’s use of such AI Technology.</ui5-text>
<ui5-text class="text">3.3. SAP does not commit to the use of specific AI models in a Cloud Service even if Customer may be able</ui5-text>
<ui5-text class="text">to choose between different AI models when using the Cloud Service. SAP reserves the right to add,</ui5-text>
<ui5-text class="text">remove, or exchange AI models, in its sole discretion, at any time.</ui5-text>
</ui5-panel>
<br>
<div class="checkbox-wrapper">
<ui5-checkbox id="termsCheck"></ui5-checkbox>
<ui5-text>
I hereby confirm I have read and agreed to
<ui5-link href="https://www.sap.com" target="_blank">&lt;document link 1&gt;</ui5-link> and
<ui5-link href="https://www.sap.com" target="_blank">&lt;document link 2&gt;</ui5-link>.
</ui5-text>
</div>
<br>
<div slot="footer" class="footer">
<ui5-button design="Emphasized" class="dialogCloser" id="acceptButton" disabled>Accept</ui5-button>
<ui5-button class="dialogCloser">Dismiss</ui5-button>
</div>
</ui5-dialog>

<script type="module" src="main.js"></script>
</body>

</html>
11 changes: 9 additions & 2 deletions packages/website/docs/components/patterns/AI Acknowledgement.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,16 @@ sidebar_class_name: newComponentBadge
---

import Basic from "../../_samples/patterns/AIAcknowledgement/Basic/Basic.md";

### Overview
import Scroll from "../../_samples/patterns/AIAcknowledgement/Scroll/Scroll.md";

AI Acknowledgment – is a pattern which provides general informations about a given AI services once the user engages first time with it. It is part of the overall set of "messaging patterns" that emerge with the use of AI services and functions. It's main purpose is to educate the user about the risks and opportunities using AI as well as setting baseline expectations.

### Implicit confirmation via checkbox

<Basic />

### Scroll-wrap terms consent

<Scroll />


Loading