Moving "Copy Permalink" to the top of your Service Portal and Knowledge Portal Article views

[Lucas Vieites]

I recently published Adding "Copy Permalink" to the top of your Knowledge Base Article view (kb_view), which focused on changing where and how the "Copy Permalink" link was placed in the legacy (or "Advanced") kb_view page. One of the comments on that article was a request to do the same on the Portal, which is a bit more complex, but anyway, here it is.

Preparing the terrain

The first thing to take into account is that we are going to make changes in a scoped application. For the purpose of this article, you will need to have the appropriate roles to make changes in the Knowledge Management - Service Portal application.

We are going to clone and make changes to the following records:

• the kb_article_view portal page: /nav_to.do?uri=sp_page.do?sys_id=a60dcc050be432004ce28ffe15673a54
• the Knowledge Article Content (kb-article-content) widget: /sp_widget.do?sys_id=a47ea1cb0b9432004ce28ffe15673a5b

Instructions

Step 1: Cloning the portal page

The first step will be to navigate to the kb_article_view portal page: Service Portal > Pages and open the page's record. If all goes well you will see a button labeled Clone Page in the top right corner. Click on the button to create a complete copy of the page. This will create a new record that looks like this:

You can (and should) change the Title and ID of this page to suit your naming standards. I will add my name after the default names so I can quickly identify them. Note that I have added a green outline around Container 2 of this page and that there is a modified widget in there (with my name as a suffix). This is what we'll do next.

Step 2: Cloning and editing a portal widget

At the bottom of your newly cloned portal page, you will see a related list named Containers. The widget we are going to clone and replaced is located inside Container 2 and in Column 1.

1. Click on Knowledge Article View <your page name> - Container 2.
2. In the highlighted container section, click on Knowledge Article Content inside Column 1. This is the widget we need to clone and edit. (NOTE: don't click on the word Instance, we'll get to that later)
3. In this new form, click on Clone Widget in the top right.
4. Change the Name and ID of the new widget to be able to identify them later.
5. Save

We are going to change the content of the Body HTML template of this new widget instance. At around line 143 you will find the line:

<p class="pull-right kb-permalink" ng-if="::!c.isMobile"><a href="javascript:void(2)" ng-click="c.copyPermalink()">{{::data.messages.COPY_PERMALINK}}</a></p>

This is where the Copy Permalink link is shown at the bottom of the article. Copy this line and paste it under line 111, which is where the star rating is shown. Surround this new line with <span> tags for consistency. It should look like this:

<span class="sp-stars" ng-if="!c.KBRatingStyle">
  <span uib-rating sp-rating ng-model="::data.avgRating" max="5" readonly="true" aria-label="{{::data.messages.ARTICLE_RATING}}" aria-hidden="true" state-on="'fa fa-star kb-star-on'" state-off="'fa fa-star kb-star-off'" />
</span> <!-- This is line 111 -->
<span> <!-- This is the new <span> with the PermaLink code -->
  <p class="pull-right kb-permalink" ng-if="::!c.isMobile"><a href="javascript:void(2)" ng-click="c.copyPermalink()">{{::data.messages.COPY_PERMALINK}}</a></p>
</span>

Step 3: Replacing the portal widget with your version

Once you save your new widget instance, navigate back to the Container 2 section of your cloned kb_article_view page:

1. Service Portal > Pages > Find your page
2. Click on Column 1 in the Page Content section
3. Scroll down to the related lists
4. Open Knowledge Article Content in the Instances tab (you will have to click on the first column)
5. Click on the Widget tab
6. In the Widget field, select your own widget, either by starting to type its name or by using the looking glass to search for it:
   
   This step will assign the new widget with the link at the top to the portal page
7. Save/Update

Step 4a: Routing users to your new kb_article_view in the Service Portal

The only thing left to do is to tell the Service Portal that it has to show this new view when users click on a KB article in a portal. You do this with the Page Route Maps.

1. Navigate to Service Portal > Page Route Maps
2. Find the route map for Knowledge Article View
3. Update the Route to field with the ID of your own kb_article_view.
4. Save

Step 4b: Routing users to your new kb_article_view in the Knowledge Portal

If you are also using the Knowledge Portal (/kb), you will need to perform these additional steps. As always, there is more than one way, this time we'll use the Service Portal Designer:

1. Open an article inside the Knowledge Portal
2. Ctrl+click on the title of the article. You will see a menu with several options:
   
3. Select Page in Designer
4. • You will see a GUI where you can drag and drop widgets from the column on the left side into the page design.
5. Find your widget and drag it right underneath the existing Knowledge Article Content widget on the canvas
   
6. Delete the old (default) content block by clicking on the garbage bin that appears in its top-right when you select it.
7. That's it. The change should be automatically saved

We're done!

You should be done now. Go ahead and check that the modifications have been saved correctly by navigating from the Service Portal home page (<instance-name>.service-now.com/sp) or from the Knowledge Portal home page (<instance-name>.service-now.com/kb).

You should see something like this:

I hope this article will help you set up your knowledge article views and have a great Knowledge experience. And don't forget to have fun!