How to Personalize Smart UI Header Easily?

Benjamin Shapiro · August 21, 2019

No doubt this has been asked before, but I'm unable to find an answer.
I'm interested in simply adding a new icon or two to the global header of the Smart UI page. Can this be done without a full SDK, etc.?
Many thanks!
Ben

David Templeton · August 21, 2019

first, why the icon? and second, no full sdk needed

David Templeton · August 21, 2019

first, why the icon? and second, no full sdk needed

Benjamin Shapiro · August 21, 2019

Thanks for the quick reply. There is interest in adding additional, easily-visible "quick links" to the header to be able to jump to various other web-based locations.

David Templeton · August 21, 2019

hmm, not a good design choice. I would add a widget with navigation from there. The problem becomes that it looks crowded.

John Underhill · August 29, 2019

I need similar. In Classic UI I have a header Appearance that renders a banner that is a corporate requirement. Is there no way of adding something like an Appearance Banner to the SmartUI? CSUI SDK the only way to go?

Benjamin Shapiro · August 29, 2019

Hi John. There's this discussion: https://forums.opentext.com/forums/discussion/comment/931868
If you're looking to just change the css it's not too bad, but (I understand) anything more complicated will require the SDK.

John Underhill · August 29, 2019

Thanks. Yes I swapped out the image (and made a bit more space for it) using the CSSs for basic branding. I need a big red marquee thing across the top saying something like "if you use this system, don't do bad" - I summarize. We have an Appearance in Classic UI. CSUI SDK it is then :-(

Chris Meyer · March 27, 2020

Hi John, try adding something like this to your custom SmartUI CSS:

[role=banner]:before {
    content: 'If you use this system, don\'t do bad.';
    display: block;
    background-color: red;
    height: 2em;
    line-height: 2em;
    color: #fff;
    text-align: center
}

John Underhill · July 13, 2020

Finally got around to trying this, but nothing appeared. I also tried it with div[role=banner] as the selector is on a div. No joy.

John Underhill · July 13, 2020

My bad. The single quotes transmogrified during cut and paste. Works perfectly.

Ferdinand Prantl · July 22, 2020

About new icons or other components in the global header: there is no supported interface available for it.

The global header is componentised and ready for extensibility, but adding of new components was disabled, until the UI gets redesigned to accommodate more than a couple of icons withtut getting distorted. Removing of existing components is possible, but only programmatically; there is no administration page to change the defaults.

If you want to offer a feature that is available on any page, like the global icons to access Favourites or Search, you can have a look at the User Profile menu dropdown. You can add a menu item there executing your command, just like a click on an icon in the header would do. You cannot do something as fansy as the favourite star, but a simple action triggering can be achieved by a menu item just as well.

Ferdinand Prantl · July 22, 2020

About custom banners or other static content inserted to the page header or footer: there is no supported interface available for it.

The page structure is hardcoded to contain the global header and the perspective panel. If you insert some other element to the structure using styles like in the Chris' example, you will probably break styling of some component on the page and you will have to work around it it by adding some "forbidden" style overrides. Forbidden, because they would likely get broken when upgrading to the next quarter update and cause you unwanted expenses. CSS selectors in Smart UI stylesheets are not a public interface, unless not stated otherwise, like in the case of the company logo replacement.

An alternative solution could be inserting a widget to the top of the landing page with a warning about planned outages or other important events. OOTB widgets like Wiki, WebReport or Placeholder would work for this.

You could file a feature request for supporting global components like banners on Smart UI pages.

John Underhill · July 23, 2020

For us it's a fixed requirement for the app to have the Global Appearance on all pages. I do think CS needs to have a consistent UI / feature set across the product or it will put clients off upgrading. Appearances should be universal?

Ferdinand Prantl · August 24, 2020

Appearances are not universal even in Classic UI. You enable it on a single page or on multiple pages - the Classic UI action pages. If you enable it appearance on a wrong page, it may not work.

Smart UI is not structured as pages. For example, you cannot assign the appearance for Add Document to a Smart UI page, because there is none. You look for extension points to hook in to Smart UI actions.

Some scenarios which appearances are used for could be implemented as a common feature in both Smart UI and Classic UI. For example, a (static) top banner to be always (on each page) displayed and informing about important events like a server down time period. You could file a feature request for that.

Joao Pimentel · September 2, 2020

If you have no concerns in changing OOTB HTML, to achieve this you can add HTML/javascript code that performs layout changes in the following file:

<OTHOME>\module\csui_16_2_0\html\app.html

If you want to limit pollution to this file you can just add the call to a external file with your changes using weblingo call keyword:

;;call <.HTMLPrefix() + '../mycustomlayoutchanges/banner/html/my_smartui_app.html'>()

Remember that you would need to perform this change in all environment servers and that a OTCS update/patch may override this change requiring you to add this line again.

Ferdinand Prantl · September 2, 2020

If you have no concerns in changing OOTB HTML

If you already modify files that you are not supposed to, you would probably not ask in this forum for help ;-) If you do not do it, you would better not start with it. Not every company pays an in-house CS developer, who can assess the risk of such changes, keeps the servers working and fixes problems when patches and upgrades are applied.

Officially, you are forbidden to tamper with deployed files, that are not meant to me modified. We need to trust the system that it behaves as it was designed, because we make assumptions depending on the deployed code, when we try explaining what is happening. If everybody were changing files, what they wanted, we would not be able to use our knowledge about the system and would have to debug problems on customer machines. That is why we differ between the deployed files and the extension files. If you cannot customise something, you are supposed to file a feature request about it.

Another problem with the top banner is, that you are likely to come to a conflict with the global styling. OT customers ask for making patching and upgrading easier and cheaper. If you do unsupported things, you will be able to complain only to yourself, why you pay extra money, when a patch or upgrade breaks something.

I understand, that neither option is optimal - doing unsupported things or waiting until a feature is added. But only the former will cost you immediate cash ;->

If you will not hammer OT management with requests for customisability, you will be missing things like this forever :-/ When you see that this customisability has not added for five years of the Smart UI's life, you can assume that other features have been constantly prioritised higher, because somebody did hammer OT support with them ;-)

How to Personalize Smart UI Header Easily?

Best Answer

Answers

Categories