Getting started with EJ2 TypeScript Ribbon control

22 Jul 202624 minutes to read

This section explains how to create a simple Ribbon and configure its available functionalities in TypeScript using Essential® JS 2 quickstart seed repository.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. It requires Node.js v14.15.0 or higher. For more information about webpack and its features, refer to the webpack documentation.

Prerequisites

Before getting started, ensure the following tools are installed on your machine:

Tool Version / Notes
Node.js v14.15.0 or higher
npm Bundled with Node.js
Git Required to clone the quickstart repository
Visual Studio Code Recommended code editor

You can verify your Node.js and npm versions by running:

node -v
npm -v

Registering the license key

Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.41 onwards. Using the controls without a license key will display a license validation message in the browser console.

Steps to register the license key:

  1. Sign in to the Syncfusion License Portal and copy your license key.
  2. Register the key in your src/app/app.ts file, before instantiating any Syncfusion control:
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('YOUR_LICENSE_KEY_HERE');

For more details on obtaining and registering a license key, refer to the License Key Generation and License Key Registration documentation.

Setup for local development

Clone the Essential® JS 2 quickstart application project from GitHub using the following command line scripts.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack
cd ej2-quickstart-webpack

Adding Syncfusion® TypeScript Ribbon package

Syncfusion® TypeScript (Essential® JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

Use the following command to install the @syncfusion/ej2-ribbon package:

npm install @syncfusion/ej2-ribbon --save

Then, install the remaining dependent npm packages using the following command:

npm install

Adding CSS reference

Themes for Syncfusion® Ribbon controls can be applied using CSS files provided through the npm theme package. Install the Fluent 2 theme package using the following command:

npm install @syncfusion/ej2-fluent2-theme --save

Then add the following CSS reference to the src/styles/styles.css file:

@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/ribbon/index.css";

Adding Ribbon control to the application

Add the Ribbon control in src/app/app.ts file using the following code.

import { Ribbon, ItemOrientation, RibbonItemSize, RibbonItemType, RibbonTabModel, RibbonColorPicker, DisplayMode, RibbonFileMenu } from "@syncfusion/ej2-ribbon";
import { MenuItemModel, MenuEventArgs } from "@syncfusion/ej2-navigations";

Ribbon.Inject(RibbonFileMenu, RibbonColorPicker);

let fontSize: string[] = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];

let fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"
];

let tabs: RibbonTabModel[] = [{
    header: "Home",
    groups: [{
        id: "clipboard",
        header: "Clipboard",
        showLauncherIcon: true,
        groupIconCss: "e-icons e-paste",
        collections: [{
            items: [{
                type: RibbonItemType.SplitButton,
                allowedSizes: RibbonItemSize.Large,
                splitButtonSettings: {
                    iconCss: "e-icons e-paste",
                    items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }],
                    content: "Paste"
                }
            }]
        }, {
            items: [{
                type: RibbonItemType.Button,
                buttonSettings: {
                    content: "Cut",
                    iconCss: "e-icons e-cut"
                }
            }, {
                type: RibbonItemType.Button,
                buttonSettings: {
                    content: "Copy",
                    iconCss: "e-icons e-copy"
                }
            }, {
                type: RibbonItemType.Button,
                buttonSettings: {
                    content: "Format Painter",
                    iconCss: "e-icons e-format-painter"
                }
            }]
        }]
    }, {
        header: "Font",
        isCollapsible: false,
        enableGroupOverflow: true,
        orientation: ItemOrientation.Row,
        groupIconCss: "e-icons e-bold",
        cssClass: "font-group",
        collections: [{
            items: [{
                type: RibbonItemType.ComboBox,
                comboBoxSettings: {
                    dataSource: fontStyle,
                    index: 3,
                    allowFiltering: true,
                    width: "150px"
                }
            }, {
                type: RibbonItemType.ComboBox,
                comboBoxSettings: {
                    dataSource: fontSize,
                    index: 3,
                    width: "65px",
                    allowFiltering: true
                }
            }]
        }, {
            items: [{
                type: RibbonItemType.ColorPicker,
                allowedSizes: RibbonItemSize.Small,
                displayOptions: DisplayMode.Simplified,
                colorPickerSettings: {
                    value: "#123456"
                }
            }, {
                type: RibbonItemType.Button,
                allowedSizes: RibbonItemSize.Small,
                buttonSettings: {
                    content: "Bold",
                    iconCss: "e-icons e-bold"
                }
            }, {
                type: RibbonItemType.Button,
                allowedSizes: RibbonItemSize.Small,
                buttonSettings: {
                    content: "Italic",
                    iconCss: "e-icons e-italic"
                }
            }, {
                type: RibbonItemType.Button,
                allowedSizes: RibbonItemSize.Small,
                buttonSettings: {
                    content: "Underline",
                    iconCss: "e-icons e-underline"
                }
            },{
                allowedSizes: RibbonItemSize.Small,
                type: RibbonItemType.Button,
                buttonSettings: {
                    content: "Strikethrough",
                    iconCss: "e-icons e-strikethrough"
                }
            }, {
                type: RibbonItemType.Button,
                allowedSizes: RibbonItemSize.Small,
                buttonSettings: {
                    content: "Change Case",
                    iconCss: "e-icons e-change-case"
                }
            }]
        }]
    }, {
        header: "Editor",
        isCollapsible: false,
        collections: [{
            items: [{
                type: RibbonItemType.Button,
                allowedSizes: RibbonItemSize.Large,
                buttonSettings: {
                    content: "Editor",
                    iconCss:"e-icons e-edit"
                }
            }]
        }]
    }]
}, {
    header: "Insert",
    groups: [{
        header: "Tables",
        isCollapsible: false,
        collections: [{
            items: [{
                type: RibbonItemType.DropDown,
                allowedSizes: RibbonItemSize.Large,
                dropDownSettings: {
                    iconCss: "e-icons e-table",
                    content: "Table",
                    items: [
                        { text: "Insert Table" }, { text: "Draw Table" },
                        { text: "Convert Table" }, { text: "Excel SpreadSheet" }
                    ]
                }
            }]
        }]
    }, {
        id: "illustration",
        header: "Illustrations",
        showLauncherIcon: true,
        orientation: ItemOrientation.Row,
        enableGroupOverflow: true,
        groupIconCss: "e-icons e-image",
        collections: [{
            items: [{
                type: RibbonItemType.Button,
                buttonSettings: {
                    content: "Chart",
                    iconCss:"e-icons e-chart"
                }
            },]
        }]
    }, {
        header: "Media",
        isCollapsible: false,
        collections: [{
            items: [{
                type: RibbonItemType.Template,
                itemTemplate: "#itemTemplate"
            }]
        }]
    }]
}, {
    header: "View",
    groups: [{
        header: "Views",
        groupIconCss: "e-icons e-print",
        orientation: ItemOrientation.Row,
        collections: [{
            items: [{
                type: RibbonItemType.Button,
                buttonSettings: {
                    content: "Print Layout",
                    iconCss: "e-print e-icons"
                }
            }, {
                type: RibbonItemType.Button,
                buttonSettings: {
                    iconCss: "e-icons e-web-layout",
                    content: "Web Layout"
                }
            }]
        }]
    }, {
        header: "Show",
        isCollapsible: false,
        collections: [{
            items: [{
                type: RibbonItemType.CheckBox,
                checkBoxSettings: {
                    label: "Ruler",
                    checked: false
                }
            }, {
                type: RibbonItemType.CheckBox,
                checkBoxSettings: {
                    checked: false,
                    label: "Gridlines"
                }
            }, {
                type: RibbonItemType.CheckBox,
                checkBoxSettings: {
                    label: "Navigation Pane",
                    checked: true
                }
            }]
        }]
    }]
}];

