How to make comments mandatory for knowledge feedback task submission

[DevenderS]

Hi Team,

I need a help with a requirement where when user submits feedback through employee center portal for a article by clicking on " helpful no " then a popup will come with options this is already there in our system.

I have a issue with making comments mandatory for feedback submission to a article through Helpful No or Rating below 3 stars to article from employee center.

If I make comments mandatory the feedback is still getting submitted when clicked on No thanks or closing the popup (X) by clicking on this or clicking on anywhere without submitting the comments the feedback is getting submitted.

Any help appreciated thanks in advance

[Ankur Bawiskar]

@dev_S 

that link has a working solution when Other is selected the Details is mandatory

you can modify the condition as per your requirement.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar]

@dev_S 

Thank you for marking my response as helpful.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[GlideFather]

Olá @DevenderS,

it seems to be the widget IAR Knowledge Article Helpful but I do not recommend updating it, instead duplicate it and update the newly created one.

Making this field mandatory might be difficult, see the widget above if it helps you

[dev_S]

Hi @GlideFather ,

I have cloned the OOB widget KB Article Content and made changes now its working partially and I need to still achieve the functionality as mentioned in the screenshot.

[Shruti]

Hi,

Navigate to Service portal -> Widgets

Open "Knowledge article content" widget

Go to the angular template related list "kb-feedback-task-modal"

Paste below code to the HTML template 

<div class="feedback-modal" ng-class="c.isMobile ? 'kb-mobile' : 'panel panel-default kb-desktop'" role="dialog" aria-label="${Feedback}" aria-modal="true" aria-describedby="feedbackDesc">
  <div class="modal-header">
    <h2 id="flagTitle" class="modal-title h4">{{data.messages.THANKYOU_FEEDBACK}}</h2>
    <button type="button" ng-if="data.details" class="close" data-dismiss="modal" ng-click="c.closeTaskPopup($event)" aria-label="{{data.messages.CLOSE}}" ><i class="fa fa-times" aria-hidden="true"></i></button>
  </div>
  <div class="modal-body">
    <div class="row row-div row-bottom-padding">
      <span id="feedbackDesc">{{data.messages.ADDTIONAL_DETAILS}}</span>
    </div>
    <div class="row row-div">
      <div class="type-multiple_choice">
        <fieldset class="radio ng-scope" id="radioBtnGrp" role="radiogroup">
          <legend  aria-label="Please select your reason">{{data.messages.REASON}}</legend>
          <label ng-repeat="res in c.reasons" for="kb_reason_{{$index}}" class="modal-radio" ng-keydown="c.selectReason($event, this)">
            <div class="inline">
              <input type="radio" aria-checked="{{res.reason_id == c.data.reason}}" name="reason" ng-model="::data.reason" id="kb_reason_{{$index}}" value="{{res.reason_id}}" />
              <span></span>
            </div>
            <div class="inline reason-label">
              {{res.reason_desc}}
            </div>
          </label>
        </fieldset>
      </div>
    </div>
    <div class="row row-div">
      <label for="detailsComment">
        <span class="fa fa-asterisk mandatory field-decoration-indicator" ng-class="{'mandatory-filled':c.data.details.length}" aria-hidden="true"></span>
             
        {{data.messages.DETAILS}}</label>
      <textarea placeholder="{{data.messages.Details}}" ng-model="::data.details" class="form-control resize" rows="3" id="detailsComment"></textarea>
    </div>
    <div role="alert" aria-live="assertive" class="alert-danger" ng-shown="!c.flagMessage">{{c.flagMessage}}</div>
    <div class="row button-div">
      <button type="button" ng-disabled="!data.details" class="btn btn-default btn-pad" data-dismiss="modal" ng-click="c.closePopup()" aria-label="{{data.messages.NO_THANKS}}">{{data.messages.NO_THANKS}}</button>
      <button type="button" ng-disabled="!data.reason || !data.details" class="btn btn-primary " aria-label="{{data.messages.SUBMIT}}" id="feedbackTask_submitBtn" data-dismiss="modal" ng-click="c.submitFeedbackTask()">{{data.messages.SUBMIT}}</button>
    </div>
  </div>
</div>
<style>
  .feedback-modal .modal-radio {
    display: block;
    padding-bottom : 0.5rem;
  }
  .feedback-modal .modal-radio .reason-label{
    margin-top: 0.4rem;
  }
  .feedback-modal .row-bottom-padding{
    padding-bottom :0.8rem;
  }
  .feedback-modal .resize{
    resize: vertical;
  }
  .modal-header h2{
    display: inline;
  }
  /*Mobile related*/
  .feedback-modal.kb-mobile.modal-header {
    padding:1.25rem 1.69rem !important;
  }
  .feedback-modal.kb-mobile .row-div{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .feedback-modal.kb-mobile .button-div{
    padding:1.25rem;
  }
  
  .feedback-modal.kb-mobile .button-div .btn{
    width:49%;
  }
  
  .feedback-modal.kb-mobile .type-multiple_choice input[type="radio"]{
    margin-top: -0.66rem !important; 
  }
  .feedback-modal.kb-mobile .type-multiple_choice .modal-radio{
    margin-bottom: 0.31px !important; 
  }
  .feedback-modal.kb-mobile .type-multiple_choice span{
    position: relative !important;
    padding-top: 0px !important;
  }
  .feedback-modal.kb-mobile .type-multiple_choice span:after{
    top:0.6875rem !important;
    left:-1.32rem !important;
  }
  /*Desktop*/
  .feedback-modal.kb-desktop .button-div .btn-pad{
    margin-right: 0.6rem;
  }
  .feedback-modal.kb-desktop .button-div .btn{
    width:auto;
  }
  .feedback-modal.kb-desktop .row-div{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .feedback-modal.kb-desktop .type-multiple_choice input[type="radio"]{
    margin-top: -1.05rem !important; 
  }
  .feedback-modal.kb-desktop .type-multiple_choice .modal-radio{
    margin-bottom: 0.5rem !important; 
  }
  .feedback-modal.kb-desktop .type-multiple_choice span{
    position: relative !important;
    padding-top: 0px !important;
  }
  .feedback-modal.kb-desktop .type-multiple_choice span:after{
    top:1rem !important;
    left:-2.1rem !important;
  }
  .feedback-modal.kb-desktop .button-div{
    padding-top: 1.5rem;
    padding-right: 2rem;
    text-align:right;
  }
  @media screen and (max-width: 760px){
    .modal-dialog {
      margin-top: 0px !important;
    }
  }
</style>