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

Yeah one more suggestion As same widget called 2-3 times on the same page then it widget instance play role.

So when you change the code on one widget it is reflecting on every widget so you have fix that first.

sinu2 · ‎04-26-2020

Hi Pandey,

Really appreciate you ardwork on this question. But is there anyway that i can show you the insatnce code?

Siddhnath Pande · ‎04-26-2020

Then please mark it as Correct & Helpful

Siddhnath Pande · ‎04-26-2020

I don't know in community is there anyway to share the screen.

sinu2 · ‎04-26-2020

👍