Service Portal : change column size on the fly
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
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 ?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.