Overview
Opening an object in a new browser tab is one of the "opening an object" pattern that keeps the source page in the current browser tab and creates and activate a new browser tab to display the destination object.
The object can be open systematically or optionally in a new tab. (Behaviour to choose at design time)
Objects can be opened in the same tab or in several tabs. (Behaviour to choose at design time too)
But at any time, users can open the object in a new browser tab using browser's features only. (Native runtime behaviour)
Before opening it in a new browser tab, the object can be open in a floorplan with the source (properties panel, flexible column layout, instance tabs). In these cases, the feature is an option and its availability should be defined at design time.
Note: In this guideline, the call to action (CTA) is frequently named "Open in new browser tab" to differentiate from the "Open in new instance tab". But in the UI, it will be labeled "Open in New Tab".
When to Use
Recommended
Use the Open in New Browser Tab when you have ALL these 5 conditions:
- Your object has its own lifecycle. (1)
- You want to keep the source opened in one tab (2)
- You want a full width of the browser window. (3)
- You don't necessarily need the source and the destination simultaneously visible on screen but you may want it possible on desktops' screens (4)
- You don't want to display the source and the opened objects in the same browser tab (5)
(1) Does your object has its own lifecycle?
If the object can be created, edited, deleted itself, then it has its own lifecycle.
If the object is embedded in a parent object and the creation, edition and deletion is done at the parent's level, the object does not have its own lifecycle and cannot be edited in a distinct browser tab.
(2) You should to keep the source opened in a browser tab when:
- the object is referenced by a parent object in edition: you don't want the user to quit the edition to navigate to that object. For example, a drop down list to choose an object with a button to open it in a new browser tab.
- the object name is displayed in a dialog or a message box. You don't want the user to interrupt the task to open the object.
- the user task needs to open open several objects from the source page. In that case, after opening one object in new browser tab, the source page is still in a browser tab to open another object. Otherwise, opening in place would mean that, to keep the first object opened, the user would have to open again the source page in a new browser tab to open in place a second object.
- the source page provides to open simultaneously objects with the multi-selection: As the result of opening multi-selected objects should be the same as opening objects one by one for consistency reasons, the case is mentioned here.
(3) You need a full-width browser window when:
- the object is displayed in a complex floorplan, for example having side panels.
- you don't want to have extra areas given by the floorplan in addition to you object's area
(4) About visibility of browser tabs' content
- By default, the source and the destination are not simultaneously visible on screen. The user needs to switch from one to the other by activating the tab.
- Nevertheless, it is possible to drag and drop a browser tab out of the browser window and so, display the two tabs in two distinct windows that can be shown simultaneously on screen.
(5) You need to display the source and the objects in distinct browser tabs when:
- The objects pages already contain instance tabs: because it is not recommended to have instance tabs inside instance tabs.
- You don't want to use instance tabs to display the source and the opened objects in the same browser tab.
Not recommended
Don't open in a new browser tab:
- if the object cannot have its own lifecycle (i.e. the save of the object is done by its parent). Prefers using a properties panel, an overlay, a dialog box or a pop over where the lifecycle can be managed in the source page.
- if you don't need to keep the source and if this type of object is not opened systematically on a new browser tab by another source page. Prefers opening in place.
- if the information to display too small to be displayed in a full page. Prefers opening in a popover, an dialog box (for example for partial display), or in an overlay, a flexible column layout or a properties panel.
- if you need to have simultaneously visible the source and the destination. Prefers opening in a properties panel or using the pattern instance tabs with list as left panel.
- if you want to keep the source and all the objects in the same browser tab. Prefers using the pattern instance tabs with the source in the first fixed tab.
Behavior
Opening a browser tab with a Target name
There is the possibility to name internally the tab that changes the behaviour (implementation : target variable of window.open() method or target property in the href html tab).
- target not defined : the page is displayed in place.
- target="_blank": a new tab is systematically created.
- target has a specific name: if the tab with that name exists, it is reused to display the object otherwise a new tab is created.
Restriction: On mobile devices, the tab is not activated.
Note: When the page is called directly by the browser (via a bookmark, or pasting the url) the target is not defined.
The possibility to open objects by recycling the new tab or not gives several choices of behaviour:
Open Systematically
When selecting the object for opening it, the object is displayed in a new browser tab instead of in place.
There is not way in the interface to open it in place (except pasting the url of the object's page in the source tab but it's out of designer's control)
Recommended
- Open systematically in a new browser tab when the object is referenced while you are editing in the source page.
- Open systematically in a new browser tab when you are editing another object in the source page.
Not Recommended
Don't systematically open in a new browser tab:
- if you want to give the user the option to open in place. Prefers open optionally in a new tab
- if you don't want to have the same object open several times in different browser tab. Prefers open systematically in a named tab
Open Optionally
And the open in a new browser tab a secondary feature.
For that, a specific Call to Action (CTA) named ""Open in New Tab" is available in a menu related to the object to open, i.e in the object's contextual menu, the object's contextual toolbar, the object's action menu, or the native browser's contextual menu on the object's URL link.
Recommended
- Open optionally in a new browser tab when you want to allow to open in place too. Even if the frequency to open in place is lower than to open in a new tab, the open in place should remain the main case and open in a new tab an alternative. If the need to open in place is low, consider to not providing it at all and open systematically in a new browser tab
Not recommended
Don't open optionally in a new browser tab:
- if the source page is an object in edition and you don't want the user to quit. Prefers open systematically in a new tab
- in the source page, the object is displayed in a dialog box or a message box. Prefers open systematically in a new tab
Open in a Named Tab
When selecting the object for opening it, the object is displayed in a new browser tab or activate the browser tab if the object is already opened. That means that:
- when opening the object again, the tab will be activated and the object will be displayed immediately
- when opening the object from another page, the same tab will be activated too. For example, when you have a graph of relationships between objects, you can easily navigate from objects to objects while having one browser tab per object only.
Recommended
Open in a named tab:
- if you open frequently the same object AND cannot support simultaneous multiple edition in several tabs
- when you are in a context of a graph of objects and so objects can be opened from viewing or editing other objects.
- when the object is opened in an instance tab and this instance tab should not be displayed twice (with different content or not) in two browser tabs.
Not recommended
- Don't open in a named tab if you have implemented a multi-user edition on that type of object so the system can manage several tabs of the same objects edited by one user. Prefers opening each time a new browser tab (target="_blank")
Open from Non-Managed Source
Even if you have designed every access to open your object in place, in a new tab systematically or not, as a new named tab or not, be aware that the user can always open in a new browser tab by its own by opening a blank browser tab (1) and, from there:
- open directly the object a second time.
- or open the source a second time and then navigate and open the object a second time
When the object is directly opened by the browser (via a bookmark, a paste of the URL) or by a link without target (link in an email or store on a document), the object will be opened in a browser tab without a target name.
(a) Implementation note: The detection is done by the back-end on the object because the front-end cannot read other browser's tab to get their name.
(1) Opening objects indirectly in a new tab by copy-pasting source URL then navigating
(2) Opening an object in a named tab from a non-managed source
Open from Properties Panel
When the source is a floorplan containing a properties panel, the selection of the object in the "source area" displays the object's information in the panel. This behaviour is unchanged. The open in a new browser tab is an additional feature that can be done in a contextual menu related to the selected object. (1)
Nevertheless, in case the object cannot be opened twice (both in the new browser tab and in the properties pane) a message and a button is displayed in the properties panel to switch to the browser tab containing already the object. (2)
(1) Opening objects with Properties Panel + New Tab
(2) Opening objects with Properties Panel + New Tab (object open once only)
The CTA can be displayed as:
- an item in the object contextual menu in the source area
- a icon button the properties header (top right)
- a "Switch to tab" button in the properties pane when the object cannot be displayed (case2)
Recommended
(In addition to the top five conditions)
- Open the object in a named tab, not a "_blank" tab whatever the object can handle several simultaneous opening of the same object or not.
Not Recommended
Don't provide the "Open in new browser tab" CTA in the properties panel
- if the properties panel contains the source properties (that correspond to no object selected)
- if the object does not have its own lifecycle.
- on mobile devices.
Open from Flexible Column Layout
From a flexible column layout floorplan, the open in new browser tab can be the result of two different and exclusive behaviour:
- Opening each object in a different new browser tab
- Undocking the second flexible column.
Option1: Open from a flexible column with each object in a different new browser tab
In that case, before opening an object in a new browser tab, the current behaviour of the flexible column layout does not changes.
The open in a new browser tab is an additional feature that can be done:
- in the selected object's menu in the source
- and optionally in the header column of the opened object itself.
Open new browser tabs from flexible 2-columns layout floorplan
Open new browser tabs from flexible 3-columns layout floorplan
A distinct named browser tab is created for each object. Once one on several objects have been opened in distinct browser tabs, the selection of an object in the column will directly activate the existing browser tab containing the object.
Recommended
(In addition to the top first FOUR conditions)
- Provide the Open in new browser tab CTA on the object when you want to allow the user to optionally open in another browser tab.
Not Recommended
Don't open objects in distinct browser tabs:
- if you want to provide the configuration where both the parent object and the selected child object are simultaneously on the screen. Prefers the Option 2.
- on mobile devices.
Option 2: Undock the second column in a new browser tab
In that case, before undocking the second column in a new browser tab, the current behaviour of the flexible column layout does not changes. The undock is an additional feature that is call by an icon displayed in the second column header only.
The same browser tab is used to display each object selected in the first column.
The third column cannot be undocked.
To switch from the opened object to the first column tab, a specific icon button can be displayed in the object header to activate it.
A "locking" mechanism can be added to fix the currently opened object and in that case, the next objects will be opened in the same new browser tab.
In addition, in the first column, a CTA "open in a new tab" can open directly an object in a specific browser tab.
Recommended
(In addition to the top first FOUR conditions)
- Provide the Undock CTA on the second column when you want to allow the user to switch between two configurations:
1) opening objects of the first column systematically in the same browser tab (default)
2) opening objects or the first column systematically in a second browser tab if needed.
Not Recommended
Don't provide the undock:
- if the opening is done time to time. Prefers the Option 1.
- on mobile devices.
Open from Instance Tabs
From a instance tab floorplan, an object is opened by default in the instance tab.
Opening an object that is potentially already opened in an instance tab will close the instance tab because
The Opening an object CTA in a new tab will be enabled only if the object is not already in an instance tab or if the instance tab can be closed automatically without any user confirmation.
The
an be closed will remove the object from the , undocking an instance tab, have the same result : the object is in a specific browser tab only.
Recommended
(In addition to the top first FOUR conditions)
- Provide the opening in a new browser tab and the undocking if there is a rare but necessary user need to see simultaneously several instances. To obtain this configuration, the user will then have to drag the new browser tab into another browser window to have the two tabs side to side.
Not Recommended
Don't provide the open in new tab from instance tab
- if the need to see objects simultaneously is important. Prefers opening systematically in a new tab.
- on mobile devices.
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.
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.