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.

guideline

We recommend always using clear, meaningful labels that make the purpose of each action easy to understand in context. Use the generic term “regenerate” only if the outcome of the action is obvious or explained through the context. Always check with your local user assistance and user research contacts if the generic labels used in this guideline are sufficient or if you need to apply more descriptive labels to guide your users.

When to Use

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.

Don't

Don’t use the regenerate pattern:

For non-AI functions.

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 sustainability 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

Guidelines

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 menu button in regenerate

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 example: Regenerated button with alternative icons

Button types

Do not use the icon button for regenerate use cases. Always use icon plus label buttons.

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 example: Icon only regenerate button

guideline

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

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, relational data, etc.).
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 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, and our internal SAP AI Ethics Policy as well as to increase user trust and ensure proper user control over AI results. For more information, see AI notice base concept.

Regenerate applied to a text area in a dialog

Output handling

This pattern might be applied in the following setups:

Overwriting

Results provided by AI will be directly implemented and overwrite any existing data in the affected target element. Users should be notified before content is overwritten. We recommend providing options to easily revert previous actions (for example, Do and Undo buttons).

Preserving content

Versioning: Results will be provided in addition to existing data from which the user chooses their preferred selection within the affected target element before finalizing.
Sandbox: Results will be provided in a separate, safe environment first before they are implemented in the target destination. For example, a sandbox can be any UI element like a dialog or side-panel or 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 context, that is, changes in the data used by the AI system to generate the result. We recommend messaging the user if the informational basis for the output 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 have been generated or expired.

guideline

When versioning is not supported, it's important to inform users that regenerating will replace the existing content. For additional details, refer to the overwriting section.
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 Regenerate is defined by the global action placement guideline. However, there are a few additional considerations to be met:

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).
Logical action grouping. 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.

In 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 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 in 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

In the object page footer bar

The object page footer bar is reserved for finalizing actions applied to the entire object. We do not 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.

In dialogs

AI actions can be placed in dialogs to support regeneration functions. Also refer to the guideline on dialogs for proper action placement.

In dialog body

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

In dialog footer

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

Dialog skeleton features a footer with three buttons: 'OK' 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

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: 'OK' as the primary button, and 'Cancel' as the tertiary button.

Regenerate split menu 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, sub-section, 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 an 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: 'Continue' as the primary button and 'Cancel Request' as the tertiary button.

Info message dialog

Overwriting

When versioning is not supported, use a message box 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 show this message again.' Below the content, there is a footer bar containing two buttons: 'Proceed' as the primary 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 this message 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

Don't show option

For low-impact scenarios where repeated warnings are unnecessary, include an option to “Don't show this message again” in the message. In scenarios where this warning needs to be shown permanently, use a message strip after showing the initial warning dialog.

For more information, see 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

Elements and Controls

AI Button (guidelines)
AI Icon (guidelines)
Menu (guidelines)
Quick Prompts (guidelines)
Design Principles for Generative AI (guidelines)

Implementation

Button (SAPUI5 samples)
Button (UI5 web component documentation)

Visual Design

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

Intro

When to Use

Components

Guidelines

Behavior and Interaction

Regenerate

Output handling

Update after changed context

Placement

Principles

In the page

In dialogs

Single element

Messaging

Pending request

Overwriting

Finalization

Don't show option

Related Links

Elements and Controls

Implementation

Visual Design