Intro

The regenerate pattern provides a general approach for using AI to create or modify content across different scenarios. It lets users generate alternative AI results or update existing AI-generated content, such as text, images, or other digital items, with the help of AI. Users can also iteratively refine the results to better match their needs or preferences.

When to Use

false

Use the regenerate pattern:

To rerun the generation of information for a defined content element.
To re-initiate the generation of content based on a form that provides further configuration options to control the final output.

dont

false

Don’t use the regenerate button:

For non-AI functions.

Use clear, meaningful labels that make the purpose of each action easy to understand in context.
Always check[internal_only] with your local user assistance and user research contacts[/internal_only] if the generic labels used in this guideline are sufficient or if you need to apply more descriptive labels to guide your users.
Message the user before overwriting the existing content.
Inform the user where to retrieve previous variants if you use versioning.
Use loading indicators, busy state and messaging patterns to inform users that new content is being generated.
Consider user needs, subscription costs, and [internal_only]sustainability[/internal_only][external_only]sustainability[/external_only] when enabling content regeneration.

Components

This pattern is based on the following key elements to support regeneration scenarios:

Foundational AI patterns

Global patterns

Components

AI button

AI Button

The AI button is the base component for placing AI-related actions in the user interface.

On the screen, there are two types of the Regenerate button: the AI Button and the AI Split Menu button. The AI Button features an AI icon alongside the "Regenerate" label. The AI Split Menu Button consists of two components: the Regenerate action and a dropdown menu offering fine-tuning options.

AI button and AI split button in the regenerate pattern

information

The AI button component extends common base components like button, menu button, split button, and menu. For more information, see the AI button component guideline.

Guidelines

Icon Usage

Only use the standard icons as described in the AI button guideline.

Don't

The screen displays two buttons. The first features a regenerate button with a refresh icon. The second showcases a regenerate button with a synchronize icon.

Don’t use alternative icons on the ‘Regenerate’ button

Button Types

Don’t use the icon button for regenerate use cases. Always use buttons with both an icon and a label.

Don't

The screen displays three icon buttons. The first button includes a refresh icon, the second has a synchronize icon, and the third displays an AI icon.

Don’t use an icon-only ‘Regenerate’ button

Label

Use the generic term Regenerate only if the outcome of the action is obvious or explained through the context.

Behavior and Interaction

Regenerate

When an AI action is triggered, the user is passed through the following steps:

Event: Content regeneration can be triggered by a user activating an AI action, by a system event (such as auto-generation), or through interaction with Joule.
Send request: The results provided by AI might be influenced by given directions (prompts) as well as available and accessible contextual information (for example, document data, user inputs, or relational data).
Response time: If the response takes too long, inform the user and let them choose to either cancel the request or continue processing it in the background and get notified when it’s ready. For more information, see the guidance for message handling.
Process time: AI results might be provided using a batch job approach. However, we recommend enabling content streaming and allowing for asynchronous processing to shorten the perceived waiting time for the user. Alternatively, the target element may be set to placeholder loading or busy state if the generation process is ongoing.
Delivery: The final AI result can be provided in different ways, as outlined in the output handling section of this guideline.
Finalization: The user may need to provide explicit approval, either through a confirmation dialog or by selecting which AI-generated result should be applied.
Implementation: Some implemented AI results might receive additional visible and invisible markup to ensure compliance with public legal regulations[internal_only] and our internal SAP AI Ethics Policy[/internal_only], as well as to increase user trust and ensure proper user control over AI results.[internal_only] For more information, see AI Notice Base Concept.[/internal_only]

Regenerate pattern applied to a text area in a dialog

Output Handling

This pattern might be applied in the following setups:

Overwriting

Results provided by AI are implemented directly and overwrite any existing data in the affected target element. Always notify users before overwriting content. We recommend providing options to easily revert previous actions (such as an Undo button).

Preserving Content

Versioning: Results are provided in addition to existing data. The user chooses their preferred option within the affected target element before finalizing.
Sandbox: Results are first provided in a separate, safe environment before they are implemented in the target destination. For example, a sandbox can be any UI element like a dialog or side-panel, or an element inside the Joule conversational UI. The output can then be compared with any existing content, refined, and optimized. Once approved, the finished content is transferred to the final destination.

warning

Versioning is currently only supported within the AI writing assistant experience.

Update after Changed Context

Change Contextual Information

Generated results might become invalid due to changes in the data used by the AI system to generate the result – known as the context. We recommend messaging the user if the information on which the output was based has changed. New context can lead to different outcomes, and relying on outdated information may result in undesirable consequences.

Time and Status Stamps

AI results might receive additional status and time attributes to let the user know when they were generated or when they expired.

guideline

When versioning is not supported, it's important to inform users that regenerating will replace existing content. For details, see Overwriting.
In mixed forms that contain both user input and AI-generated content, the regeneration process should replace only the AI-generated fields to ensure that user content is preserved.

Placement

In most cases, the placement of the Regenerate action is defined by the global action placement guidance. However, there are a few additional aspects to consider:

Principles

