Make Popups Draggable and Resizable in Joget Userview

Introduction

This article demonstrates how to enhance Joget Userview popups by making them draggable and resizable. By injecting a simple script into the UI settings, users can interact with popups more freely, improving overall usability. Additionally, the appearance and behavior of these popups can be customized through CSS modifications. 

How does it work?

1. In UI Builder, select Settings button to open the UI settings.
2. Navigate to Theme > Advanced and scroll down to Custom JavaScript.
3. Enter the script below into the Custom JavaScript field. 

   $(document).ready(function() {
       function enhanceDialog() {
           var $dialog = $('.ui-dialog');
            
           if ($dialog.length > 0) {
        
               if ($dialog.find('.ui-dialog-drag-handle').length === 0) {
                   //modify the drag icon according to your needs
                   $dialog.find('.ui-dialog-titlebar').prepend('<span class="ui-dialog-drag-handle ui-icon ui-icon-grip-dotted-vertical" style="position: absolute; right: 20px; top: -10px;cursor: move;"></span>');
               }
   
               $dialog.draggable({
                   handle: '.ui-dialog-drag-handle',
                   containment: 'window'
               }).resizable({
                   handles: 'all',
                   minWidth: 400,
                   minHeight: 300,
                   resize: function(event, ui) {
                       var $iframe = $('#jqueryDialogFrame');
                       if ($iframe.length > 0) {
                           $iframe.height(ui.size.height - $('.ui-dialog-titlebar').outerHeight());
                       }
                   }
               });
   
               // Update handles according to your needs
               $('<style>')
                   .text(`
                       .ui-dialog .ui-dialog-drag-handle {
                           display: inline-block;
                           width: 16px;
                           height: 16px;
                           margin-top: 2px;
                       }
                       .ui-dialog .ui-resizable-handle {
                           background: #f0f0f0;
                           border: 1px solid #ccc;
                       }
                       .ui-dialog .ui-resizable-se {
                           width: 12px;
                           height: 12px;
                           right: -5px;
                           bottom: -5px;
                       }
                       .ui-dialog .ui-resizable-e {
                           width: 8px;
                           right: -4px;
                       }
                       .ui-dialog .ui-resizable-s {
                           height: 8px;
                           bottom: -4px;
                       }
                   `)
                   .appendTo('head');
           }
       }
   
       enhanceDialog();
   
       $(document).on('dialogopen', '.ui-dialog', function() {
           enhanceDialog();
       });
   });

   JavaScript

   Copy
4. To customize the pop-up’s appearance, edit the inline style attributes in line 9 applied to the .ui-dialog-drag-handle element, such as position, offset, or cursor.

   // To customize the popup appearance, modify the inline styles in the code below as needed
   if ($dialog.find('.ui-dialog-drag-handle').length === 0) {
       // You can adjust the drag icon’s styling here
       $dialog.find('.ui-dialog-titlebar').prepend(
           '<span class="ui-dialog-drag-handle ui-icon ui-icon-grip-dotted-vertical" style="position: absolute; right: 20px; top: -10px; cursor: move;"></span>'
       );
   }

   JavaScript

   Copy
5. Save and Launch to view the pop-up's customization.

Expected Outcome

In runtime, you can see the drag icon that allows us to reposition the pop-up by clicking and dragging it to our desired location, as demonstrated in the image below.

Download sample app