Submit catalog if acknowledgement is checked in modal window / cancel button to go back

[Lakshmi Prasann]

Hi All,

I have a catalog form, in that when the user tries to submit the form, it should display a modal window with an acknowledgement text and a check box. The user has to check the check box to accept the acknowledgement to submit the form. And, if the user clicks on Cancel button it should take the user to previous page.

I tried with an UI page and glide modal with no luck.

Can someone help me here?

Thanks in Advance!

[AnveshKumar M]

Hi @Lakshmi Prasann ,

You can try using the Service Portal Widget in modal window, like below. And, then call them in catalog client scripts.

HTML:

<h3 class="widget-heading">Acknowledgement</h3>
<div>
  <div class="row">
    <div class="col-sm-12 col-md-12">
      Your acknowledgement text here.<br/>
      <div class="col-md-12 pull-right">
        <div class="form-group">
          <br>
        	<label class="col-sm-12 checkbox-inline">
          	<input id="usrAcknowledged" type="checkbox" ng-required="true" ng-model="c.data.ack_val" value="acknowledged"> I Acknowledge </label>
      	</div>
      </div>
    </div>   
  </div>
  <br>
    <div class="modal-footer">
    <button ng-disabled="!c.data.ack_val" type="submit" ng-click="$parent.$parent.buttonClicked($parent.$parent.options.buttons[1])" class="btn btn-primary pull-right m-l-sm">Submit</button>
    <a href="javascript&colon;window.history.back()" class="btn btn-primary pull-right m-l-sm" role="button">Cancel</a>
  </div>
</div>

Client Controller:

api.controller = function() {
    /* widget controller */
    var c = this;
    var shared = c.widget.options.shared;
};

onLoad Catalog Client Script:

function onLoad() {


    g_user.readyForSubmit = false;
    g_user.showAlterServicePortal = function() {
        var shared = {};
        var popupOptions = {
            widget: 'acknowledgement_test',
            shared: shared,
            footerStyle: {
                display: 'none'
            }
        };
        var modalInstance = spModal.open(popupOptions).then(function() {
            g_user.readyForSubmit = true;
            g_form.submit();
        });
    };

}

onSubmit Catalog Client Script:

function onSubmit() {
        if (g_user.readyForSubmit) return true;

        g_user.showAlterServicePortal();

        return false;
}

[Lakshmi Prasann]

Hi Anvesh,

Thanks for the immediate solution, I don't want the Submit button field to be Greyed out, Is that possible?

[AnveshKumar M · Accepted solution]

Hi @Lakshmi Prasann,

Yes, it is possible. Try changing the HTML to the following.

<h3 class="widget-heading">Acknowledgement</h3>
<div>
  <div class="row">
    <div class="col-sm-12 col-md-12">
      Your acknowledgement text here.<br/>
      <div class="col-md-12 pull-right">
        <div class="form-group">
          <br>
        	<label class="col-sm-12 checkbox-inline">
          	<input id="usrAcknowledged" type="checkbox" ng-required="true" ng-model="c.data.ack_val" value="acknowledged"> I Acknowledge </label>
      	</div>
      </div>
    </div>   
  </div>
  <br>
    <div class="modal-footer">
    <button type="submit" ng-click="$c.data.ack_val && parent.$parent.buttonClicked($parent.$parent.options.buttons[1])" class="btn btn-primary pull-right m-l-sm">Submit</button>
    <a href="javascript&colon;window.history.back()" class="btn btn-primary pull-right m-l-sm" role="button">Cancel</a>
  </div>
</div>

[imran rasheed]

@AnveshKumar M : How can I have this same setup of acknowledgement while loading a catalog item in portal? so once the user accepts the acknowledge , the catalog item in portal opens up.