Ribbon Backstage
26 Sep 202324 minutes to read
The Ribbon supports backstage view which is an addition to the traditional file menu. It displays information like application settings, user details, etc. The backstage view can be enabled by setting the backStageMenu property.
The backstage view options are displayed on the left, while the content of each option is shown on the right.
Adding backstage items
The menu items can be added to the backstage view by using the items property. You can show the backstage view by setting the visible property to true. By default, the backstage view is hidden.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";
Ribbon.Inject(RibbonBackstage);
let tabs: RibbonTabModel[] = [
{
header: "Home",
groups: [
{
header: "Clipboard",
collections: [
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Paste",
iconCss: "e-icons e-paste",
}
},
],
},
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut",
}
},
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Copy",
iconCss: "e-icons e-copy",
}
},
],
}
]
}
]
}
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs,
backStageMenu: {
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' }
],
visible: true,
backButton: { text: 'Close' }
}
});
ribbon.appendTo("#ribbon");<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
<script type="text/x-jsrender" id="homeContent">
<div id='home-wrapper' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
<div id='block-wrapper'><div class='section-title'> Recent </div>
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Ribbon.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="newContent">
<div id='new-content' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="openContent">
<div style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Open in Desktop App </span>
<span style="font-size: 12px"> Use the full functionality of Ribbon </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Protect Document </span>
<span style="font-size: 12px">To prevent accidental changes,
this document has been set to open as view-only.</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>Adding footer items
You can use the isFooter property in the items collection to add the backstage view footer items. By default, the value is false.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";
Ribbon.Inject(RibbonBackstage);
let tabs: RibbonTabModel[] = [
{
header: "Home",
groups: [
{
header: "Clipboard",
collections: [
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Paste",
iconCss: "e-icons e-paste",
}
},
],
},
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut",
}
},
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Copy",
iconCss: "e-icons e-copy",
}
},
],
}
]
}
]
}
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs,
backStageMenu: {
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' },
{ separator: true, isFooter: true },
{ id: 'account', text: 'Account', isFooter: true, content: '#accountContent' }
],
visible: true,
backButton: { text: 'Close' }
}
});
ribbon.appendTo("#ribbon");<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
<script type="text/x-jsrender" id="homeContent">
<div id='home-wrapper' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
<div id='block-wrapper'><div class='section-title'> Recent </div>
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Ribbon.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="newContent">
<div id='new-content' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="openContent">
<div style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Open in Desktop App </span>
<span style="font-size: 12px"> Use the full functionality of Ribbon </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Protect Document </span>
<span style="font-size: 12px">To prevent accidental changes,
this document has been set to open as view-only.</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<script type="text/x-jsrender" id="accountContent">
<div style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-people"></span> </td>
<td>
<span style="display: block; font-size: 14px">Account type</span>
<span style="font-size: 12px">Administrator</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-password"></span> </td>
<td>
<span style="display: block; font-size: 14px">Password protected</span>
<span style="font-size: 12px">Yes</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>Adding separator
The separators are horizontal lines used to separate the backstage view items. You can use the separator property to split the menu items.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";
Ribbon.Inject(RibbonBackstage);
let tabs: RibbonTabModel[] = [
{
header: "Home",
groups: [
{
header: "Clipboard",
collections: [
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Paste",
iconCss: "e-icons e-paste",
}
},
],
},
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut",
}
},
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Copy",
iconCss: "e-icons e-copy",
}
},
],
}
]
}
]
}
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs,
backStageMenu: {
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' },
{ separator: true },
{ text: 'Print', content: '#printContent' }
],
visible: true,
backButton: { text: 'Close' }
}
});
ribbon.appendTo("#ribbon");<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
<script type="text/x-jsrender" id="homeContent">
<div id='home-wrapper' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
<div id='block-wrapper'><div class='section-title'> Recent </div>
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Ribbon.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="newContent">
<div id='new-content' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="openContent">
<div style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Open in Desktop App </span>
<span style="font-size: 12px"> Use the full functionality of Ribbon </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Protect Document </span>
<span style="font-size: 12px">To prevent accidental changes,
this document has been set to open as view-only.</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<script type="text/x-jsrender" id="printContent">
<div style="min-width: 300px; padding: 20px;">
<h2>Print this document</h2>
<button id="togglebtn" class="e-control e-btn e-lib e-flat e-primary">
<span class="e-btn-icon e-btn-sb-icons e-icons e-print e-icon-left">
</span>Print</button>
</div>
</script>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>Back button
You can use the backButton property to customize the text and icon of the close button using the text and iconCss property. You can show the back button by setting the visible property to true.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";
Ribbon.Inject(RibbonBackstage);
let tabs: RibbonTabModel[] = [
{
header: "Home",
groups: [
{
header: "Clipboard",
collections: [
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Paste",
iconCss: "e-icons e-paste",
}
},
],
},
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut",
}
},
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Copy",
iconCss: "e-icons e-copy",
}
},
],
}
]
}
]
}
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs,
backStageMenu: {
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' }
],
visible: true,
backButton: { text: 'Close' }
}
});
ribbon.appendTo("#ribbon");<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
<script type="text/x-jsrender" id="homeContent">
<div id='home-wrapper' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
<div id='block-wrapper'><div class='section-title'> Recent </div>
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Ribbon.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="newContent">
<div id='new-content' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="openContent">
<div style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Open in Desktop App </span>
<span style="font-size: 12px"> Use the full functionality of Ribbon </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Protect Document </span>
<span style="font-size: 12px">To prevent accidental changes,
this document has been set to open as view-only.</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>Backstage target
The target property specifies the element selector in which backstage will be displayed. The target element should have the position as relative, else the backstage will be positioned nearest to the relative element. By default, the backstage is positioned to ribbon element.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";
Ribbon.Inject(RibbonBackstage);
let tabs: RibbonTabModel[] = [
{
header: "Home",
groups: [
{
header: "Clipboard",
collections: [
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Paste",
iconCss: "e-icons e-paste",
}
},
],
},
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut",
}
},
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Copy",
iconCss: "e-icons e-copy",
}
},
],
}
]
}
]
}
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs,
backStageMenu: {
target: '#targetElement',
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' }
],
visible: true,
backButton: { text: 'Close' }
}
});
ribbon.appendTo("#ribbon");<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
<div id="targetElement"></div>
</div>
</body>
<script type="text/x-jsrender" id="homeContent">
<div id='home-wrapper' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
<div id='block-wrapper'><div class='section-title'> Recent </div>
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Ribbon.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="newContent">
<div id='new-content' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="openContent">
<div style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Open in Desktop App </span>
<span style="font-size: 12px"> Use the full functionality of Ribbon </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Protect Document </span>
<span style="font-size: 12px">To prevent accidental changes,
this document has been set to open as view-only.</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>Template
You can use the template property to modify the backstage view menu items and their contents.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";
Ribbon.Inject(RibbonBackstage);
let tabs: RibbonTabModel[] = [
{
header: "Home",
groups: [
{
header: "Clipboard",
collections: [
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Paste",
iconCss: "e-icons e-paste",
}
},
],
},
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut",
}
},
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Copy",
iconCss: "e-icons e-copy",
}
},
],
}
]
}
]
}
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs,
backStageMenu: {
visible: true,
template: '#templateContent'
}
});
ribbon.appendTo("#ribbon");
let ribbonEle: HTMLElement | null = document.getElementById('ribbon');
(document.getElementById('ribbon_backstage') as HTMLElement).onclick = () => {
if(ribbonEle)
(ribbonEle.querySelector('#ribbon_backstagepopup') as HTMLElement).style.display = 'block'
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
<script type="text/x-jsrender" id="templateContent">
<div id="temp-content" style="width: 550px; height: 350px; display: flex">
<div id="items-wrapper" style="width: 130px; height:100%; background: #779de8;">
<ul>
<li id="close" onclick="closeContent(this.id)">
<span class="e-icons e-close"></span>
Close
</li>
<li id="new" onclick="contentClick(this.id)">
<span class="e-icons e-file-new"></span>
New
</li>
<li id="open" onclick="contentClick(this.id)">
<span class="e-icons e-folder-open"></span>
Open
</li>
<li id="save" onclick="contentClick(this.id)">
<span class="e-icons e-save"></span>
Save
</li>
</ul>
</div>
<div id="content-wrapper">
<div id='new-wrapper' class='content-open' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
</div>
<div id="save-wrapper" class='content-close' style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-save"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Save as </span>
<span style="font-size: 12px"> Save as copy online </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-rename"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Rename </span>
<span style="font-size: 12px">Rename this file. </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="open-wrapper" class='content-close' style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Ribbon.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Classic_layout.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> layouts </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Simplified_layout.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> layouts </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</script>
<script>
function contentClick(id) {
let ribbonEle = document.getElementById('ribbon');
let content = ribbonEle.querySelector('.content-open')
if(content) { content.classList.replace('content-open', 'content-close'); }
ribbonEle.querySelector('#' + id +'-wrapper').classList.add('content-open');
}
function closeContent() {
let ribbonEle = document.getElementById('ribbon');
ribbonEle.querySelector('#ribbon_backstagepopup').style.display = 'none'
}
</script>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>Setting width and height
You can customize the height and width of the backstage view using the height and width property. By default, dimensions are set based on the content added.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";
Ribbon.Inject(RibbonBackstage);
let tabs: RibbonTabModel[] = [
{
header: "Home",
groups: [
{
header: "Clipboard",
collections: [
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Paste",
iconCss: "e-icons e-paste",
}
},
],
},
{
items: [
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut",
}
},
{
type: RibbonItemType.Button,
buttonSettings: {
content: "Copy",
iconCss: "e-icons e-copy",
}
},
],
}
]
}
]
}
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs,
backStageMenu: {
height: '550px',
width: '350px',
items: [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' }
],
visible: true,
backButton: { text: 'Close' }
}
});
ribbon.appendTo("#ribbon");<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
<script type="text/x-jsrender" id="homeContent">
<div id='home-wrapper' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
<div id='block-wrapper'><div class='section-title'> Recent </div>
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Ribbon.docx </span>
<span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="newContent">
<div id='new-content' style="padding: 20px;">
<div id='new-section' class='new-wrapper'>
<div class='section-title'> New </div>
<div class='category_container'>
<div class='doc_category_image'></div>
<span class='doc_category_text'> New document </span>
</div>
</div>
</div>
</script>
<script type="text/x-jsrender" id="openContent">
<div style="padding: 20px;">
<div class="section-content" style="padding: 12px 0px; cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-open-link"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Open in Desktop App </span>
<span style="font-size: 12px"> Use the full functionality of Ribbon </span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-content" style="padding: 12px 0px cursor: pointer">
<table>
<tbody>
<tr>
<td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
<td>
<span style="display: block; font-size: 14px"> Protect Document </span>
<span style="font-size: 12px">To prevent accidental changes,
this document has been set to open as view-only.</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>