Customize Review Activity layout

Answers

• Options

  Rod_Marten Customer IT Monkey ✭

  January 2019

  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/

  0
• Options

  Tom_Hendricks Customer Super IT Monkey ✭✭✭✭✭

  January 2019

  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.

  1
• Options

  Ryan_Lane Cireson Support Advanced IT Monkey ✭✭✭

  January 2019 edited January 2019

  @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: 
  
  

  1
• Options

  Konstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭

  September 2019

  @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);
   }
  });
  

  0