Recently, I have been working on a Power Apps Portal project, and our customers requirement is to add Knowledge Base Articles (KB Articles) on the portal webpages so that they can easily change the content inside Dynamics 365, here are two ways to add KB Articles on the webpage.
Table permissions must be set first, this may be different depending on the requirements. Create a new Table Permission record, select ‘Knowledge Article’ as your Table Name, choose your Website Lookup and select ‘Global’ as the Access Type. In the Privileges sub-grid, choose Read. Save the record. Finally, make sure to add Web Roles, select Related -> Web Roles, then add your web roles.
Next step is to add the Fetch Query on your custom webpage, make sure to insert your fetch query inside the main block {% block main %}. You can fully customise your fetch query, in my case, I just search the target KB Articles based on the article public number.
You can directly add a <p> tag in the web template that displays the KB Article content, retrieve the article content using the Liquid, e.g.
{% assign article = articlefetch.results.entities[0] %}
Then pass into the <p> tag that display on the portal, e.g.
<p class="description" id="content">{{article.content}}</p>
If you want to add the KB Article to a specific location, for instance, add to a specific Advance Form Step page, then you will need to use Jquery to achieve this.
You’ll still need to retrieve the KB Article content in the Web Template, but instead of using Liquid, we add a script tag and save the content in a variable, e.g.
<script>var articleContent = `{{articlefetch.results.entities[0].content}}`;</script>
Tips: we use ` instead of the “ as the article content may contain “ characters, hence we use ` to prevent this issue.
Then you can use custom JavaScript on the specific web form step to set the content.
To set the content, use the append(); method e.g.
Add the KB article content after a lookup field
var articleContent = articleContent //Set the KB Article content variable
$("#mag_occupation_name").parent().after(articleContent);
The end result: