Service Portal - How to show preview (description) of a record next to a list?

[Onoderav]

Hello, everyone!
I would appreciate some help here.

User want to see record's description next to the records' list on Service Portal. But I need to click on the record that I wanted to show the description, correct? How can I achieve this, if when clicking on the record in the list I am already redirected to the record summary?

Is there any ideia how can I achieve this requirement?

Basically, they want to see a preview (just description) of a record. Any suggestions?

[Dnyaneshwaree]

Hello @Onoderav ,

Create new custom widget and add content in it and update it as per your req:
HTML:

<div>
  <div class="record-list">
    <ul>
      <li ng-repeat="record in c.data.records" ng-click="c.showDescription(record.sys_id)">
        {{ record.name }}
      </li>
    </ul>
  </div>
  <div class="record-description">
    <h3>Description</h3>
    <p>{{ c.data.description }}</p>
  </div>
</div>

Client script:

(function() {
  data.records = []; // Initialize records array
  data.description = ''; // Initialize description

  // Fetch initial list of records
  var ga = new GlideAjax('YourScriptInclude');
  ga.addParam('sysparm_name', 'getRecords');
  ga.getXMLAnswer(function(response) {
    data.records = JSON.parse(response);
    $scope.$apply();
  });

  // Function to fetch and show description
  c.showDescription = function(sys_id) {
    var ga = new GlideAjax('YourScriptInclude');
    ga.addParam('sysparm_name', 'getDescription');
    ga.addParam('sys_id', sys_id);
    ga.getXMLAnswer(function(response) {
      c.data.description = response;
      $scope.$apply();
    });
  };
})();

Server script:

var YourScriptInclude = Class.create();
YourScriptInclude.prototype = Object.extendsObject(AbstractAjaxProcessor, {
  getRecords: function() {
    var gr = new GlideRecord('your_table');
    gr.query();
    var records = [];
    while (gr.next()) {
      records.push({
        sys_id: gr.sys_id.toString(),
        name: gr.name.toString()
      });
    }
    return JSON.stringify(records);
  },

  getDescription: function() {
    var sys_id = this.getParameter('sys_id');
    var gr = new GlideRecord('your_table');
    if (gr.get(sys_id)) {
      return gr.description.toString();
    }
    return '';
  }
});

Navigate to Service Portal > Pages. Select the page where you want to add the widget. Add the widget to the page.