How to popup static HTML table content with 8 columns of fields in service portal

sinu2 · ‎04-25-2020

Hi,

I am née for service portal. My requirement is to when onclick of a button popup a static HTML table with some content. If any one has done like this requirement earlier can provide me code or what needs to be config?

Siddhnath Pande · ‎04-26-2020

Try This,

HTML Script:

<div>
<style>
. >div {
height: 15em;
width: 19em;
padding: 0.5em 1em;
margin: 0 0em 1em 0;
background-color: #fff;
color: #00385a;
}

. div li {
list-style-image: url('potato-bullet.png');
}

. div>div {
height: 95%;
background-image: url('');
background-repeat: no-repeat;
background-position: top right;
}
</style>
<a class="" href="">
    <ul ng-if="::c.options.bulletList">
      <li ng-repeat="b in ::c.options.bulletList"></li>
		</ul>
</a>
</div>
<div>
 <button class="btn btn-primary" ng-click="c.openModal()">${Open Modal}</button>
</div>
 
<script type="text/ng-template" id="modalTemplate">
 <div class="panel panel-default">
	 <div class="panel-heading">
		 <h4 class="panel-title">Modal Window</h4>
   </div>
   <div class="panel-body wrapper-xl">
       
     <table class="table table-striped table-bordered">
      <h2>Table data</h2>
     
        <tr>
          <th scope="col">Column 1</th>
          <th scope="col">Column 2</th>
          <th scope="col">Column 3</th>
        </tr>
         <tr>
          <td scope="col">data 1</td>
          <td scope="col">data 2</td>
          <td scope="col">data 3</td>
        </tr>
         <tr>
          <td scope="col">data 1</td>
          <td scope="col">data 2</td>
          <td scope="col">data 3</td>
        </tr>
     		
      </table>
       
   </div>
 	 <div class="panel-footer text-right">
   <button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
 </div>
 </div>
</script>

Client Script:

function($uibModal, $scope) {
/* widget controller */
var c = this;
c.options.cssClassName = "lw-tile-" + c.options.cssClassName;
 c.openModal = function() {
 c.modalInstance = $uibModal.open({
 templateUrl: 'modalTemplate',
 scope: $scope
 });
 }
 
 c.closeModal = function() {
 c.modalInstance.close();
 }
}

Let me know if it work's

View solution in original post

Siddhnath Pande · ‎04-26-2020

Nice to see, that you are still trying.

First thing please share the code either screen shot of the widget or use Insert?edit code sample feature of community like in below Image. Because it's very difficult to understand the code.

I don't know exactly why it is not working, though it is working in my system. I have used this many time.

Now kindly share me the complete screen shot of the Footer widget. Make sure it should contain all scripts.

So I may help.

Here is the link of how to use this this model window in service portal, feel free to check this out.

https://serviceportal.io/modal-windows-service-portal/

SK41 · ‎06-22-2021

I have a requirement where i have to display static data in a tabular format in the catalog item form. Something like in the image

When user selects sample value in drop down of a field this table should be visible. I am working on paris version.

How can I achieve this functionality? Should I be using UI Macros or Widgets? If yes, how to use it?

KIndly, help as i have never worked on the macros and widgets.

Thanks in advance.