Modal component

[Aesth]

When using a modal component with a form where new data is entered, I'd like it to update on the page that owns the modal component after it's closed or saved. However, the problem is that when the form's submit button is clicked, the modal window remains open, since the same page opens after processing. The modal window can be closed separately, but that's unsightly. Is there a way to reopen the original page without the modal window open?

[SebastiendOrnano]

It seems there is no way to solve this problem with pure SQLpage.

You have to design a custom component and add few javascript snippets such as :

in the custom component :

<script>
  // Écoute la fermeture de n'importe quel modal SQLPage
  window.addEventListener("sqlpage:modal:close", function (event) {
    console.log("Modal SQLPage fermé", event);
    // Recharge toute la page pour récupérer les dates mises à jour
    location.reload();
  });

  document.addEventListener('click', function(e) {
  if (e.target.matches('[data-bs-dismiss="modal"], .btn-close, .btn[data-bs-dismiss="modal"]')) {
    window.parent.postMessage({ 
      action: 'refresh', 
      source: 'modal_chart',
      timestamp: Date.now()
    }, '*');
    console.log('Message envoyé au parent pour refresh');
  }
});
</script>

and in the file :

<script>
// Après sauvegarde réussie ou bouton Close
function notifyParentAndClose() {
  window.parent.postMessage({ action: ''refresh'', source: ''myform'' }, ''*'');
  
  // Émettre aussi l''événement SQLPage pour compatibilité
  window.dispatchEvent(new CustomEvent("sqlpage:modal:close"));
}
  setTimeout(function () {
    notifyParentAndClose();
  }, 2000);
</script>

But as I do not master javascript, I did not succeed to make it works ! It should work but honestly I am stuck to how to use theses scripts ! All I achieved was to refresh the parent file when clicking on the "close" button. (When the form is submitted, it redirect a "form validated" confirm.sql message in the modal and then I close the modal by the button but it should close automatically after 2 sec)

[Aesth]

Thanks so much for the reply, I was really scratching my head trying to figure out how to get out of this situation. I wanted to use only SQLPage's capabilities, without the need for third-party tools. This means I'll have to rethink my approach to the current user profile editing form, where some data is master-details. I wanted to make some changes using a modal component. Essentially, I wanted to edit just a few fields, but not on the full page, which looks very sparse, in a small window. There are other options, but this approach is widely used in standalone applications, and habits are hard to change.

[SebastiendOrnano]

The same for me. I created a form with only the field to update (it is a timeline in a project management app and I want just to be able to update the starting date or duration of a task) access to my custom components (but read the disclaimer first !)

[lovasoa]

I am not sure I understand the problem. Can you share a minimal example?

[Aesth]

What I wanted: the user profile edit form contains a list of roles (table component) the user has. I wanted to be able to open the form in a modal window from the profile page, select additional roles, and click the save button to save the changes and reload the original page with the updated list of roles.


Unfortunately, closing the modal window doesn't save the changes to the form, and saving the changes using the form button opened in the modal window leaves the modal window open after the profile form reloads.