Fix List and Form page to save records properly in Service Portal

[Luk__ Kn__ek]

Description

The List and Form page is available in Service Portal with id=lf. Table and filter parameters need to be specified to show some records in the list part (e.g., ?id=lf&table=incident&filter=caller_id=javascript:gs.getUserID()).

The lf page is used to display related lists of records.

When any record from the list is clicked, it opens on the right side of the page. Once another record is clicked (no page reload), it opens and all seems to be just fine but the form doesn't reload properly. When the newly opened record is edited and saved, all values are saved to the record that was open first after page reload - all fields are set to the newly loaded record values so you get number duplicates. 

g_form of the form is not reloaded on new record click so the record that was loaded as it first is saved with new data.

Workaround

Can be fixed by editing the form widget on the right side. The trick is in removing the form completely and showing it again on any list click. A simple ng-if statement needs to be added to this part of HTML Template on line 63:

<div ng-if="data.show_form_section">
  <sp-model form_model="data.f" mandatory="mandatory"></sp-model>
</div>

Next, loadForm function in Client Controller (L141) needs to be updated to remove the section for a while on list click. By default, setupAttachmentHandler function runs right after server update. In my solution, processLoadFormResponse runs first and executes setupAttachmentHandler:

function loadForm(table, sys_id) {
  var f = {};
  $scope.data.table = f.table = table;
  $scope.data.sys_id = f.sys_id = sys_id;
  f.view = $scope.data.view;
  return $scope.server.update().then(setupAttachmentHandler);
}
 
function processLoadFormResponse() {
  // reload the form completely
  $scope.data.show_form_section = false;
  $timeout(function() {
    $scope.data.show_form_section = true;
  });

  setupAttachmentHandler();
}

The updated form widget can be found in attachments. On the lf page, the Form widget need to be replaced with the one from attachment to make it work.

Because the fixed form widget is cloned, it doesn't have any ng-templates related records and doesn't ask user to select a record when no record is selected. I recommend to use a copy of "empty-state-list-form.html" with custom name and use the new name in Server Script in "data.emptyStateTemplate" (L18).