Simple Modal

Product Customize x Workflows
,
1

Hi,

I’m getting an error when I try and use the modal option from the interface api

When I use the example provided:

 function openModal(){
   try {
      // app.js
      client.interface.trigger("showModal", {
          title: "Sample Modal",
          template: "modal.html"
      });
  } catch (error) {
      // failure operation
      console.error(error);
  }
 }

I get:

image

I use the following on click method to try and call the modal function:

<fw-button onclick="openModal()">Open Modal</fw-button>

Here is the modal.html

<html>

<head>
    <script src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>
    <script src="../app/scripts/app.js"></script>
</head>

<body>
    <fw-modal id="open-modal" slier="true">
        <fw-modal-title><span>Example modal</span></fw-modal-title>
        <fw-modal-content>
            <div>Content</div>
        </fw-modal-content>
        <fw-modal-footer>
            <fw-button>OK</fw-button>
        </fw-modal-footer>
    </fw-modal>
</body>

</html>
3

Hello @will_bex ,
Welcome to the Freshworks Community!!

Did you initialize the app and set the client object globally. I see that you are using the client.interface API which is returning undefined.

Can you try something like like.


var client;

init();

async function init() {
  client = await app.initialized();
  client.events.on('app.activated', registerEvents());
}

async function registerEvents() {
  const button = document.getElementById('showModal');
  button.addEventListener('click', function(){
    client.interface.trigger("showModal", {
      title: "Sample Modal",
      template: "modal.html"
    });
  })
}

Hope this helps!!

2 Likes
4

Thanks Kunal that’s done the trick! :slight_smile: