Customize Review Activity layout

Andreas_Voigt

Hello there, 
As I get a lot of feedback from our Linemanagers that the ReviewActivity page doesnt provide information in a way that they "would like to have it" I thought about maybe I could alter the layout a little.
Is there a way to do this ?
Basically just keep the "squares" and get rid of the rest ?

Thanks a lot in advance

Andreas

Rod_Marten

I wish these were as easy to customize as the base forms.  Please review Seth's article  https://sethcoussens.com/2016/02/17/dynamically-hiding-service-request-activity-form-fields-in-the-cireson-portal/

Tom_Hendricks

The page in your screenshot is difficult to customize compared to the others.  We ended up changing ours because nobody liked the order info was presented in, either.  I had to resort to using JQuery to move the HTML elements on the page from one place to another and use CSS to make it look like it was meant to be there instead of being the kludge of $().append() and $().prepend() that it actually became.  The finished product is fine, but I'm not a fan of what I had to write to get there.

Knowing more now than I did at the time, if I had to do it over again I would make a copy of the controller.js / view.html file for this page, have IIS redirect from these files to my copies of them inside of /CustomSpace/ and I would make my changes to the way the page is constructed there (essentially following a pattern @Ryan_Lane has expertly demonstrated in other threads).  It's a little more work with code, but I think it is a better and possibly more performant way of doing it.

Ryan_Lane

@Tom_Hendricks is right on the difficulties in customizing Review Activity Approval and Manual Activity Completion pages outside of some jQuery DOM modifications in custom.js.  Instead of dynamically loading JSON templates (e.g. Incident.js, ServiceRequest.js, etc.) and building the form structure from that the portal uses compiled files to create these particular pages: 

Konstantin_Slavin-Bo

@Andreas_Voigt

As the others in this thread have stated, there's no template file for this page, so customization have to be done in custom.js, and will always be dependent on Ciresons layout staying the same between versions.

But as of v9.4.1 this code will get you what you need:

// Customize Approval page
$(document).ready(function() {

 if (document.URL.indexOf("ReviewActivity/Approval") > -1) { // Only worry about Approval pages

   //The navigation node doesn't load immediately. Get the main div that definitely exists.
   var mainPageNode = document.getElementById('main_wrapper');

   // create an observer instance
   var observer = new MutationObserver(function(mutations) {

     //The page changed. See if our element exists yet.
     if(document.getElementsByClassName("form-control-picker input-sm ra-input").length > 0){

       // Stop listening
       observer.disconnect();

       // Hide unwanted elements
       $('#ra-activity-info').hide(); // Whole RA element on bottom
       var rows = $('#ra-workitem-info').find('.row');
       $(rows.find('.ra-user-info')[1]).hide(); // Assigned User
       $(rows[2]).hide(); // SR Description
       $(rows[3]).hide(); // User Input
     }
   });

   // configure the observer and start the instance.
   var observerConfig = { childList: true, subtree: true };
   observer.observe(mainPageNode, observerConfig);
 }
});