let menuItems: MenuItemModel[] = [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
    { text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
    { text: "Save as", iconCss: "e-icons e-save", id: "save" }
];

let ribbon: Ribbon = new Ribbon({
    tabs: tabs,
    fileMenu: {
        menuItems: menuItems,
        visible: true
    }
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">

<head>
    <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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-ribbon/styles/tailwind3.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>
    <style>
        .ribbonTemplate {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .ribbonTemplate.Large {
            flex-direction: column;
        }

        .ribbonTemplate.Large .e-icons {
            font-size: 35px;
        }

        .ribbonTemplate.Medium .e-icons,
        .ribbonTemplate.Small .e-icons{
            font-size: 20px;
            margin: 15px 5px;
        }

        .ribbonTemplate.Small .text {
            display:none;
        }

        .font-group .e-ribbon-group-content {
            justify-content: center;
        }
    </style>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>

    <script type="text/x-jsrender" id="itemTemplate">
        <span class="ribbonTemplate ${activeSize}">
            <span class="e-icons e-video"></span>
            <span class="text">Video</span>
          </span>
    </script>
</body>

</html>

Injecting required modules

Inject the Ribbon required modules in your app.ts file using the following code snippet.

import { Ribbon, RibbonFileMenu, RibbonColorPicker } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonFileMenu, RibbonColorPicker);

let ribbon: Ribbon = new Ribbon({});
ribbon.appendTo("#ribbon");

Adding Ribbon tab

In Ribbon, the options are arranged in tabs for easy access. You can use the tabs property of ribbon to define the ribbon tab like below.

import { Ribbon, RibbonTabModel } from "@syncfusion/ej2-ribbon";

let tabs: RibbonTabModel[] = [{ header: "Home" }];

let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");

Adding Ribbon group

To define a ribbon group under each tab, you can use the groups property of ribbon tab like below. The orientation property of ribbon group defines whether the collection of items will be rendered column-wise or row-wise.

import { Ribbon, RibbonTabModel, ItemOrientation } from "@syncfusion/ej2-ribbon";

let tabs: RibbonTabModel[] = [{
  header: "Home",
  groups: [{ header: "Clipboard", orientation: ItemOrientation.Row}]
}];

let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");

Adding Ribbon items

You can use the collections property of ribbon group to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the items property of ribbon collection and the type property of ribbon item to specify the type of control to be rendered, like a button, a drop-down button, a combo box, and more.

import { Ribbon, RibbonTabModel, ItemOrientation, RibbonItemType, RibbonItemSize } from "@syncfusion/ej2-ribbon";

let tabs: RibbonTabModel[] = [{
    header: "Home",
    groups: [{
        header: "Clipboard",
        orientation: ItemOrientation.Row,
        collections: [
        {
            id : "paste-collection",
            items: [{
                type: RibbonItemType.SplitButton,
                allowedSizes: RibbonItemSize.Large,
                disabled: true,
                id: "pastebtn",
                splitButtonSettings: {
                    iconCss: "e-icons e-paste",
                    items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }],
                    content: "Paste"
                }
            }]
        },
        {
            id: "cutcopy-collection",
            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 });
ribbon.appendTo("#ribbon");

Run the application

The npm start command compiles the TypeScript source files and starts the webpack development server. Run the following command:

npm start

Open http://localhost:8080 (or the port shown in the terminal) in a browser. You should see a Ribbon control rendered with the default layout.