Versions Compared

Old Version 7

changes.mady.by.user Selvavignesh Perumal

Saved on

compared with

New Version Current

changes.mady.by.user Debanraj Ravindran

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 screenshot. UI→ Settings→ Advanced→ Custom Javascriptcode block and screenshot below:
    Code Block
    languagejs
    $(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. Refer to the attached screenshot., as demonstrated in the image below.
    Image Added                                                                                                                   Image Removed  

  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 style.
    Image Added

Code Block
languagejs
// 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>'
    );
}


Download Sample App

View file
nameAPP_kb_DX8_Popup_Drag&Resize-1.jwa
height250