An "Opening an object" pattern describes where an object's information can be displayed and how the end-user requested it.

In addition, each pattern explains the possibilities to transform from one layout to another to see differently the object.

At this time, the identified patterns are:

Open in Place
Open in New Browser Tab
Open in Flexible Column
Open in Properties Panel
Open in Instance Tab
Open in Overlay
Open in Popover
Open in Dialog

Pattern Structure

An "Opening an Object" pattern is defined by:

a source page (areas in blue in following state diagrams)
the events that makes this object visible (dotted arrows)
a destination state containing the opened object (area in green)
second-time events to display the object differently
optional layouts to see the object differently

The source page

The source page is that starting state where the user decides to work with the object. This page contains:

a reference to the object to open. It can an the object in a sentence, an list, a tree, a diagram, an field, a table cell, etc...
or call to action to creates a new object.

The events

These events triggers the state change for the source to the destination:

The two main actions are:

Opening Object
Opening Object in New Tab

They are triggered by various means: A URL link in a list row, in a table cell, in a message box's sentence, an item in the standard Browser's contextual menu, a menu item in object's context menu or contextual toolbar, object's action menu, an info icon

Some actions are specific to some floorplans:

Showing the "Properties Panel" (that displays the selected object)
Selecting Object

Some actions are independant from applications because provided by the browser:

Opening a new empty browser tab
Pasting Object URL

The destination state

Once the event triggered, the destination state contains the "opened" object. This state can be described by two main characteristics:

The visibility of the destination object with or without the source page:

Only the object is visible,
The source AND the object are simultaneously visible,
The source OR the object are seen alternatively in tabs. (instance tabs or browser tabs)

The final number of the browser tabs: (without deleting the source tab and after opening several time the same object)

One tab,
Two browser tabs only,
Many browser tabs.

Second-time events:

Once the destination state reached, these events allows the user to go back, switch between tabs, or optionally change the layout configuration to see the object differently.

Events done in the app:

Back
Activating Instance Tab
Hiding the Properties Panel
Undocking Area in New Tab
Expanding Area
Collapsing Area
Locking Object in a tab
Closing Object
Next/Previous Object

Events done in the browser:

Back
Closing Browser Tab
Activating Browser tab (Swapping between browser tab)
Dragging the browser tab page out of the browser window

Optional layouts' states

They are the layout that can be accessed from the main destination state to see the object differently.

Transition Map

The following map is an overview of the layouts of the identified patterns and shows the event-based transitions between them.

Source is Blue, Opened object in Green.

Responsiveness

The patterns limitations and behaviours depends on the screen configuration, screen size, the browser capabilities and browser size. That gives more possibilities of objects display configuration using a desktop than a mobile device.

<div> <div>Impactful characteristics</div> <div>Desktop and its connected monitors</div> <div>Mobile</div> </div> <div> <div>Number of screens</div> <div>One to many</div> <div>One</div> </div> <div> <div>Browser windows</div> <div>One to many</div> <div>One</div> </div> <div> <div>Size supported (for each floorplan)</div> <div>ALL (depends on the browser window size)</div> <div>S, M</div> </div> <div> <div>Number of click/gestures to switch browser tab</div> <div>1 click</div> <div> <p>1 to swap to previous or next tab</p> <p>2 otherwise</p> </div> </div> <div> <div>Activation of the browser tab</div> <div>yes</div> <div>only when it is a new tab, don't activate a "named" existing tab</div> </div> <div> <div>Number of main areas the floorplan can display</div> <div>One to many (depends on the browser window size)</div> <div> <p>1 on S screen size</p> <p>2 but each one partially on S screen size</p> <p>1 or 2 on M screen size</p> </div> </div>

Each floorplan used by the pattern has its own responsiveness.

Transition map for mobile

Due to the responsiveness and the devices capabilities, some screen states and transition between them don't exists.

Resources

Fiori Design Guidelines

Navigation within Apps : The only place found where is evoked the open in new browser tab under the naming "pop-out" navigation.

Object Handling

Multi-instances layout

Popover & Quick View

Partial Edit with Dialog

Leave Feedback

We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.

Leave a Feedback

Track BTPCOEDTII-108 in JIRA