How to create a pop up when service portal home page loads

[SSA1]

Hi,

I have a requirement to implement a popup in that pop it includes a image , this has to be load when service portal home page loads, So can anyone please guide me as I searched I got to know this can be achieved through UI page and also there's something I found spModal which is still I'm not clear about spModal, still I'm researching about that in this type of case what's the most easiest way to implement pop up on load service portal home page.

Any guidance/ help much appreciated!

[Shubham Tipnis]

Hi,

1. Create a new Widget

2. In client script of the widget provide spmodal script. 

3. Now, each time user navigate to this page, Pop-up will appear to them.

You can use code like below. Remember, you need to add this widget in your home page.

spModal.open({
size: 'lg',
widget: widgetId,
buttons: [{label:'${Close}', cancel: true}],
widgetInput: {sys_id: articleID}
});

Also, check this solution also. Just do a research as how could you display an image in JS code.

Regards,

Shubham

[SSA1]

@Shubham Tipnis

Can u please explain me what u meant by  in 2nd point.

2.In client script of the widget provide spmodal script. 

Can you give some example to follow. I'm bit confused.

[SSA1]

this is the working example I have achieved, for any one's reference,

Body HTML template

<div> 

  <div data-ng-init="c.openModal()"></div>
  <script type="text/ng-template" id="modalTemplate">
  <div>
    <img src="image.png" width="598" height="200"/>
    <div class="panel-footer text-right">
    <button class="btn btn-primary" ng-click="c.closeModal()">${Close}</button>
  </div>
 </script>

</div>

Client controller

api.controller = function($uibModal, $scope) {
    /* widget controller */
    var c = this;

    c.openModal = function() {
        c.modalInstance = $uibModal.open({
            templateUrl: 'modalTemplate',
            scope: $scope
        });
    };

    c.closeModal = function() {
        c.modalInstance.close();
    };
};

controllerAs

c

Add this widget to your service portal.