Dynamically customize content within default header

Canvas Canvas Questions
1

Hi guys,

Perhaps a generic question, we have a unique usecase where we’d like to dynamically update the header content (for example title names based on page/report accessed added inside the header). Currently, we know that the content is rendered based on what is defined within MainCtrl controller section in Index.ftl. Is there an example of how we can achieve this customization of updating title names? For example, the area where we are trying to update is highlighted in red in the attached pic.

CanvasForum_Question.png1361×60 6.91 KB

Thanks!

2

In your index.ftl under

<ul class="nav navbar-top-links navbar-right hidden-print" style="margin-top: 0px;" >

add following

<li>{{pageTitle}}</li>

In system/main.js

$scope.pageTitle = 'Default Name';
var pageTitles = {
    page1: 'Page 1',
    page2: 'Page 2',
    home: 'Home page',
    base: 'Base page',
    login: 'TM1 Login'
};

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    $scope.pageTitle = pageTitles[toState.name];
});

You define headers in pageTitles object. Where property names (on the left) are state names of pages and property values (on the right) are names you want to display in the header.

1 Like
3

Thanks Andriy, cheers!