CKFinder 3 Documentation

Status Bar

The aim of this article is to explain how to create a plugin that uses the status bar in CKFinder.

About the Status Bar

By default, CKFinder does not come with any status bar to offer as much space for files and folders as possible.

It does, however, come with an API that allows for creating a custom status bar adjusted to your needs with a minimum effort.

Adding the Status Bar

The following actions need to be performed to add a working status bar to CKFinder:

  1. Create a status bar using the statusBar:create request.

     // Create a status bar named 'MyStatusBar' for the 'Main' page which contains the files panel.
     finder.request( 'statusBar:create', {
         name: 'MyStatusBar',
         page: 'Main'
     } );
    
  2. Add a region inside the status bar using the statusBar:addRegion request.

     // Add a region inside the 'MyStatusBar' status bar. By default the status bar is empty.
     finder.request( 'statusBar:addRegion', {
         id: 'my-status-bar-region',
         name: 'MyStatusBar'
     } );
    
  3. Show the view inside the added region using the statusBar:showView request and then render the view.

     // Pass a view instance to the status bar. This will add a view to region layout manager.
     finder.request( 'statusBar:showView', {
         region: 'my-status-bar-region',
         name: 'MyStatusBar',
         view: statusBarView
     } );
    

To style the status bar you can use the CKFinder.Plugin.addCss method.

Example

For a complete example of a plugin that adds a status bar, check the StatusBarInfo plugin.