The Review Date Display component is the meat and potatoes of our KB Audit Flow solution on the front end. It's the component that visitors see, displaying the date the article was last reviewed by the team. It also checks the user's roles to determine if they have the specified role(s) to access the Audit checkbox which updates the last reviewed date.
In this part of the KB Audit Flow series, we're going to create the Review Date Display Info component.
We highly recommend reading the first two posts in this series to get a better understanding of the other components and prerequisites required for this component to function properly.
Create the LastReviewedInfoTaplet.ftl file
To get started, create a new file: /res/components/LastReviewedInfoTaplet.ftl.
Note: These instructions cover the method for creating the component using the Community Plugin SDK. For an easier UI-based approach, we recommend using Studio to create the component. The content of the file below remains the same.
Here are the contents of the new file:
<style>
.audited-component-checkbox{
margin-top: -20px;
margin-bottom: 35px;
}
label.lia-form-label.audited-label-set {
padding-top: 4px;
font-weight: bold !important;
float:left;
}
.litho-audited-checkbox-style{
float: left;
}
.lia-form-label-wrapper.audited-label-float{
float: left;
}
.lia-inline-confirm.confirm-label-float{
float: right;
margin-top: 4px;
margin-left: 12px;
}
a.litho-tkb-audited-deny {
cursor: pointer;
}
a.litho-tkb-audited-approve {
cursor: pointer;
}
.hide-article-component-here{
display:none;
}
</style>
<#-- <#import "article" as com> -->
<div class="hide-article-component-here">
<@component id="article"/>
</div>
<#assign message_uniqueId = -1 />
<#if env.context.message??>
<#assign message_uniqueId = env.context.message.uniqueId />
<#assign lengthOfDomain = env.context.message.webUi.url?index_of("/t5") />
<#assign communityDomain = env.context.message.webUi.url?substring(0,lengthOfDomain) />
</#if>
<#-- ${message_uniqueId} -->
<#-- <div class="reload-lastReviewedComponent">
<@component id="LastReviewedInfoTaplet" />
</div> -->
<#-- REST call to get the user's roles -->
<#list restadmin("/users/id/${user.id?c}/roles").roles.role as role>
<#-- Look for the role name you want to display content for -->
<#if role.name?? && ( (role.name == "Administrator") || (role.name == "Documentation") )>
<div class="audited-component-checkbox">
<div class="lia-quilt-row lia-quilt-row-standard lia-quilt-row-first lia-quilt-row-last">
<div class="lia-quilt-column lia-quilt-column-24 lia-quilt-column-single lia-input-edit-form-column">
<div class="lia-quilt-column-alley lia-quilt-column-alley-single">
<div class="lia-form-row lia-form-auto-subscribe-to-thread-entry lia-form-row-reverse-label-input lia-form-row-checkbox litho-audited-checkbox-content">
<div class="lia-quilt-row lia-quilt-row-standard litho-audited-checkbox-style">
<div class="lia-quilt-column lia-quilt-column-24 lia-quilt-column-single">
<div class="lia-quilt-column-alley lia-quilt-column-alley-single">
<div class="lia-form-label-wrapper">
<input class="lia-form-auto-subscribe-to-thread-input audited-checkbox" id="LastReviewAudited" name="auditedCheckbox" type="checkbox">
</input>
</div>
</div>
</div>
</div>
<div class="lia-form-label-wrapper audited-label-float">
<label for="LastReviewAudited" class="lia-form-label audited-label-set">
Audited
</label>
</div>
<div class="lia-inline-confirm confirm-label-float confirm-label" style="display:none;">
Confirm?
<a type="submit" class="litho-tkb-audited-approve">
Yes
</a> /
<a type="submit" class="litho-tkb-audited-deny">
No
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<#break>
</#if>
</#list>
<@liaAddScript>
;(function($){
$(".audited-checkbox").click(function(){
$('.confirm-label').toggle();
});
$(".litho-tkb-audited-approve").click(function(){
$(".audited-checkbox").attr("disabled", true);
<#if message_uniqueId != -1 >
<#assign session_key = restadmin("/authentication/sessions/login?user.login=LOGIN&user.password=PASSWORD").value />
var currentDateTime = new Date();
var dateTime = currentDateTime.toISOString();
$.ajax({
type:"POST",
url:"${communityDomain}/restapi/vc/messages/id/${message_uniqueId}/metadata/key/custom.message_last_reviewed_date/set?value="+dateTime+"&restapi.session_key=${session_key}",
contentType: 'application/json',
success: function(res) {
console.log(res);
console.log("Added");
location.reload(true);
}.bind(this),
error: function(xhr, status, err) {
console.error(xhr, status, err.toString());
console.log("unable to add last_reviewed_date field into DB");
}.bind(this)
});
</#if>
$(".audited-checkbox").prop("checked", false);
$('.confirm-label').hide();
});
$(".litho-tkb-audited-deny").click(function(){
$(".audited-checkbox").prop("checked", false);
$('.confirm-label').hide();
});
})(LITHIUM.jQuery);
</@liaAddScript>
This example should contain everything you need to get started, but note the USERNAME and PASSWORD in our example needs to be replaced.
Code breakdown
In this section, we will examine some of the parts of the component's code to better understand how the component works.
<style>
...
</style>
Everything within the <style> tags sets the unique CSS styling that applies to elements within the component.
<div class="hide-article-component-here">
<@component id="article"/>
</div>
This section imports the article into the component so we can retrieve its unique identifier.
<#assign message_uniqueId = -1 />
<#if env.context.message??>
<#assign message_uniqueId = env.context.message.uniqueId />
<#assign lengthOfDomain = env.context.message.webUi.url?index_of("/t5") />
<#assign communityDomain = env.context.message.webUi.url?substring(0,lengthOfDomain) />
</#if>
This section includes an if statement that checks for the existence of a valid message and entering data for the Last Reviewed Date and Audited checkbox response.
This includes retrieving the message's unique identifier and domain.
<#-- REST call to get the user's roles -->
<#list restadmin("/users/id/${user.id?c}/roles").roles.role as role>
<#-- Look for the role name you want to display content for -->
<#if role.name?? && ( (role.name == "Administrator") || (role.name == "Documentation") )>
<div class="audited-component-checkbox">
<div class="lia-quilt-row lia-quilt-row-standard lia-quilt-row-first lia-quilt-row-last">
<div class="lia-quilt-column lia-quilt-column-24 lia-quilt-column-single lia-input-edit-form-column">
<div class="lia-quilt-column-alley lia-quilt-column-alley-single">
<div class="lia-form-row lia-form-auto-subscribe-to-thread-entry lia-form-row-reverse-label-input lia-form-row-checkbox litho-audited-checkbox-content">
<div class="lia-quilt-row lia-quilt-row-standard litho-audited-checkbox-style">
<div class="lia-quilt-column lia-quilt-column-24 lia-quilt-column-single">
<div class="lia-quilt-column-alley lia-quilt-column-alley-single">
<div class="lia-form-label-wrapper">
<input class="lia-form-auto-subscribe-to-thread-input audited-checkbox" id="LastReviewAudited" name="auditedCheckbox" type="checkbox">
</input>
</div>
</div>
</div>
</div>
<div class="lia-form-label-wrapper audited-label-float">
<label for="LastReviewAudited" class="lia-form-label audited-label-set">
Audited
</label>
</div>
<div class="lia-inline-confirm confirm-label-float confirm-label" style="display:none;">
Confirm?
<a type="submit" class="litho-tkb-audited-approve">
Yes
</a> /
<a type="submit" class="litho-tkb-audited-deny">
No
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<#break>
</#if>
</#list>
This section checks for the user's assigned role(s) and compares them against a list of specified roles. If the user's role matches the role(s) specified, the "Audited" checkbox component is also displayed.
In our example, we specified two roles: Administrator and Documentation.
<@liaAddScript>
...
</@liaAddScript>
liaAddScript enables the use of Community's JQuery libraries used to access core features. You can find more information about liaAddScript in our developer documentation.
