Button Event to Display Dialog – based on custom java script function

Page Structure – HTML Code

<oj-dialog style="display:none" dialog-title="Dialog" id="d1">
  <div slot="body">
    <div class="oj-flex"></div>
   <div slot="body">
      <p>Are you sure you want to navigate?</p>
  <div slot="footer">
      <oj-button id="confirmYes" on-oj-action="[[$listeners.confirmYesOjAction2]]" >Yes</oj-button>
      <oj-button id="confirmNo" on-oj-action="[[$listeners.confirmNoOjAction]]">No</oj-button>

<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 oj-md-2">
    <oj-button on-oj-action="[[$listeners.ojButtonOjAction]]">Open Dialog</oj-button>

JavaScript Code

define([], function() {
  'use strict';

  var PageModule = function PageModule() {};

   * @param {String} arg1
   * @return {String}
  PageModule.prototype.openDialogFun = function () {
  console.log("user clicked on Open Diallog to open the dialog");

  PageModule.prototype.closeDialogYes = function () {
  console.log("user clicked on Yes button");
  PageModule.prototype.closeDialogNo = function () {
  console.log("user clicked on No button");
  return PageModule;

Action Chain Event Binding

Final Page

Leave a Reply

Your email address will not be published.