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. To enable drag and resize functionality for pop-up windows.
2. Navigate to UI > Settings > Advanced > Custom JavaScript add the following script to the UI settings as shown in the code block and screenshot below:
   

   $(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();
       });
   });
   
   

3. The drag icon allows us to reposition the pop-up by clicking and dragging it to our desired location, as demonstrated in the image below.                                                                                                                 

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

Download Sample App

APP_kb_DX8_Popup_Drag&Resize.jwa