Service Portal : change column size on the fly

r_gissarl_
Mega Expert

‎11-12-2018 08:36 AM

Hi,

 

I have a page in which I have 5 containers. In the container 4, there are 4 instances of information displayed as cards.

But, depending on a user property, I need to hide the Manage your incidents instance AND reorganize all the row to display correctly the other instances (they are all the same size). Basically, change the size - md to 4 of the column 1 to 3.

find_real_file.png

We managed to find a solution in Istanbul. We are now upgrading in Kingston, and the solution is not fully working anymore. In the client script, we still can hide the incident card by assigning a style : display = none (document.getElementsByClassName(c.widget.directiveName)[0].parentNode.parentNode.parentNode.style.display = 'none'). But changing the value of the class attribute for the other card is not working (from col-md-3 to col-md-4) in Kingston (don't know why but changing by script the className is not working).

Any idea on how to change the size of a column in the client script ?

 

Preview file
69 KB
Preview file
35 KB
  • 3,813 Views
2 REPLIES 2

Matthew Maes
Tera Contributor

‎02-19-2020 09:42 AM

I have a solution I used for both the cards on a Service Portal homepage and in the Service Portal Knowledge pages. The customer needed the side bar on the knowledge to have a button allowing the user to hide the side bar and maximize the view. For the home page depending on the role they wanted 3 or 4 cards to show.

In both cases I created what I call a wrapper widget that spans the entire row and dynamically changes the column widgets via ng-class. The widgets are embeded into the wrapper widget. The widget options can be handled in a multiple ways including; hard code them into the embedded widget code, keep them in a record somewhere or add them as options to the the wrapper widget.

 

 <!--wrapper widget -->
<div class="row">
  <div ng-class="max ? 'col-md-9' : 'col-md-12'">
     <sp-widget widget="data.kbWidget"></sp-widget>
  </div>
  <div class="hidden-print" ng-class="max ? 'col-md-3' : 'hidden'">
    <widget id="kb-attachments" options="{color: 'primary', size: 'sm'}"></widget>
     <div class="kb-article-list">
      <sp-widget widget="::c.data.kbListwidget"></sp-widget>
    </div>
  </div>
</div>

r_gissarl_
Mega Expert
In response to Matthew Maes

‎02-20-2020 12:57 AM

Hi Matthew,

Thank you for sharing your solution, I finally rewrote our a more flexible container to include all the children instances and set the class with the ng-class property just like you did.

Because, the class is not determined by a user action but a company user property, I did it from the server side.

 

Regards.

0 Helpfuls