The SAP Fiori elements object page template supports the features and settings for the overall object page behavior detailed below.

For design information, see the Object Page Floorplan guidelines and the links below.

Feature Availability

Feature Details

Unsaved Changes Warning

By default, in draft-enabled applications, on the main object page, a message warns users of unsaved changes when the users navigate:

• Forward to another application without saving changes in edit mode or without entering data for a new object in create mode.

You can ask the application developers to turn the message off for forward navigation. The draft is kept for the user to return to later.

• Backward to the previous page without saving changes in edit mode or the data entered for a new object in create mode.

Depending on whether the object page is in edit or create mode, the message lets the users opt to:

• Save changes in edit mode
• Create the object in create mode
• Keep the draft
• Discard the draft
• Cancel the navigation

Intro

The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.

The calendar card is an integration card that uses the generic structure of the sap.f.card control.

When to Use

You can use the calendar card to show a calendar for one person, based on the single planning calendar.

Do not use it to show multiple appointments/calendars. Use the planning calendar instead.

Components

1. Header: Basic information about the calendar card, including the title, subtitle, and appointment counter.

You can define a navigation target for the header area (recommended). This is typically the underlying application containing the full calendar.

2. Calendar title: Title set by the application team. Use a title that reflects the use of the calendar in your application context.

3. Calendar subtitle: Subtitle set by the application team to further qualify the focus of the calendar.

4. Counter: Indicates how many appointments are displayed on the card and how many exist for the selected day overall.

5. Calendar navigation: Users can navigate to the previous/next period (for example previous/next month) or use the picker to select the month and year directly.

6. Calendar with interactive days: Interactive calendar, showing the selected day, current day, and special days.

7. Legend: In-place legend. You can specify the number of items that are shown. The More (x) text indicates how many legend items are hidden.

The different types of legend items are indicated by different shapes: Squares refer to highlighted days, circles refer to types of appointment.

Group titles from the planning calendar legend are not shown in the calendar card.

8. Appointment list: Shows appointments for the selected day. You can define the number of visible appointments.

9. Appointment duration: Indicates the duration using a dynamic combination of start date, duration, and end date. The format is determined automatically based on the user’s locale.

10. Appointment: The appointment can have an icon, a title, and a subtitle.

The appointment title and subtitle do not wrap. If there is insufficient space on the card, the text is truncated.

11. Indicator for more appointments: The More button indicates that additional appointments exist for the selected day.

You can define a navigation target for the button (recommended). This is typically the detail app containing all the appointments.

Behavior and Interaction

Calendar Card Header

When a day is selected, the counter adapts to show the number of appointments for that day (visible appointments/total appointments).

If a navigation target has been defined, clicking the navigation header opens the corresponding application.

Selecting a Date

Instead of offering a date picker in a popover, the calendar card changes views in place and allows the user to drill in.

At each level, the user can select the relevant period, navigate back and forth using the Previous and Next arrows, or drill down to the next level using the date picker.

Appointment List

When a day is selected, the appointment list adapts to show the appointments for that day.

If a navigation target has been set for the appointment, clicking the appointment navigates to the corresponding application (one click area).

If additional appointments exist, and a navigation target has been defined, clicking More opens the corresponding application.

Responsiveness

The responsive behavior of the calendar card depends on the container control of the host environment (for example, SAP Fiori launchpad). The size of the card adapts dynamically to the size of the container.

Width

Calendar cards adapt to the available width. If the width exceeds 589 px, the card switches automatically from a 1-column layout to a 2-column layout.

You configure the width of the calendar card by specifying the number of grid columns. The width of the card (and thus the breakpoint for the 2-column layout) is then determined by the grid.

Height

The height of the calendar card is determined by the content (no scrolling possible). It depends on the number of appointments that exist for the selected day and the maximum number of visible appointments you have defined.

When the width exceeds 589px and the card rearranges into two columns, and the height of the card shrinks. The minimum number of rows is determined by the number of visible appointments.

Note: If the calendar card snaps to the grid row (depending on overall card snapping behavior), this will sometimes result in blank space in the card.

Top Tips

• Keep the legend as simple as possible.
• Consider the height of the card when you define the number of visible appointments.

Related Links

The scroll container is an empty area that can be filled with content, such as other UI elements. The user can scroll through the content.

When to Use

Use a scroll container if:

• You want to provide a content area that would otherwise be partly or completely covered or hidden.

Do not use a scroll container if:

• A page uses a full screen element that can handle vertical scrolling.
• You are using other controls that come with their own scroll container, such as a dialog, timeline, or panel.
• You plan to nest different scroll containers that scroll in the same direction.
• You plan to have several scroll containers with different scroll directions (horizontally and vertically) on one page. This may lead to confusion about when to use which scrolling direction and how it all fits together.

Behavior and Interaction

Responsiveness

The scroll container is responsive and adapts to the screen size. By default, the width consumes the complete available width and the height reflects the height of the content. You can also set a fixed width or height. Always use responsive controls for the content, so that they also adapt to the available width and height.

Related Links