Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

dhwanilshah
New Contributor II

How to add custom navMenu items in Qlik Sense Extension?

Hello Everyone,

        I need to add custom menu Items to my qlik sense extension as below:

ss.png        

I have explored a little bit and saw this in the DOM:

```

<a ng-repeat="menuItem in navMenu.items" ng-if="menuItem.isVisible()" ng-class="[menuItem.cssClasses, menuItem.dynamicCssClasses()]" qva-activate="menuItem.action()" q-title-translation="Tooltip.ZoomIn" tid="nav-menu-zoom-in" class="ng-scope lui-icon lui-icon--expand white border" title="Full screen"></a>

```

But I am not sure how to add my custom items in this navMenu, any ideas or suggestions are welcome.

Thank you in advance.

1 Solution

Accepted Solutions
dhwanilshah
New Contributor II

Re: How to add custom navMenu items in Qlik Sense Extension?

I found the solution while going through the $scope object.

The navMenu object is located at: $scope.$parent.$parent.navMenu

To add custom option, create a object as below:

               var customBtnNavMenu = {

                   'action': $scope.callBackFunction, // main callback function for the nav menu

                   'cssClasses': 'lui-icon lui-icon--cogwheel white border', // css classes

                   'isVisible': isVisible, // call back function to decide visibility

                   'tid': 'nav-menu-custom', // unique identifier

                   'translation': 'My Custom Nav Option' // title that shows up on hovering

               };

Add it to the nav Menu:

                    $scope.$parent.$parent.navMenu.items.push(customBtnNavMenu);

Thank You!

2 Replies
dhwanilshah
New Contributor II

Re: How to add custom navMenu items in Qlik Sense Extension?

I found the solution while going through the $scope object.

The navMenu object is located at: $scope.$parent.$parent.navMenu

To add custom option, create a object as below:

               var customBtnNavMenu = {

                   'action': $scope.callBackFunction, // main callback function for the nav menu

                   'cssClasses': 'lui-icon lui-icon--cogwheel white border', // css classes

                   'isVisible': isVisible, // call back function to decide visibility

                   'tid': 'nav-menu-custom', // unique identifier

                   'translation': 'My Custom Nav Option' // title that shows up on hovering

               };

Add it to the nav Menu:

                    $scope.$parent.$parent.navMenu.items.push(customBtnNavMenu);

Thank You!

balabhaskarqlik
Honored Contributor

Re: How to add custom navMenu items in Qlik Sense Extension?

That's good, helpful to others.

Community Browser