Part 16: Create a new page route for the Knowledge article page

Navigate to UI Builder

• Navigate to Now Experience Framework > Experiences.
• Open the Experience for Panda Tech.
• On the right side of the form, Besides the Admin panel, Click on the (i) Icon to open the Admin panel.
• Click Open UI Builder.

Alternatively,

• Navigate to Now Experience Framework > UI Builder.
• From My experience, Click Panda Tech.

Create knowledge article page

• Click on Create a page.
• Fill in the fields, as appropriate.

1. Name – Knowledge Article
2. Path – knowledge-article
3. Click Create
4. On the Parameters screen, Click Add optional parameter
   1. Click Add.
   2. Give sysId andclick save
5. New blank page should be created.

Add test sysId to test the page as we design

• On the URL section, click where is says knowledge-article.
• Add f27d7f79c0a8011b0018f9d700d2b9aa and close the window.
• It should look something like this.

Add Article component

• Add a container to the page.
• Click (+) toadd component to the container.
• In search box, type Knowledge and select.

Get Article details using data broker

• Create a Data resource
• Click + Add
• Search for keyword “Get Knowledge record”
• From the Server Data section, select Get Knowledge record details
• Click Add
• In the configuration section, Fill out the fields below
  • Article ID – @context.props.sysId
• Observe the JSON on the right side of the screen where it shows result for the Data broker

{
   "articleHTML": "",
   "isEditable": false,
   "articleSysId": null,
   "infoMessage": "",
   "errorMessage": "Knowledge record not found",
   "templateFieldData": [],
   "versionDetails": {
     "isInstalled": false,
     "isEnabled": false,
     "history": [],
     "showHistory": false,
     "versionDisplay": "",
     "versionDisplayLabel": "",
     "newVersionAvailable": false,
     "warningMessage": ""
   },
   "languageDetails": [],
   "kbDocSysId": "",
   "showFeedbackOptions": false,
   "showStarRating": false,
   "showYNRating": false,
   "showFlag": false,
   "showFeedbackComments": false,
   "enableActionableFeedbackForRating": -1,
   "enableActionableFeedbackForHelpful": false,
   "enableActionableFeedbackForFlag": true,
   "isKBAdmin": false,
   "isKBOwner": false,
   "commentsThreshold": 5,
   "hasComments": false,
   "docviewerEnabled": false,
   "articleInfo": {
     "author": "",
     "displayAttachments": false,
     "kbCategory": "",
     "workflowState": "",
     "kbKnowledgeBase": "",
     "number": "",
     "shortDescription": "",
     "sysId": "",
     "sysUpdatedOn": "",
     "sysViewCount": 0,
     "rating": 0,
     "revisedBy": "",
     "baseVersion": "",
     "isExpired": false,
     "officeDocUrl": ""
   },
   "totalUsefulCount": 0,
   "usefulYesCount": 0,
   "versionInfo": {
     "versions": [],
     "selectedVersion": []
   },
   "languageInfo": {
     "langVersions": [],
     "selectedLangVersion": []
   },
   "secondaryFields": [
     {
       "type": "timeToRead",
       "icon": "clock-outline",
       "text": ""
     },
     {
       "type": "date",
       "icon": "calendar-outline",
       "text": "Updated {0}",
       "value": ""
     },
     {
       "type": "string",
       "icon": "eye-outline",
       "text": "0 views"
     },
     {
       "type": "string",
       "icon": "star-outline",
       "text": "Average rating 0/5"
     }
   ]
 }

Bind props to the component property

• Let’s use some of the properties from the JSON above and bind them to the component
• From the Content section, select Knowledge Content 1 and change the following component properties.
  • Article Details – @data.get_knowledge_record_details_1.articleDetails
  • Secondary Fields – @data.get_knowledge_record_details_1.articleDetails.secondaryFields
• Click Save.
• The end result should be something like this. (Also Change the layout to match the one from previous tutorial)

Great!! We have successfully created a Knowledge article page.

Open https://<instance-name>.service-now.com/now/panda_tech/knowledge-article/params/sys-id/f27d7f79c0a8011b0018f9d700d2b9aa