Make topic non clickable?

[DritonC]

Hello,

Is it possible to make the 'test 1' topic non-clickable? I have placed it there to hold "test 1.1" underneath, and I want "test 1.1" to be clickable, but not "test 1." Does anyone have any ideas on how I can achieve this?

Thanks!

[amaradiswamy]

Hi @DritonC 

You can do with a simple CSS, but you may need to train the team properly on configuring the topics as you are disabling the level1 topic hyperlink.

Go to the theme record tagged to the portal and under one of the stylesheet, you may insert below CSS

.level-one-topic-name
{
pointer-events:none;
}

[DritonC]

Hi @amaradiswamy 

hank you for the suggestion. I realize I was not clear enough in my original post and forgot to mention that I only want to achieve this for the HR topic and not for the other topics

[amaradiswamy · Accepted solution]

Hi @DritonC 

In that case, I think we need to modify below components

1. Clone OOB widget " Employee Center Navigation" and give "ID" as per your naming convention

 Search for the text " Mega menu for 2 levels of topic hierarchy" in the "Body HTML template", replace the below code

 <a ng-init="item.ngHref = getMegaMenuItemHref(item)" ng-href="{{item.ngHref}}" id="level-one-topic-name-{{$index}}" class="level-one-topic-name" ng-click="handleMegaMenuItemClick($event, item)" ng-attr-title="{{ c.isIE ? item.name : undefined }}" aria-label="{{item.name}}" ng-class="{'level-one-first-item': $index==0}">
                    <span class="level-one-topic-ellipsis">
                      {{item.name ? item.name : item.label}}
                    </span>
</a>

with (Please make sure to change the sys_id of parent-topic in the below code):

<a ng-if="item.parent_topic == '06d3df67c3053010069aec4b7d40dd70'" ng-init="item.ngHref = getMegaMenuItemHref(item)" ng-href="{{item.ngHref}}" id="linklevel-one-topic-name-{{$index}}" class="disableTopicLink level-one-topic-name" ng-click="handleMegaMenuItemClick($event, item)" ng-attr-title="{{ c.isIE ? item.name : undefined }}" aria-label="{{item.name}}" ng-class="{'level-one-first-item': $index==0}">
                    <span class="level-one-topic-ellipsis">
                      {{item.name ? item.name : item.label}}
                    </span>
                  </a>
                  <a ng-if="item.parent_topic != '06d3df67c3053010069aec4b7d40dd70'" ng-init="item.ngHref = getMegaMenuItemHref(item)" ng-href="{{item.ngHref}}" id="level-one-topic-name-{{$index}}" class="level-one-topic-name" ng-click="handleMegaMenuItemClick($event, item)" ng-attr-title="{{ c.isIE ? item.name : undefined }}" aria-label="{{item.name}}" ng-class="{'level-one-first-item': $index==0}">
                    <span class="level-one-topic-ellipsis">
                      {{item.name ? item.name : item.label}}
                    </span>
                  </a>

Add below code to the css

.disableTopicLink{
pointer-events:none;
cursor:default;
}

2. Now, open OOB widget "Employee Center Header" in the server script, search for "

employee-center-navigation", replace this text with the ID you have given for above widget.

data.escNavigation = $sp.getWidget("copy-ec-header");

3. Now, open ESC portal. You might get errors. Go to Application restricted caller privileges module and search for the records with Status as "Invalidated" and change the status for those records to Allowed. Please make sure you are updating only the relevant records