my modal is loading full screen by default

Nate Zapotocky

how do I open a modal NOT in full screen?


on my add-in, I have:

    this.addinClientService.settingsClick.subscribe(() => {

 

      this.addinClientService.showModal({

        url: 'http://localhost/mytestapp/#/add-in-test-tile/1234',

        context: { recordId: this.recordId }

      });

    });

 

on my modal, I have:

    var client = new BBSkyAddinClient.AddinClient({

      callbacks: {

          init: (args) => {

              args.ready({

                  showUI: true,

                  title: 'My Test Modal'

              });

          }

      }

  });

it "works" but the modal is loaded full page. I want it to be a modal. is there an option for fullpage?


also, is there an option to load a larger size modal? bbModal has 'size' parameter. I want the equivalent to size: 'lg'

Ben Lambert

Hi Nate,


Thanks for your question!  There's a bit of overloading of the word "modal" here that might be contributing to the confusion - I'll try to clear things up for you.


The AddinClient.showModal() method is used to tell the host application to render a full-screen, blocking, user interaction pattern.  At runtime, an iframe is rendered over the screen to house whatever UX is to be shown.  So from that perspective we say this is a "modal" interaction pattern - the user has to take action and dismiss the UX before returning to the host application.


That's different from the "modal" component (whether SKYUX v1 or SKYUX v2 or some other UX platform) that you might choose to show in the page loaded into the iframe.  If the full-screen iframe's page has a transparent background and immediately launches a "modal component", it will produce desired end result (which looks like the modal form being shown is part of the host application).


You can actually see an example of this that might help - if you've gone through the add-in tutorials, you'll have encountered a hello world tile add-in.  That tile contains a button labeled "Show a simple modal" that illustrates that the page loaded into the "modal" iframe is indeed a full-screen page (with a white background).  But you can toggle the background to transparent and see that the host application is still running.  


That tutorial also contains a button labeled "Show Add customer modal", and the code to show this is exactly the same as the code needed to show the "simple" modal example (the only difference is the URL being passed to the showModal() function).  The "Add customer" example happens to load a page with a transparent background and then immediately makes use of a SKYUX modal component to render the "Add customer" form with first/last name.


So the key here is to remember that you control the entire page being loaded in the full-screen iframe.


Let us know if this helps or if you have any questions.

Thanks!