Adding actions to TOP Smart UI bar

Vit Jasansky

Hello community. Does someone have a quick hint how to add actions to the top of smart ui page? See the pic.

1) what is the right name for the top bar? Header?

2) is it described in docs? http://docsapi.opentext.com/docs/pi_hosted/_org/ofh1/index.html?/cssui220100-h-ugd-en/qs-functionmenus-bg.html?ml=en-h$cssui220100ugd.sui-overview-bg~$clivcs220100ugd.index&type=ofh1

3) how can we add some actions?

Thanks for your help

Jan Velas

Hello there

The bar in question is navigation.header and can be found in the SDK under lib\src\csui\widgets\navigation.header

• I found the actual view that I think is responsible for displaying it under: csui\pages\start\impl\navigationheader\navigationheader.view.js
• I assume it's part of the global perspectives, since it's showing almost everywhere on the server.
• There is a markdown file describing how to do some supported changes, (masks, order changes, using ...-extensions.json), but nothing about directly extending it.

Looking at the code, each button visible seems to be implemented under "csui\widgets\navigation.header\controls" and they are defined inside of the navigation.header.controls file

This file also seems to support being extended from external extension points (...-extensions.json)

Read the comments in here:

//csui\widgets\navigation.header\navigation.header.controls.js
define([
  'module', 'csui/lib/underscore', 'csui/lib/backbone',
  'csui-ext!csui/widgets/navigation.header/navigation.header.controls', // <--- EXTRA NAV ITEMS ?
  'css!csui/widgets/navigation.header/impl/navigation.header.controls'
], function (module, _, Backbone, extraNavIcons) {
  'use strict';
...
...
...
var rightSide = new Backbone.Collection([
    ...
    ...
    ...,
    {
      id: 'csui/widgets/navigation.header/controls/favorites/favorites.view', // <--- PATH TO VIEW
      sequence: 200, // <--- ORDER IN HEADER
      parentClassName: 'csui-favorites' // <--- Probably icon class (?)
    },
    ...
    ...
    ...
  ], {
    comparator: 'sequence'
  });
...
...
...
// if there is something inside some -extensions.json pointing towards this file
if (extraNavIcons) {
    // Add it to the rightSide collection defined above, if it doesn't have 'iwatch/' in the path
    _.filter(extraNavIcons, function (toolItem) {
      return toolItem.id.indexOf('iwatch/') === 0 && rightSide.add(toolItem);
    });
  }

So, I'd try to find a way to display this navigationheader.view somewhere on the localhost dev server, and add my ...-extensions.json (with something like what's already in the rightSide collection above) to the "deps" array in the index.html

"csui/widgets/navigation.header/navigation.header.controls": {
    "extensions": {
      "xyz-extension": [
        {
          id: 'path/to/my/view/my.view',
          sequence: 150,
          parentClassName: 'csui-favorites'
        }
      ]
    }
  }

You may have to fiddle with it.

Hope this helps && good luck!

Jan

Jan Velas

I realized there is a mistake in my previous comment.

indexOf('str') === 0 makes sure that the string starts with 'str', not that it's not there (that would be -1)

// if there is something inside some -extensions.json pointing towards this file
if (extraNavIcons) {
    // Add it to the rightSide collection defined above, 
    // ONLY IF IT'S PATH STARTS WITH 'iwatch/'!
    _.filter(extraNavIcons, function (toolItem) {
      return toolItem.id.indexOf('iwatch/') === 0 && rightSide.add(toolItem);
    });
  }

Because of that it seems it is not possible to use this approach anymore and add custom button using the extensions.json

I have looked at the code in a newer system (22.1) and it seems you have to raise a ticket to be allowed to extend the header:

if (extraNavIcons) {
    _.filter(extraNavIcons, function (toolItem) {
      // allowing only “iwatch” module’s icon in navigation header controls as per LPAD-55595
      // allowing "conws" module's add workspace icon in navigation header controls as per LPAD-97464
      return (toolItem.id.indexOf('iwatch/') === 0 || toolItem.id.indexOf('conws/') === 0)  && rightSide.add(toolItem);
    });
  }

I don't understand the need to have these conditions in the first place, why not just allow all?

At a loss,

Jan

Jan Velas

I currently have an open support ticket about this and it seems the conditions are not going away.

Provided reason:

Development have advised this is a known limitation as icons on headers are restricted due to limited space.

I have asked for a final confirmation in case we misunderstood each other with the Support.

Jan Velas

Hello forums,

Just got a final confirmation that the conditions are not going away, but the whole navigation.header is proposed to be completely reworked somewhere around 23.1/23.2

Quoting my ticket:

Development have advised it is intentional to restrict adding icons in header. It is not currently feasible to extend it to allow adding icons for other modules with current header. It will be evaluated when implementing new header web component which is proposed for 23.1/23.2 release timeframe.

I'll try to make a mental note and come back to this thread when the new header comes out.