Issues using a Modal to update item

Hello the community, 

I am posting this issue today because I spent the full day trying to solve it without any success. Let me explain the context. 

I have a list of projects, containing a quantity of items. All the items are referenced by a TB number (TBxxxxxx) and assigned to projects using a foreign key (ProjectId) as attribute. That way I can list my projects and group them into a record list as you can see below

 In this image we have 3 projects and in the second project : 4 items. 

An item has 3 parts (LV, BK and Custo) and I have to update their status in order to follow the production. There are 3 status : not started (grey background), started (yellow background), finished (green background). To diyplay my projects, I am using accordion item widgets as you can see. 

My idea to update the status is to use a PopUp. (On OutSystems 11, as I understood, we can use a Modal or events for this). As you can see below, each part can be updated via a dropdown list and a save button

And here comes the issue. In my architecture, I configure a main screen (Projects) and 2 web blocks (ItemsList and ItemDetail). The main screen contains the list record with accordions. The content of the accordion is the web block ItemsList which contains a list record of ItemDetail web blocks. 

In order to use the Modal, the only solution working for me is to implement the modal directly in the ItemDetail Web Block. But as you can see on the first picture, it creates a space between each item. 

I tried to solve it by putting the modal in the ItemsList Web Block and use an event triggered on click on the ItemDetail WB to pass to the parent the Item ID to display in the modal. If I do this, I don't have spaces between items but the modal is empty. 

I tried with a local variable containing the Item, or with an Items aggregate in the preparation of the ItemsList, refreshed when the event is triggered and filtered with the ItemId and both are not working, I still have the modal displaying a new item instead of the selected one. 

I hope you will understand this long explanation. Feel free to ask for more details. I would like to know if you have a solution in order to not have spaces after items due to modal in each itemDetail of the list record of ItemsList. And I guess that having only one modal in the Projects screen instead of many is even more efficient but then I don't understand why, using my event trigger, I cannot have the ItemId in my modal of the parent screen

Hello Guillaume,

The problem is not the Modal itself, but the interaction between the Modal and the Gallery...
If you remove the Gallery (using a correct width for the card, for example, 3 columns), it will work.

But in fact, if you keep the modal in the "Detail", you will have as many modals as you have items in the page, what is probably not a good thing (lots of unnecessary HTML making your page heavier.

You can use an event in the module to open the Modal outside the list, passing the Item Id, but you have to remember that the Form does not copy the content of its source in a Submit or AjaxSubmit, so, you will need to FORCE the data in the Form's record in the event handler with an assignment (data refresh in the aggregate source and then put the record in the Form Record with the assign). 

This will make the information appear.

Of course, now you will have a different problem, that is to refresh the item INSIDE the accordion... ;)

Hope this helps.


P.S. A solution to avoid the "cluttering" of Modals because of the list, would be to put it in a Web Block (the same thing about the form is valid here), with a toggle modal in the Preparation, and put the web block inside an IF in the ItemDetail block. 

When you want to show the modal, you just make it appear changing the condition of the IF, when you want to close, send an event from the modal web block and make it disappear from the page.

This is how I would do it. :)