A spinner of full screen. | Community
Skip to main content

A spinner of full screen.

  • February 21, 2023
  • 5 replies
  • 0 views
Василь

Hello there.
I would like to block screen from ticket sidebar with a spinner on full screen.
It's possible?

var client = ZAFClient.init();

client.invoke('hide');

client.on('app.registered', (data) => {

    client.on("ticket.submit.done", function () {
        // on spinner

        client.request({
            url: 'http://localhost:3000/delay',
            type: 'post'
        }).then((res) => {
            console.log("ticket.submit.done res: ", res);

            // off spinner
        });
    });
}

    5 replies

    Tipene
    • Tipene
    • February 22, 2023
    Hi Василь Савіцький,
     
    One way you could go about this is by using a modal within the app. Here's an example of how that could look:
     
    const doSomething = () => {
      // Create modal instance
      client.invoke("instances.create", {
              location: "modal",
              url: "assets/modal.html",
              size: {
                  width: "80vw",
                  height: "80vh",
              },
          })
          .then((modalContext) => {
              client.request({
                      url: "http://localhost:3000/delay",
                      type: "post",
                  })
                  .then((res) => {
                      console.log("ticket.submit.done res: ", res);
                      // Get modal instance
                      const modalClient = client.instance(modalContext["instances.create"][0].instanceGuid);
                      // Close modal
                      modalClient.invoke("destroy");
                  });
          });
    };
     
    With this example, you'll need to create a separate modal.html file where you'll have this spinner located. Here's a link to the documentation that goes in to more detail.
     
    I hope this helps. Feel free to reach out with any questions.
     
    Tipene

     
    Василь
    • Василь
    • Author
    • February 22, 2023

    I thought about it way. But it variant isn't elegant.
    How can I remove "modal-header" and hidden a vertical scroll?
    This method has an effect like close the modal if I will click outside modal.Can I stop it effect like event.preventDefault()? 

    An idea with control a global loader of full screen can be easier and flexible.
    Please add in road map it proposition.

    Tipene
    • Tipene
    • February 22, 2023
    You're not able to directly change the appearance and behaviour of the modal once it's generated since the modal and associated events are created within the parent DOM which is inaccessible from the iframe'd ZAF app that creates the modal. 
     
    What's the use-case you're trying to solve for here? Maybe there's another alternative we can take a look at.
    Василь
    • Василь
    • Author
    • February 23, 2023

    I would like to freeze the main web interface to get promise.

    Tipene
    • Tipene
    • February 23, 2023
    Perhaps you can take a look at using a top_bar location instead. This will give you the ability to cover the majority of the interface with a popover panel that cannot be exited by the user, although the top navigation bar will still be accessible and as before, you cannot remove the app header:
     
    https://developer.zendesk.com/api-reference/apps/apps-support-api/top_bar/ 
    Terms & ConditionsCookie settingsAccessibility statement