Customize Toolbar

DsDataViewer allows you to modify the toolbar layout and hide or reorder the buttons for the three view modes: default (desktop), mobile, and fullscreen, using the toolbarLayout interface.

The default (desktop) view mode refers to the view of the hosted application on a desktop browser. Fullscreen view mode refers to the view of the application when it occupies the entire available display of the screen. The mobile view mode refers to the view of the hosted application on a mobile browser.

The toolbarLayout interface provides a DataToolbarLayout object that can be used to:

• Get information about current toolbar buttons of any of the three view modes, whether set by default or by the user.

  let viewer = DsDataViewer.findControl("#root");
  
  // Get the toolbar layout information.
  let toolbarLayout = viewer.toolbarLayout;
  
  // Get the layout of the toolbar in view modes.
  let dafaultToolbarLayout = viewer.toolbarLayout.default;
  let mobileToolbarLayout = viewer.toolbarLayout.mobile;
  let fullscreenToolbarLayout = viewer.toolbarLayout.fullscreen;

• Modify the current layout of the toolbar. You can hide or reorder the buttons for the three view modes (accessed using the keywords: default, mobile, and fullscreen).

  let viewer = DsDataViewer.findControl("#root");
  
  // Configure the toolbar layout for different view modes.
  let customizeDefaultButtons = ['open', 'zoom', 'fullscreen', 'toggle-note', 'theme-change'];
  let customizeMobileButtons = ['open', 'zoom', 'fullscreen'];
  let customizeFullScreenButtons = ['open', 'fullscreen', 'theme-change'];
  
  // Modify the toolbar layout for different view modes.
  viewer.toolbarLayout = { 
      default : customizeDefaultButtons, 
      fullscreen : customizeFullScreenButtons, 
      mobile : customizeMobileButtons
  };

You can also modify, remove, or reorder the buttons on the toolbar for any one of the view modes.

The following example code modifies only the default (desktop) toolbar layout.

let viewer = DsDataViewer.findControl("#root");

// Modify the toolbar layout for default view mode.
viewer.toolbarLayout = { default : ['open', 'zoom', 'fullscreen', 'theme-change']};

Note: This API only changes the layout of the toolbar; the button display rules will remain the same. For example, the Show/Hide Notes toggle button appears when an xlsx or SpreadJS (SSJSON and .sjs) file containing notes is opened, but when the toolbar layout is changed to display the Show/Hide Notes toggle button, it will not appear if no file is open or the opened file contains no notes. Another example is the Sort & Filter button. Regardless of whether you displayed the button using this API or not, this button is only displayed with the Professional License of DsDataViewer.