Smart UI Customization

M Paulo Prasad

Hi All,

We were trying to explore Smart UI Landing page in OTCS and were wondering if we can customize the landing page in a manner which creatively suits our liking, We have tried adding widgets and are able to showcase data in them but what we intend to do is to change the complete look and feel of these widgets as well as the container on which these widgets reside on. Be it the alignment of these widgets, the CSS of these widgets , sizing of the data inside these widgets , change the color of the container in which the Widgets reside on ,Change the title of the landing page , just to name a few of the items that needs to be customized or modified as per our liking.

My Questions are as follows :

Basically can we completely customized the landing page of OTCS Smart UI with all the widgets which are also customized as per our liking as a landing page of Smart View Content Server. If yes , it would be really helpful if you have come across such a requirement and provide us with a chunk of source code of it.

Any help on this is much appreciated

Ferdinand Prantl

CS Smart UI is not based on a themable andr otherwise configurable UI framework. Style customisations beyond changing the background colour or the company logo have not been foreseen. The reason is the protection of the customer investment. While you can (technically) restyle anything, there is no guarantee that your styles will work after upgrading the CS or even installing a hotfix. Smart UI styles are not the public interface that we intend not to break.

That said, many people did stronger customisations knowing the risk and accepting that they have to adapt their styles from time to time. We make changes in the HTML markup only when the original one does not serve new requirements any more. For accessibility, for example. It is not often, but it happens.

You can have a look at the style-override package that is downloadable next to the SDK package. It describes how to create an overriding stylesheet. You enter its URL on the Smart View administration page and it will be loaded on the /app page.

Built-in perspective layouts (grid, flow, tabbed, tabbed-flow and zoned - left-center-right and single) use BINF (Bootstrap) grid to place the widgets. You can also register your own perspective view (JavaScript) to be fully in the control of the page layout, which may not be possible by CSS only. But only the flow layout is supported by the Perspective Editor. The others can be used only programmatically on custom pages. They will not be usable if you want to edit the perspective content (widgets) in the Perspective Editor.

The title of the landing page can be changed. It is among the public localisable strings that can be overridden. But there is no administration for it. It is possible only programmatically today. You would have to write a Smart UI extension module (JavaScript) using the SDK.

The best strategy for keeping the TOC of CS low is to avoid styling customisations as far as possible and just use the Perspective Manager to configure the content of the perspectives.