RibbonWeb / integration examplesImport public RibbonX customization concepts into a web component
XML callbacks · web state

A migration path for your ribbon.

The ribbon above is created from the XML on this page. Buttons call explicitly registered functions; invalidation refreshes their labels, selection, and enabled state.

Live document preview

Imported ribbon, native web UI

Use Bold, Font, or Style in the ribbon. Recent documents are supplied as dynamic menu XML.

Ready

Callback activity

    Import warnings

    None.

    RibbonX source

    Edit labels or add a control using one of the callbacks below, then apply the XML. Callback expressions are never evaluated.

    Attach the adapter

    import { createRibbonXAdapter } from '../src/index.js';
    
    const adapter = createRibbonXAdapter(xml, {
      getBold: () => documentState.bold,
      setBold(control, pressed) {
        documentState.bold = pressed;
        adapter.InvalidateControl(control.id);
      }
    });
    
    adapter.attach(document.querySelector('ribbon-web'));
    adapter.Invalidate();
    adapter.ActivateTab('view');
    // Dispose when the application view is destroyed.
    adapter.dispose();

    Supported migration behavior

    This example exercises QAT, tabs/groups, toggle and selection callbacks, editable text, gallery items, split buttons, dynamic menu XML, and invalidation. The importer also supports contextual tabs and common state getters.

    This is an independent implementation of documented customization concepts. Office's built-in commands and images, COM objects, document engines, and rich Backstage form layouts are not bundled. Unsupported import cases are reported explicitly through adapter.warnings.

    Available callback names

    loaded, isEnabled, getBold, setBold, fontCount, fontId, fontLabel, selectedFont, setFont, getTitle, setTitle, selectedStyle, setStyle, recentContent, openRecent, exportState, resetFormatting, and refreshState.