Problems with Modal Component

Szymon Zaleski
Szymon Zaleski
Seventh Anniversary Kudos 1 Name Dropper Participant
in SKY Developer General Discussions
537123c237d088e63058d3f5a2f43e5e-huge-im

I am trying to use Modal Component as a form to enter additional notes with sensitive information visible only to the person who entered them.

I created a tile to display a list of the notes, mirroring the standard Notes tile in NXT, but I am having some problems with the Modal Component.

a82dd27ac5c951916d9660297bec60f1-huge-im

First, when there is no notes in the data warehouse, the tile is condensed to look like this:

feb6112c683d9ba9a60a5515da96458e-huge-im

The problem is that the Modal Component opens only within the Add-in and while it temporarily expands the tile to fit the modal window in, it immediately shrinks the tile back to the condensed size and it looks like this:

I tried using fullPage option for the modal, I tried using sky-page with min-height: 500px within the tile, but it doesn't work - the tile size adjusts to the amount of content. Is there a way to force a minimum height of the add-in tile? Alternatively, is there a way to open a modal window outside the Add-in tile without building it as a separate Modal Add-in SPA?

cf925a05950e815fff413feb7bcf9175-huge-im

Anyway, for now I went around it and forced the tile to be taller by adding few br tags when (*ngIf) there are no notes to display and when Add Note is clicked.

At that point I can display the form within the modal window.

ac1266aa086fb93e768a29f9cda14672-huge-im

I followed the example on the website, have a public instance: SkyModalInstance in the constructor, button Save in the sky-modal-footer is calling instance.save() on click.

However, I am unable to capture the result from Modal instance.

3a352d55eca76224c6252b54fb97714f-huge-im
2d41d46e40227949bac58962c2eeac60-huge-im

I am not even trying at this point to capture the content of the form within the modal window, but when I close the modal window, whether by clicking Cancel or Save, I don't get the alert and the tile doesn't condense, which means the addingNote flag for the html part remains true.

What am I doing wrong here?

Comments

  • Ben Lambert
    Ben Lambert
    Ninth Anniversary Kudos 5 Name Dropper Participant

    @Szymon Zaleski your add-in is running in an iframe within the tile's content area, so anything you do within that context will be confined to the rectangular region of your iframe. You can certainly use the SKYUX modal component, but (as you're seeing) it will be rendered within your iframe.

    That works (functionally), but what you really want is to ask the host application (the Blackbaud page) to show a model. That is handled through the Add-in Client library (or the Add-in Client SKYUX library if you're using it). When your add-in calls the addinClient.showModal() method, a message is sent to the host application page, which in turn handles instantiating a new iframe that spans the width of the screen, and that iframe is loaded with whatever URL you specify. You can think of that URL as being just a separate route in your add-in's SPA, where the route immediately shows a modal. The end result looks just like a native modal dialog experience.

    Here's a link with more details from our documentation (including links to some sample code in GitHub):

    https://developer.blackbaud.com/skyapi/docs/addins/concepts/capabilities#showing-a-modal

    Hope this helps!

  • Szymon Zaleski
    Szymon Zaleski
    Seventh Anniversary Kudos 1 Name Dropper Participant

    @Ben Lambert Thank you, I figured that would most likely be the case. I don't mind the modal opening in within the tile, it's just that the add-in tile briefly expands vertically to show the initiated modal, but then compacts to the original size based on the content of the tile, shrinking the modal dialog to the unusable size in the process.

    1ab53d794b6126cdfbea69cbcec0a92a-huge-im

    I was able to work around it to add some line breaks to the tile content when I need to display the modal in the no-content tile.

  • Szymon Zaleski
    Szymon Zaleski
    Seventh Anniversary Kudos 1 Name Dropper Participant

    @Ben Lambert
    One more question. Is there a way to control the height of the Add-in and the scroll bar in Add-in window? It's not critical, more of a pet peeve, but instead of expanding the tile to the right size, a scroll bar randomly appears in the add-in window, even when there is nothing really to scroll.

    00e3e294e372e9d47440bf1f8ecf170a-huge-im

    There are only two notes here and the scroll only on the right only scrolls the page one pixel up and down resulting in a thicker line between the tile header (Patient Notes) and the tile content

    46d1fbc0ce08ffea310d2c40da316627-huge-im

    When I filter to show only Medical type, the scroll disappears and the window is displayed properly.

    f90b0b197536086ebec3b37fcb4af935-huge-im

    But when filtered to Personal, the scroll appears again, despite the note being even shorter.

    34bedd2b548ae2a107ada11a1ea9a5d7-huge-im

    Like I mentioned above, the only difference in scroll up/scroll down is a thicker line separating add-in title (Patient Notes) from the tile content.

    I've even encountered situations, where the tile started “blinking” - showing the scroll bar rearranged the displayed content, which then led to scroll bar disappearing, just to show up moments later when the displayed content rearranged for the window without the scroll bar.

    I'm using <sky-page>, tried different types of style overflow-y - nothing seemed to work. Any ideas?

Categories