SAP Fiori Client Guide

Adding the Toolbar Plugin

To install the Toolbar plugin, use the Cordova command line interface.


  • Set up the development environment.
  • Create your Cordova project.
  • Add your OS platforms.


  1. Add the Toolbar plugin by entering the following at the command prompt, or terminal:

    cordova plugin add kapsel-plugin-toolbar --searchpath KAPSEL_HOME/plugins

  2. Update the activity theme in the Android manifest file. For Android, the following message is shown in the output for the pluginadd command.
    For Android you need to modify the activity theme in the AndroidManifest.xml to be android:theme="@android:style/Theme.Holo".
    The minSdkVersion must also be changed to at least 11.

    To change the theme, modify the AndroidManifest.xml file for your application to change

    <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:name="LogonDemo" android:theme="@android:style/Theme.Black.NoTitleBar">


    <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:name="LogonDemo" android:theme="@android:style/Theme.Holo">
  3. Add a method to handle adding and removing toolbar items depending on the state of the application. For example:
    function addToolbarMenuItems(screenID) {
      if (screenID == "LoadingDiv") {
        //Do not add any toolbar items.             
      else if (screenID == "LockedDiv") {
        sap.Toolbar.addItem({"label" : "UnLock", "icon" : "ic_action_not_secure", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS }, function() {unlock();});
      else if (screenID == "MainDiv") {
        sap.Toolbar.addItem({"label" : "Read", "icon" : "ic_action_refresh", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS | sap.Toolbar.SHOW_AS_ACTION_WITH_TEXT }, function() {clearTable();read();}); 
        if (applicationContext == null) {
          sap.Toolbar.addItem({"label" : "Register", "icon" : "ic_action_add_person", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS }, function() {register();});
        else {
          sap.Toolbar.addItem({"label" : "UnRegister", "icon" : "no_icon", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_WITH_TEXT }, function() {unRegister();});
        sap.Toolbar.addItem({"label" : "Lock", "icon" : "ic_action_secure", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS }, function() {lock();});
  4. (Optional) To see a list of installed plugins in your Cordova project, open a command prompt or terminal window, navigate to your Cordova project folder, and enter:
    cordova plugins
    The Cordova command line interface returns a JSON array showing installed plugins, for example:
    [ 'cordova-plugin-camera',     
    'cordova-plugin-file' ] 

    This example shows that the Cordova project has the Cordova core Camera, Accelerator (device-motion), and File plugins installed.

  5. Modify the files in the Cordova project's www folder as appropriate for your project.
  6. Execute the following command to copy the files in the Cordova project's www folder to the platform directories:
    cordova prepare android
    cordova prepare ios
    cordova prepare windows 
  7. Use an integrated development environment to deploy and run the project.
  8. If you have added icons, perform a clean command to ensure the new icons appear.