AI flows are always optional. Users must always have the option to complete the task manually or through traditional, non-AI, methods. This means most AI buttons are non-primary actions.
Generate and Regenerate actions can only be primary if they are a consecutive or finalizing step of a defined AI flow (for example, Generate as a finalizing action for preceding action Generate Job Description).
Related actions that lead to the same or similar end goal should be grouped together, regardless of whether they are AI or non-AI functions (for example, Create Report opens the options Menu, From Document, and Generate). Avoid individual placement of multiple AI functions in the same toolbar.
In most cases, the Regenerate button should replace the Generate button if the AI has previously provided results in the same session, keeping its original position.

Placement on the Page

AI actions can be placed in toolbars at any hierarchy level of the page, depending on the affected target of the AI action.

guideline

It is considered a best practice to place actions near their associated target element. For example, if your AI action provides generative functions that affect the entire page, place it in the header toolbar. If your AI feature only affects a specific text field within a page section, place your embedded AI action close to the target field.

In the image, there is a skeleton of a full page. A default “Regenerate” button with an AI icon is placed on the right side of the header.

‘Regenerate’ for a full page

In the image, there is a skeleton of a full page. A default 'Regenerate' button with an AI icon is placed on the top right corner of a section.

‘Regenerate’ as part of a section

The object page footer bar is reserved for finalizing actions applied to the entire object. We don’t recommend placing AI functions in the footer bar as primary actions. In alignment with our AI design principles, AI interaction is always optional and should not block users from achieving their task through traditional non-AI methods.

Placement in Dialogs

You can place AI actions in dialogs to support regeneration functions. See the guideline on dialogs for proper action placement.

In the Dialog Body

Use a secondary button embedded in a toolbar to regenerate individual editable parts of content inside the body of the dialog.

Use a secondary button to regenerate all of the content within the dialog. Use a primary button to regenerate content outside of the dialog.

Dialog skeleton features a footer with three buttons: 'Save' as the primary button, 'Regenerate' as the secondary button, and 'Cancel' as the tertiary button.

Dialog with secondary ‘Regenerate’ action

Dialog skeleton includes a footer with two buttons: 'Regenerate' as the primary button and 'Cancel' as the tertiary button.

Dialog with primary ‘Regenerate’ action

Placement on a Single Element

To enable regeneration of single elements, place the Regenerate button as close to the content as possible, following the action placement guidelines. If additional customization options are available, consider using quick prompts.

Dialog skeleton displaying regenerate split-menu button as secondary action embedded in the tool bar section of the content area. Features a footer with two buttons.

Regenerate split button attached to text area

guideline

Placing dedicated AI functions directly on individual elements should be the exception, not the standard. Consider whether this placement is truly necessary, or if the same value can be achieved by integrating the function into the common toolbar of the next higher-level wrapping element (for example, form, subsection, or section toolbar).

Messaging

Pending Request

You may inform the user if the system is under heavy load and can’t process requests immediately.

Example

“The system is taking longer than usual. We’ll notify you as soon as your request is complete.”

There is a information dialog that states, 'The system is taking longer than usually. We will notify you once your request is complete. Below the content, there is a footer bar containing two buttons: 'OK' as the primary button and 'Cancel Request' as the tertiary button.

Info message dialog

Overwriting

When versioning is not supported, use a message dialog to inform users about content replacement and data loss. For a consistent user experience, we recommend using the following warning message:

Example

“Regenerating will overwrite all fields with AI-generated content. Do you want to continue?”

There is a warning dialog that states, 'Regenerating will overwrite all fields with AI-generated content. Do you want to continue?' with a checkbox below the text that says, 'Don’t ask me again' Below the content, there is a footer bar containing two buttons: 'Regenerate' as the primary AI button and 'Cancel' as the tertiary button.

Warning message dialog

Finalization

Some AI application scenarios require explicit confirmation or selection from the user before AI results are finalized, or the page is exited. You may notify the user about any unconfirmed results and ask how they should be handled.

Example

“You have <number> unconfirmed recommendations. Unconfirmed AI results will be lost.”

There is a warning dialog that states, 'You have <number> unconfirmed recommendations. Unconfirmed AI results will be lost.' with a checkbox below the text that says, 'Don’t show me again' Below the content, there is a footer bar containing two buttons: 'Save' as the primary button and 'Cancel' as the tertiary button.

Confirmation message dialog

For low-impact scenarios where repeated warnings are unnecessary, include an option to skip the message in the future (Don’t ask me again or Don't show me again).

Warning Message Strip

In scenarios where a warning needs to be shown permanently, use a message strip after showing the initial warning dialog.

For more information, see the guidelines for the message box and message strip.

On the screen, there is a skeleton of a full page. Between the page header and the content, there is a yellow warning message strip that reads, 'Regenerating will overwrite all fields with AI-generated content,' accompanied by a warning icon and a dismissal icon.

Warning message strip in a full page

Guidelines

Implementation

Button (UI5 Web Components documentation)
Menu Button (SAPUI5 samples)
AI Button (UI5 Web Components documentation)
Regenerate (UI5 Web Components documentation)

Visual Design

Button (visual design)
Button (interaction design, web component)

Guidelines

Implementation

Button (UI5 Web Components documentation)
Menu Button (SAPUI5 samples)
AI Button (UI5 Web Components documentation)
Regenerate (UI5 Web Components documentation)

Intro

When to Use